如何解决 Laravel Broadcasts + Pusher..？答案

【问题标题】：How to troubleshoot Laravel Broadcasts + Pusher..?如何解决 Laravel Broadcasts + Pusher..？
【发布时间】：2019-03-18 05:52:54
【问题描述】：

我正在关注Laravel Documentation 使用 Pusher 设置广播，它看起来很简单，但我还没有让它工作，所以我一定是在路上的某个地方犯了错误。

这是我所做的：

服务器端

我创建了一个实现ShouldBroadcastNow 接口的Event 并定义了broadcastsOn() 方法。

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

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

我正在从我的一个 API 控制器引发事件：

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

我已在我的 .env 文件中配置了我的推送器凭据。

客户端

我已经在客户端配置了 Laravel Echo（通过 angular-laravel-echo 包）并为我的客户端订阅了频道。

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

但是，当我的 API 端点被命中时，该事件被触发，但我在客户端看不到任何东西。

所以，我在 broadcastOn() 方法中添加了日志记录，以验证它是否被调用。然后我将驱动程序从pusher 更改为log，我确实看到广播信息被写入laravel.log 文件。

所以，我假设广播也在使用 Pusher 驱动程序时发生，并且要么没有从 Laravel 发送出去，要么没有被客户端接收。

我是 sockets、pusher 和 Laravel Echo 的新手，所以我不确定在哪里可以找到更多信息来追踪它。

我在laravel.log 文件中看不到任何错误。
我在客户端的 Chrome 开发工具中没有看到任何错误。
我登录了 pusher，“错误日志”选项卡中没有错误

如何获取更多详细信息以找出问题所在？

谢谢！ :-)

[更新] 我可以看到广播出现在我的推送者帐户中，所以问题似乎出在客户端。也许我没有正确订阅正确的频道？

另外，我只使用 Laravel 作为后端，使用 JWT 身份验证。我目前没有使用 laravel csrf 令牌，不确定这是否相关。

【问题讨论】：

标签： laravel laravel-5.6 pusher laravel-echo

【解决方案1】：

我现在了解到我可以在开发工具中查看 Web 套接字数据。我假设这个错误之前存在，我只是没有注意到它。我想 101 状态代码对我来说并不突出：-o

但是在查看开发工具后，我可以清楚地看到这个错误：

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

查看 Web Socket 活动：

开发工具 > 网络 > 过滤器 > WS（Web Sockets）：

就我而言，我只需要在 Laravel Echo 配置中指定集群：

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

【讨论】：