How to troubleshoot Laravel Broadcasts + Pusher..?

Question

I'm following the Laravel Documentation to set up broadcasting using Pusher, and it looks pretty straight-forward, but I haven't gotten it work yet, so I must have made a mistake somewhere along the way.

Here's what I've done:

Server Side

I've created an Event that implements the ShouldBroadcastNow interface and defined the broadcastsOn() method.

class ThreadMessageCreated implements ShouldBroadcastNow {
    use Dispatchable, InteractsWithSockets, SerializesModels;

    public function broadcastOn() {
        return new Channel('bobtest');
    }

I'm raising the Event from one of my API Controllers:

public function createMessage(Thread $thread, Request $request) {
    ...
    event(new ThreadMessageCreated($message, $thread));
    return $message;
}

I've configured my pusher credentials in my .env file.

Client Side

I've configured Laravel Echo on the Client side (via the angular-laravel-echo package) and subscribed my client to the channel.

ngOnInit() {
    this.echo
        .join('bobtest', 'public')
        .listen('bobtest', 'ThreadMessageCreated')
        .subscribe(()=>alert('message received'));
    console.log(this.echo);
}

However, when my API endpoint is hit, the event is fired, but I don't see anything on the client side.

So, I added logging in the broadcastOn() method to verify it's getting called. Then I changed the driver from pusher to log and I do see the Broadcast info getting written to the laravel.log file.

So, I'm assuming that the broadcast is also happening when using the Pusher driver, and either isn't being sent out from Laravel, or isn't being received by the Client.

I'm new to sockets, pusher, & Laravel Echo, so I'm not sure where to look for more info to track this down.

• I don't see any errors in the laravel.log file.
• I don't see any errors in Chrome Dev Tools on the client side.
• I logged into pusher and there are no errors in the 'Error Logs' tab

What can I do to get more details to figure out where the problem is occurring?

Thanks! :-)

[UPDATE] I can see the broadcasts are appearing in my pusher account, so the problem seems to be on the client side. Perhaps I'm not subscribing correctly to the right channel?

Also, I'm using Laravel as the back end only, using JWT Authentication. I'm currently not using the laravel csrf token, not sure if that could pertinent or not.

Answer 1

I now learned I can see web socket data in Dev Tools. I'm assuming this error was there before, I just didn't notice it. I guess the 101 status code didn't stand out to me :-o

But after looking in Dev Tools, I could clearly see this error:

{
    message: "App key xxx not in this cluster. Did you forget to specify the cluster?",
    event: "pusher:error"
}

To view Web Socket activity:

Dev Tools > Network > Filter > WS (Web Sockets):

In my case, I simply needed to specify the cluster in the Laravel Echo config:

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: 'xxxxxxxxxxxxxxxxxxxx',
    cluster: 'us2',  <--------------[pusher needs a cluster :-)]
    host: 'http://the-host.com',
    auth: {
        headers: {
            'Authorization': 'Bearer ' + token
        }
    }
});