Pusher 未使用 laravel echo、laravel 和 vue js 聊天应用程序实时更新答案

【问题标题】：Pusher not updating in realtime with laravel echo, laravel and vue js chat applicationPusher 未使用 laravel echo、laravel 和 vue js 聊天应用程序实时更新
【发布时间】：2020-11-05 00:02:50
【问题描述】：

我一直在关注这个tutorial，学习使用 Laravel、Vue js、Laravel Echo 和 Pusher js 构建实时聊天应用程序。

我已经在 env 中设置了我的BROADCAST_DRIVER=pusher，并正确设置了推送器 ID、密钥、秘密和集群。

bootstrap.js 中的推送器配置：

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,
    forceTLS: true
});

来自app/Events/NewMessage.php的片段：

use App\Message;
class NewMessage implements ShouldBroadcast
{
    use Dispatchable, InteractsWithSockets, SerializesModels;

    public $message;
    public function __construct(Message $message)
    {
        $this->message = $message;
    }
    public function broadcastOn()
    {
        return new PrivateChannel('messages.' . $this->message->to);
    }

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

来自控制器的代码 sn-p

    public function send(Request $request)
    {
        $message = Message::create([
            'from' => auth()->id(),
            'to' => $request->contact_id,
            'message' => $request->text
        ]);

        broadcast(new NewMessage($message));

        return response()->json($message);
    }

处理事件的主要 vue 组件的代码：

    methods: {
        saveNewMessage(text) {
            this.loadMessages.push(text);
        },
        handelIncoming(message) {
            if (
                this.selectedContact &&
                message.from == this.selectedContact.id
            ) {
                this.saveNewMessage(message);
                return;
            }
            alert(message.text);
        }
    },
    mounted() {
        Echo.private(`messages.${this.user.id}`).listen("NewMessage", e => {
            this.hanleIncoming(e.message);
        });
        axios.get("/contacts").then(response => {
            this.contacts = response.data;
        });
    }

来自 channels.php 的代码

Broadcast::channel('messages.{id}', function ($user, $id) {
return (int) $user->id === (int) $id;
});

使用上面的代码，我可以发送和接收消息，但不是实时的，我必须重新加载页面或再次单击组件。

我还查看了视频中的评论部分，很多人都遇到了同样的问题。他们中的一些人建议清除缓存。

我尝试卸载并重新安装软件包，清除缓存，转储自动加载，但结果仍然相同。

该教程是 2 年前制作的，我现在正在使用最新的 laravel、pusher、echo 版本。不能在旧方法上运行的应用程序是否发生了剧烈变化？

【问题讨论】：

您是否可以使用 Pusher 调试控制台（登录到 dashboard.pusher.com，单击您的应用并选择“调试控制台”选项卡）来验证您是否已成功订阅频道，并且您正在向正确的频道触发事件？您能否发布带有订阅和捕获的触发事件的调试控制台的屏幕截图？
是的，我可以在调试控制台中看到事件。

标签： laravel vue.js pusher laravel-7

【解决方案1】：

原因是这个事件被触发并添加到队列中，你必须运行命令 queue:work 跑步。最好使用ShouldBroadcastNow 立即触发您的事件。

【讨论】：