Laravel Broadcasting with Pusher isn't Listening with Vue

Question

With Laravel (v5.7) I'm trying to get Broacasting to Work with Pusher and Vue.

The App is like a Chat. When there is a message send in a private chat, the following function is called: broadcast(new NewChat($message));

This is the "NewChat"-Event:

class NewChat implements ShouldBroadcast
{
    use Dispatchable, InteractsWithSockets, SerializesModels;

    public $message;

    public function __construct(\App\Message $message)
    {
        $this->message = $message;
    }

    public function broadcastOn()
    {
        return new PrivateChannel('chats.' . $this->message->conversation_id);
    }

    public function broadcastWith()
    {
        return ['message' => $this->message];
    }
}

The channels.php has:

Broadcast::channel('chats.{conversationId}', function ($user, $conversationId) {
    return true; // security i'll do later
});

It sends it all to Pusher:

But I can't figure out how to correctly listen to the Events with Vue and update it all. The following I've added in the boostrap.js (it's all written in Vue the app):

import Echo from 'laravel-echo'
window.Pusher = require('pusher-js');
window.Echo = new Echo({
    broadcaster: 'pusher',
    key: process.env.MIX_PUSHER_APP_KEY,
    cluster: process.env.MIX_PUSHER_APP_CLUSTER, 
    encrypted: true
});
window.Echo.private(`chats.1`)
    .listen('NewChat', (e) => {
        console.log(e);
    });

In the example I hardcoded the number 1 for the private channel, because that's the same channel as from the screenshot.

What am I missing? I re-read the documentation page multiple times and tried following tutorials to see if I've skipped something small, but don't know. Anyone who sees what I'm missing?

In Chrome dev tools, do you see a successful `broadcasting/auth` XHR call? Also, how does the `WS` (Web socket) tab look like in Chrome dev tools? Does it have a connection established frame? — Paras, Oct 29 '18 at 21:16
@Paras Yes, I see that (https://www.dropbox.com/s/puw7q2cjsukcptr/Schermafdruk%202018-10-30%2010.25.29.png?dl=0) and when sending a message I see this in the WS tab: https://www.dropbox.com/s/vu20bvkf4zu13zv/Schermafdruk%202018-10-30%2010.26.41.png?dl=0 - but nothing more. In Pusher.com it all looks good and sees the connections and messages correctly. — user1469734, Oct 30 '18 at 09:26
I figured out that WS does more in a live environment: https://www.dropbox.com/s/n1v5gstsw0txqfv/Schermafdruk%202018-10-30%2011.34.25.png?dl=0 - but still nothing printed in my console of new chats — user1469734, Oct 30 '18 at 10:35
@Paras double checked it and it doens't show up online iindeed on the live server. — user1469734, Oct 30 '18 at 10:50
Try to temporarily change using private channels to public ones. Perhaps, you forgot to add `authEndpoint` (and implement it). — Styx, Dec 22 '18 at 17:57

Paras · Answer 1 · 2018-10-30T12:45:39.127

-2

Based on your responses in comments, your broadcasting/auth request call is not fired. This seems to suggest that your Laravel Echo code in your bootstrap.js file is not being called.

One way you can test this is simply add a console.log in your bootstrap.js file. Possible reasons could be a) missed deployment script run, b) your app entry point doesn't call bootstrap.js.

If you have missed deployment script run, just run npm run prod to fix the issue.

edited Oct 30 '18 at 12:45

answered Oct 30 '18 at 11:09

Paras

9,258
31
55

thank you. I added on top now of the bootstrap.js that console logger and the information is showed in the console. So the bootstrap is included correctly. How to fix/check #B? – user1469734 Oct 30 '18 at 11:44
Add a `console.log(window.Echo.options)` after echo initialization and check if your key and cluster show up properly. Also, do you see any errors related to Echo in your console? – Paras Oct 30 '18 at 11:48
```{broadcaster: "pusher", key: "xxxxx", cluster: "eu", encrypted: true}``` - no errors in the console. BUT now I found something out: the console things in bootstrap.js are showing up on my local dev machine, but not on the production live server. Is that maybe something? – user1469734 Oct 30 '18 at 12:01
Yes, that means that you possibly missed deployment on the production server. Did you run `npm run prod`? – Paras Oct 30 '18 at 12:06
no, I didn't ;-) But when I did, It indeed showed the console like it did locally. I checked in the console if the socket was running and it is: socket_id: 125244.3578055 and channel_name: private-chats.1 > so that's correct, right? – user1469734 Oct 30 '18 at 12:40
No, it's still not working. My expectation is that there is something printed in the console when a message is sent. In both browsers. But it doesn't. Even when I do an alert() in the listen(), it doesn't show either. – user1469734 Oct 30 '18 at 12:47
So now the `broadcasting/auth` XHR call is visible and the `WS` tab shows the frames for the channel? – Paras Oct 30 '18 at 12:57
Yes, that auth XHR call is visible and showint the socket and channel name. The WS tab does things when I submit new messages to the chat. But only in the browser where it's send from. Not the other one that also has the chat open. – user1469734 Oct 30 '18 at 13:02
What is the channel through which the message is sent? Is it the `chats.1` channel? Is the recipient browser also listening to the same `chats.1` channel? – Paras Oct 30 '18 at 13:26
In chrome XHR at the auth route: ```channel_name: private-chats.1```. In Pusher: ```Channel: private-chats.2, Event: App\Events\NewChat``` and the Listen in Vue: ```window.Echo.private(`chats.2`).listen('NewChat', (e) => { ``` – user1469734 Oct 30 '18 at 13:39
Sounds like the message is sent to a different channel than the channel listened to one the recipient end – Paras Oct 30 '18 at 13:44
The sender must send the message to the same channel that the recipient is listening to – Paras Oct 30 '18 at 13:45
Oh sorry, that was a typo. It's both sending and listening on the same channel. – user1469734 Oct 30 '18 at 13:50
That's strange, one last try. Try adding `public function broadcastAs() { return 'test';}` in your event class and changing the Vue code to `.listen('.test')` and see if it works. Don't forget the dot before test in the `listen` call. It isnt a typo – Paras Oct 30 '18 at 13:55
Sorry buddy, out of ideas now :) – Paras Oct 30 '18 at 14:21

Laravel Broadcasting with Pusher isn't Listening with Vue

1 Answers1