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}

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:

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            // Private 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