useEcho not working with Broadcast Notifications

[clarkmcc]

Echo Version

2.1.4

Laravel Version

12.14.1

PHP Version

8.4

NPM Version

10.9.2

Database Driver & Version

No response

Description

I'm trying to use Broadcast Notifications. I can see the following event in my browser's websocket stream

{
  "event": "Illuminate\\Notifications\\Events\\BroadcastNotificationCreated",
  "data": "{\"description\":\"foobar\",\"id\":\"3b4e5c99-65bd-44f8-b5d7-765bbe5bebea\",\"type\":\"activity_posted\"}",
  "channel": "private-App.Models.User.56"
}

However, I'm struggling to find the right incantation to get this event to come through useEcho. I've tried the following, but no event is ever logged.

useEcho(`App.Models.User.${auth.user.id}`, '.Illuminate\\Notifications\\Events\\BroadcastNotificationCreated', (event) => {
    console.log(event);
  });

useEcho(`App.Models.User.${auth.user.id}`, 'Illuminate\\Notifications\\Events\\BroadcastNotificationCreated', (event) => {
    console.log(event);
  });

useEcho(`App.Models.User.${auth.user.id}`, 'Illuminate.Notifications.Events.BroadcastNotificationCreated', (event) => {
    console.log(event);
  });

useEcho(`App.Models.User.${auth.user.id}`, 'activity_posted', (event) => {
    console.log(event);
  });

What is the correct way to subscribe to Broadcast Notifications? If there isn't an issue here, at the very least, maybe we can bolster the React documentation for subscribing to these events.

Steps To Reproduce

I'm hoping that maybe there's a simple answer to my question above. If not, I can work on creating a repro.

[maxermolenko]

I have the same problem and am trying to figure out how to catch the broadcasting notifications. If you find the solution, please share it

[clarkmcc]

The only way I can get something to work, is by doing this:

const {channel} = useEcho(`App.Models.User.${auth.user.id}`);
useEffect(() => {
  channel().notification((event) => {
    console.log(event);
  });
}, [channel]);

Seems like a similar problem to #139, but I tried a bunch of stuff I saw in that thread, and no luck.

[clarkmcc]

Here's another oddity: again I can see the event coming down the websocket in Chrome dev tools so I know the Reverb server is working/connected/etc, but when I connect to the Reverb dashboard, it doesn't show the broadcast notifications. To confirm that I really was connected to the right reverb server, I used the Reverb dashboard to send a message on my App.Models.User.56 channel, and the websocket showed the message coming down the connection.

[clarkmcc]

I can't even use the channel().notification() approach in React because there's no way to unsubscribe from just those notifications. Unsubscribing apparently unsubscribes the entire useEcho hook, rather than just the channel().notifications() so trying to call channel().notifications() after calling .unsubscribe() doesn't start pulling events anymore.

const { channel } = useEcho(`App.Models.User.${auth.user.id}`)
useEffect(() => {
  const ch = channel();
  ch.notification(() => {
    // handle event
  })

  return () => {
    // clean up listeners & leave channel
    ch.unsubscribe();
  }
}, [channel])

[clarkmcc]

Okay I got this to work:

const { channel } = useEcho(`App.Models.User.${auth.user.id}`)
useEffect(() => {
  const ch = channel();
  ch.listen('Illuminate.Notifications.Events.BroadcastNotificationCreated', () => {
    // handle event
  })
  return () => {
    ch.stopListening('Illuminate.Notifications.Events.BroadcastNotificationCreated');
  }
}, [channel])

Apparently with this approach, I can't have a leading . in front of the event. I have to say, this API is making less sense the more I play with it. Hoping someone smarter than I can shed some light on this!

[jfroux83]

I don't know if it is relevant, but after struggling for days and hours, I figured out that you need to add a leading dot (.) to the event name.

useEchoPublic(`chatbot.${chatbot.id}`, ".DocumentProcessingComplete", (e) => {
        console.log(e);
    });

I think there is a problem with "@laravel/echo-react": "^2.1.4", the specific version

[clarkmcc]

@jfroux83 so I think that is intended (based on the tutorials I watched and the issues I've read through), but the documentation is definitely poor on that point.

I think you're using regular Events if I'm reading correctly. The problem in this ticket is about subscribing to Broadcast Notifications

[HenrijsFF]

So there's a setting for the namespace that is best to just set to false. This will remove the need to add the . at the start of the event name:

configureEcho({
...
  namespace: false,
...
});

As for the the Illuminate\\Notifications\\Events\\BroadcastNotificationCreated, I don't know if this'll allow without the full pathing.

[clarkmcc]

@HenrijsFF the problem I see with that is that I can still only useEcho subscribe to the BroadcastNotificationCreated channel, but not the type of the BroadcastNotificationCreated like I can with other event types. In other words, this hook is lacking first-party support for broadcast notifications it seems.

[HenrijsFF]

@clarkmcc I use it for broadcast notifications all the time, it shouldn't matter.
If you see it in the websocket messages, you can subscribe to it.
Try removing the namespaces and adding the broadcastAs parameter to the event with the event name you want: https://laravel.com/docs/11.x/broadcasting#broadcast-name

[joetannenbaum]

These are all valid concerns, that experience is pretty clunky. I added a new useEchoNotification hook for both React and Vue in v2.1.5, I hope this smooths the experience a bit:

import { useEchoNotification } from '@laravel/echo-react';

// Listen to all notifications
useEchoNotification('App.Models.User.1', (event) => {});

// Listen to specific notifications
useEchoNotification('App.Models.User.1', (event) => {}, [
    'App.Notifications.InvoicePaid', 
    'App.Notifications.OrderShipped',
]);