Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

rawnato's avatar

Unable to listen to events with echo-react

Hi everyone! 👋

I recently started implementing useEcho in my Laravel 12 + Inertia (React) project, using the new update of the laravel/echo:2.1 package.

I’m using Herd Pro as my local stack, so all the Reverb configuration is being handled by Herd itself.

Something a bit strange is happening: the events are being dispatched correctly, and when I inspect the page, I can see the message arriving through the websocket, like this one:

{"event":"App\Events\Showcase\ShowcaseHasBeenShared","data":"{"timestamp":1747898345}","channel":"private-notifications"}

So, it seems like the broadcast is working and connecting properly.

However, for testing purposes, I’m running this code:

useEcho('notifications', ['App\\Events\\Showcase\\ShowcaseHasBeenShared'], (e) => {
console.log(e);
});

…but the console.log(e) is never triggered.

I’ve also tried changing the event name in the event class using broadcastAs() like so:

public function broadcastAs(): string
{
    return 'ShowcaseHasBeenShared';
}

…and updated the listener accordingly in useEcho, but still no luck.

useEcho('notifications', ['ShowcaseHasBeenShared'], (e) => {
console.log(e);
});

Has anyone else experienced this? Do you think this is something I should open a bug report for on the GitHub repo, or am I possibly missing something in the implementation?

Thanks in advance for any help!

1 like
3 replies
yuhayrap's avatar

Hi everyone,

I'm having a similar issue here - the callback is not executing.

Previously, I tried using the useEcho hook from @laravel/echo-vue, and I came across an issue on the official GitHub page related to useEchoPublic. In short, you need to call .listen() for it to work properly. For example:

useEchoPublic('test-channel', '.TestChannelData', (e) => { 
    console.log(e.data); 
}).listen();

I applied the same .listen() call to useEcho, and it worked.

Now I'm experimenting with React + Inertia, and I can't get the callback to work - no matter what I try. It doesn't work with or without .listen().

I even tried something like this ( I know what it's not necessary but anyway):

const { listen } = useEcho(
    'testChannel', 
    'testEvent', 
    myCallback,
);
listen();

…but that didn't help either.

The useEcho is kind of working. Judging by Chrome dev tools, it's connecting and receiving messages successfully, but the callback never gets executed.

So if anyone has any insight into this issue, please let us know. Thanks in advance!

yuhayrap's avatar

Hi again,

I found the solution in my case - or rather, I realized what I did wrong 😅

In the event name, I forgot to add a dot at the beginning, which is required when you're listening for a custom event name (as defined in broadcastAs()).

Here’s what I had:

useEcho(
    `chat.private.${conversation.id}`,
    ".messages.private", // ← this dot in begining is important!
    handleReceivedMessage,
);

On the server side, the event looked like this:

public function broadcastAs(): string
{
    return 'messages.private;
}

Turns out I should’ve read the documentation a bit more carefully 😄 Hopefully this helps someone avoid spending two days debugging like I did!

1 like

Please or to participate in this conversation.