使用 Pusher 进行 Laravel 广播无法使用 Vue 进行监听

Question

通过 Laravel (v5.7)，我试图让广播与 Pusher 和 Vue 一起使用。

该应用程序就像一个聊天工具。当私聊有消息发送时，会调用以下函数:广播(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 应用程序编写):

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

在示例中，我为私有(private) channel 硬编码了数字 1，因为它与屏幕截图中的 channel 相同。

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

Answer 1

根据您在评论中的回复，您的广播/身份验证请求调用不会被触发。这似乎表明 bootstrap.js 文件中的 Laravel Echo 代码没有被调用。

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

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