I have implemented Laravel Broadcasting in my project. Everything is working fine but I'm wondering if it's possible to listen to all events instead of just a specific one?

Currently I have this code on my front-end:

window.Echo.channel('office-dashboard')
  .listen('CompanyUpdated', (e) => {
    console.log(epany);
  });
  .listen('CompanyDeleted', (e) => {
    console.log(epany);
  });

I want to structure my event in such a way that I can grab what kind of event it exactly was, and what kind of action was performed. But that's useless if I still have to listen to each event specifically, like I do now. I want to listen to all events in a channel, is that possible?

I read the docs, but those only talk about how to listen to a specific event.

I have implemented Laravel Broadcasting in my project. Everything is working fine but I'm wondering if it's possible to listen to all events instead of just a specific one?

Currently I have this code on my front-end:

window.Echo.channel('office-dashboard')
  .listen('CompanyUpdated', (e) => {
    console.log(e.company);
  });
  .listen('CompanyDeleted', (e) => {
    console.log(e.company);
  });

I want to structure my event in such a way that I can grab what kind of event it exactly was, and what kind of action was performed. But that's useless if I still have to listen to each event specifically, like I do now. I want to listen to all events in a channel, is that possible?

I read the docs, but those only talk about how to listen to a specific event.

• javascript
• laravel-echo

• 2 I don't think so, but I think you can adjust the broadcaster to emit the multiple values on one channel, and then return that value. JavaScript should read is object then. – mutantkeyboard Commented Oct 6, 2017 at 12:06

4 Answers 4

If you are using pusher as your broadcast driver, you have access to a listenToAll() method from your Laravel Echo instance. In short, you may do the following to listen for all events on a specific channel:

Echo.private(`office-dashboard`)
   .listenToAll((event, data) => {
      // do what you need to do based on the event name and data
      console.log(event, data)
   });

The listenToAll() method just takes a single argument, a callback, which will receive the name of the event as the first parameter and any data associated with the event as a second parameter.

I came across the same situation. I think you need to listen to individual channels. but you can write the code a bit cleaner like below.

    const channel = window.Echo.channel('office-dashboard')

    const eventsTolisten = [
      'CompanyUpdated',
      'CompanyDeleted',
    ]

    eventsTolisten.forEach(event => {
      channel.listen(event, e => {
        this.handleSocketEvents({
          name: event,
          data: e.data
        })
      })
    })

Yes it is possible, I just implemented it on my app 5 minutes ago. Use the broadcastAs in all your events, as described here:

https://laravel.com/docs/8.x/broadcasting#broadcast-name

Then you can include the name of the event using the broadcastWith function:

https://laravel.com/docs/8.x/broadcasting#broadcast-data

--- server side ---

public function broadcastWith()
{
    return[
        'id' => 'RoomJoined',
        'message' => 'new user joined the room!'
    ];
}

public function broadcastAs()
{
    return 'event';
}

--- client side ---

window.Echo.channel(this.channel).listen(".event", response => {
  console.log(response);
});

To differentiate between the events you could either use an if statement in the listener or pass a function name to call directly, pros and cons to each.

In listen method, pass '*' as the event name.

window.Echo.channel('office-dashboard').listen('*', (e) => {
   console.log(e.company);
});