useEchoPublic does not listen to events unless the listen function is explicitly called in Vue.

[weristwiegott]

Echo Version

2.1.5

Laravel Version

12.0

PHP Version

8.2

NPM Version

11.12.0

Database Driver & Version

No response

Description

// This works ✅
useEchoPublic('streamers', 'DonationReceived', (e) => {
console.log('Donation received!');
showAlert(e.donation);
}).listen();

// This doesn't work ❌
useEchoPublic('streamers', 'DonationReceived', (e) => {
console.log('Donation received!');
showAlert(e.donation);
});

Steps To Reproduce

Call useEchoPublic without calling the listen function.

[stuartcusackie]

Ran into this issue yesterday. listen() makes it work!

[M-tcoda]

I Ran into this issue yesterday too and the .listen() is not working. I had to prepend a dot into the event name

//This is working for both useEcho and use EchoPublic
useEchoPublic('test-channel', '.TestChannelData', (e) => {
    console.log(e.data);
});

[cradigan]

@M-tcoda experienced the same issue. Your solution worked.

Does anyone have any idea why the prepended dot is needed?
This must be a bug.
I'm on:
"@laravel/echo-react": "^2.1.5",

[stuartcusackie]

I Ran into this issue yesterday too and the .listen() is not working. I had to prepend a dot into the event name

//This is working for both useEcho and use EchoPublic
useEchoPublic('test-channel', '.TestChannelData', (e) => {
    console.log(e.data);
});

This one is covered in the Laravel docs.

It's not the same problem that the OP is highlighting - UseEchoPublic does not activate unless .listen() is called

[hendrikheil]

I think the use case for useEcho* composables are so that listening and leaving a channel are automatically mapped to lifecycle events. If you don't want to have that automation, you can just access the echo instance with echo() instead.

For example if you are using Nuxt plugins, which are outside of component lifecycles, you'd want to use echo() and handle the listen/leave/disconnect logic with hooks on the Nuxt App instead.

[ardotheedu]

I Ran into this issue yesterday too and the .listen() is not working. I had to prepend a dot into the event name

//This is working for both useEcho and use EchoPublic
useEchoPublic('test-channel', '.TestChannelData', (e) => {
    console.log(e.data);
});

ty. I had spent 2 hours before find your reply

[willpower232]

chiming in to add this is also required on useEchoModel 🙏

useEchoModel("App.Models.User", model.id, ["UserUpdated"], function (e) {
    console.log(e.model);
}).listen();

[joetannenbaum]

I'm having trouble replicating this, does anyone have a publicly accessible reproduction I can check out?

• I spun up a new starter kit
• php artisan install:broadcasting (Reverb)
• Created an event
• Added useEchoPublic to the Welcome.vue
• Dispatched the event
• Got a console log that it was received on the client side

Happy to look at a repo if anyone has one.

[edenchazard]

@joetannenbaum So when you tested it, you didn't have to call listen after instantiating the composable? 🤔

Can you confirm what the intended usage is for these composables? Should we be calling the listen method from the composable, or is it expected to be handled by the package after instantiation? Suspect that's where most of the confusion is. If the former, I think that just wants adding to the docs, maybe like (for vue):

const { listen } = useEchoModel("App.Models.User", 1, ["UserUpdated"], (e) => {
    console.log("user updated", e);
});

onMounted(() => listen());

Happy to make a PR for that.

But if it's the latter then yeah, seems like a bug IMO. In my tests it's all hooking up correctly, and the events do come down in the network tab of dev console, it's just the callback above isn't being invoked, unless listen is also called.

Personally, I do actually like that separation as it offers more flexibility.

[joetannenbaum]

@edenchazard the intention is that it automatically starts listen on mount and stops listening on unmount, here is a repo with an extremely simple version to test, can you let me know how this might differ from your setup where you are not getting the same result? (setup instructions in the readme)

https://github.com/joetannenbaum/vue-echo-listen-on-mount-demo