Laravel Echo

Be amazing at Livewire
with our in-depth screencasts.
Watch Now

Introduction

Livewire pairs nicely with Laravel Echo to provide real-time functionality on your web-pages using WebSockets.

This feature assumes you have installed Laravel Echo and the `window.Echo` object is globally available. For more info on this, check out the docs.

Consider the following Laravel Event:

            
1class OrderShipped implements ShouldBroadcast
2{
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}

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:

Make sure you have your Authentication Callbacks properly defined.
            
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 Channel
15 "echo:orders,OrderShipped" => 'notifyNewOrder',
16 
17 // Privete Channel
18 "echo-private:orders,OrderShipped" => 'notifyNewOrder',
19 
20 //Presence Channel
21 "echo-presence:orders,OrderShipped" => 'notifyNewOrder', // Listen
22 "echo-presence:orders,here" => 'notifyNewOrder', // Here
23 "echo-presence:orders,joining" => 'notifyNewOrder', // Joining
24 "echo-presence:orders,leaving" => 'notifyNewOrder', // Leaving
25 ];
26 }
27 
28 public function notifyNewOrder()
29 {
30 $this->showNewOrderNotification = true;
31 }
32}
← Previous Topic AlpineJS
Next Topic → Inline Scripts