使用 Pusher 的 Laravel 广播不使用 Vue 监听

Question

对于 Laravel (v5.7)，我正在尝试让广播与 Pusher 和 Vue 一起使用。

该应用程序就像一个聊天。当私聊有消息发送时，调用如下函数： broadcast(new NewChat($message));

这是“NewChat”-事件：

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];
    }
}

channels.php 有：

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

它将所有内容发送给 Pusher：

但我不知道如何使用 Vue 正确监听事件并全部更新。 以下是我在 boostrap.js 中添加的（都是用 Vue 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);
    });

在示例中，我将数字 1 硬编码为私人频道，因为这与屏幕截图中的频道相同。

我错过了什么？我多次重新阅读文档页面并尝试按照教程查看我是否跳过了一些小的但不知道的内容。 有谁知道我遗漏了什么？

Answer 1

根据您在 cmets 中的响应，您的 broadcasting/auth 请求调用不会被触发。这似乎表明您的 bootstrap.js 文件中的 Laravel Echo 代码没有被调用。

您可以对此进行测试的一种方法是在您的bootstrap.js 文件中添加一个console.log。可能的原因可能是 a) 错过了部署脚本运行，b) 您的应用入口点未调用 bootstrap.js。

如果您错过了部署脚本运行，只需运行 npm run prod 即可解决问题。