Laravel Echo

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

Introduction
Listeners
Private & Presence Channels

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