小编A. *_*eby的帖子

问题标题可能有点混乱,我尽力解释它.

我有laravel-echo-server,redis(排队),并Laravel echo设置.我想要的只是通过输入发送消息,并为页面上的每个人更新消息提要; 本质上是一个聊天室.

一切都有效,除了地狱的速度很慢,但我是新手Laravel Echo和Vue.

如果我发送了一条消息,那很好,但是当我发送另一条消息时,我会收到两条消息.发送第三条消息三个响应等等......

我究竟做错了什么？我已经检查socket.io/ laravel-echo-server只连接到通道一次,而我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']
});

这是我的聊天视图:

<div id="chatWindow" …

我试图通过使用Vue 2和laravel-echo-server通过Laravel Echo接收广播事件,但它无法正常工作.我也把laravel-echo-server放到开发模式,可以看到我进入频道,但是同时离开？如果这是问题,我该如何阻止这种情况发生并留在频道中？我还可以看到广播正在被解雇,因为我正在运行php artisan queue:work redis,每次我发送事件请求时Processed: Illuminate\Broadcasting\BroadcastEvent,我知道这也是有效的.为什么这不起作用？我真的很生气.

这是我的bootstrap.js:

window._ = require('lodash');

window.$ = window.jQuery = require('jquery');
require('bootstrap-sass');

window.Vue = require('vue');
require('vue-resource');

Vue.http.interceptors.push((request, next) => {
    request.headers.set('X-CSRF-TOKEN', Laravel.csrfToken);

    next();
});

import Echo from "laravel-echo"

window.Echo = new Echo({
    broadcaster: 'socket.io',
    host: 'http://test.dev:6001'
});

我的app.js:

require('./bootstrap');

Vue.component('alert', require('./components/Alert.vue'));

const app = new Vue({
    el: '#app',
    data: {
        users: []
    },
    created: function () {
        window.Echo.channel('test-channel')
            .listen('UserSignedUp', (e) => {
                console.log(e);
                console.log('test');
            });
    }
});

我的活动:

<?php …