Laravel Echo
Introduction
Livewire pairs nicely with Laravel Echo to provide real-time functionality on your web-pages using WebSockets.
Consider the following Laravel Event:
1class OrderShipped implements ShouldBroadcast2{3 use Dispatchable, InteractsWithSockets, SerializesModels;4 5 public function broadcastOn()6 {7 return new Channel('orders');8 }9}
Let's say you fire this event with Laravel's broadcasting system like this:
1event(new OrderShipped);
Normally, you would listen for this event in Laravel Echo like so:
1Echo.channel('orders')2 .listen('OrderShipped', (e) => {3 console.log(e.order.name);4 });
Listeners
With Livewire all you have to do is register it in your $listeners
property, with some special syntax to designate that it originates from Echo.
1class OrderTracker extends Component 2{ 3 public $showNewOrderNotification = false; 4 5 // Special Syntax: ['echo:{channel},{event}' => '{method}'] 6 protected $listeners = ['echo:orders,OrderShipped' => 'notifyNewOrder']; 7 8 public function notifyNewOrder() 9 {10 $this->showNewOrderNotification = true;11 }12}
If you have Echo channels with variables in (such as a Order ID) you can use the getListeners()
function instead of the $listeners
array.
1class OrderTracker extends Component 2{ 3 public $showNewOrderNotification = false; 4 public $orderId; 5 6 public function getListeners() 7 { 8 return [ 9 "echo:orders.{$this->orderId},OrderShipped" => 'notifyNewOrder',10 ];11 }12 13 public function notifyNewOrder()14 {15 $this->showNewOrderNotification = true;16 }17}
getListeners()
will only dynamically generate the names of listeners when the component is mounted. Once the listeners are setup, these can't be changed.
Now, Livewire will intercept the received event from Pusher, and act accordingly.
Private & Presence Channels
In a similar way to regular public channels, you can also listen to events broadcasted to private and presence channels:
1class OrderTracker extends Component 2{ 3 public $showNewOrderNotification = false; 4 public $orderId; 5 6 public function mount($orderId) 7 { 8 $this->orderId = $orderId; 9 }10 11 public function getListeners()12 {13 return [14 "echo-private:orders.{$this->orderId},OrderShipped" => 'notifyNewOrder',15 // Or:16 "echo-presence:orders.{$this->orderId},OrderShipped" => 'notifyNewOrder',17 ];18 }19 20 public function notifyNewOrder()21 {22 $this->showNewOrderNotification = true;23 }24}
This gives you the ability to react to a listen event on those channels with the OrderShipped
event name.
You can also access the joining | leaving | here
events of a presence channels with a slight change to the syntax.
1class OrderTracker extends Component 2{ 3 public $showNewOrderNotification = false; 4 public $orderId; 5 6 public function mount($orderId) 7 { 8 $this->orderId = $orderId; 9 }10 11 public function getListeners()12 {13 return [14 // Public Channel15 "echo:orders,OrderShipped" => 'notifyNewOrder',16 17 // Private Channel18 "echo-private:orders,OrderShipped" => 'notifyNewOrder',19 20 //Presence Channel21 "echo-presence:orders,OrderShipped" => 'notifyNewOrder', // Listen22 "echo-presence:orders,here" => 'notifyNewOrder', // Here23 "echo-presence:orders,joining" => 'notifyNewOrder', // Joining24 "echo-presence:orders,leaving" => 'notifyNewOrder', // Leaving25 ];26 }27 28 public function notifyNewOrder()29 {30 $this->showNewOrderNotification = true;31 }32}