Laravel Echo 重复监听 n 次广播事件

Question

题目可能有点乱，我尽量解释清楚了。

我已经安装了 laravel-echo-server、redis(用于队列)和 Laravel echo。我只想通过输入发送消息，并为页面上的每个人更新消息提要；本质上是一个聊天室。

一切正常，除了它慢得要命，但我是 Laravel Echo 和 Vue 的新手。

如果我发送一条消息，没问题，但是当我发送另一条消息时，我会收到两个回复。发送第三条消息三个响应等等...

我究竟做错了什么？我检查过 socket.io/laravel-echo-server 只连接到 channel 一次，而我的 broadcast 只发送一次(检查队列工作人员它只处理请求)，那么它是如何以指数方式重复的？

这是我的app.js:

const chatWindow = new Vue({
    el: '#chatWindow',
    data: {
        messages: []
    },
    methods: {
        sendMessage: function () {
            this.$http.post('/chat', {message: this.message}).then((response) => {
                window.Echo.channel('test-chat-channel')
                    .listen('MessageSent', (event) => {
                        console.log(event.message);
                        // this.messages.push(event.message);
                    });
            }, (response) => {
                // error callback
            });

            this.message = '';
        }
    },
    props: ['message']
});

这是我的聊天 View :

<div id="chatWindow" class="col-sm-7">
    <h1 class="text-center no-top">Chat</h1>
    <div class="chat-window">
        <ul>
            <li v-for="message in messages">@{{ message }}</li>
        </ul>

        <div class="form-group">
            <input title="Send Message" v-model="message" @keyup.enter="sendMessage" class="form-control" placeholder="Send message...">
        </div>
    </div>
</div>

以防万一它们在这里是相关的是我的路线:

Route::post('/chat', function (Request $request) {
    event(new MessageSent($request->message));
});

和我的事件:

<?php

namespace App\Events;

use Illuminate\Broadcasting\Channel;
use Illuminate\Queue\SerializesModels;
use Illuminate\Broadcasting\PrivateChannel;
use Illuminate\Broadcasting\PresenceChannel;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;

class MessageSent implements ShouldBroadcast
{
    use InteractsWithSockets, SerializesModels;

    public $message;

    public function __construct($message)
    {
        $this->message = $message;
    }

    public function broadcastOn()
    {
        return new Channel('test-chat-channel');
    }
}

Answer 1

对于遇到类似问题的任何人:

• 你有一个单页应用
• 您已经定义了一个 Echo 监听器
• 您已启用 Pusher 控制台日志并且只看到收到一个事件
• 您只看到在 Pusher 调试控制台中触发了一个事件
• 您在调试控制台中看到正常操作(一个订阅、断开连接等到正确的 channel )
• 但是每次触发单个事件时，您的监听器都会收到多个事件

这可能是您的 Pusher 连接在加载每个页面时没有被破坏。如果您有一个已在多个页面上注册的全局组件，就会发生这种情况。为了解决这个问题，您可以在主布局组件中注册您的监听器组件，以防止缓存多个监听器。