Vue Websockets 双答案

【问题标题】：Vue Websockets doubleVue Websockets 双
【发布时间】：2021-03-02 08:32:28
【问题描述】：

我在使用 Laravel/Echo websockets 和 Vue.js 时遇到了一些问题。我根据需要进行了所有设置，并且可以正常工作，但不如预期。所以问题是，当我刷新页面并发送请求时，它会显示该请求，但是如果我更改页面并返回到那个 websocket 所在的页面，它将加倍该请求，如果我点击也会发生同样的情况另一条路线。基本上，如果我更改页面 5 次，它将在该表中显示 websocket 5 次，这是为什么呢？这是我的设置。

这是我连接到频道的挂载方法。

mounted() {
        if(this.liveData){
            window.Echo.channel("addOrder").listen(".order-created", (order) => {
                this.$store.commit("ADD_ORDER", order);
            });
        }
        
        this.$store.dispatch("GET_ORDERS");
    },

这是我在 main.js 中的连接

import Echo from 'laravel-echo'

window.Pusher = require('pusher-js');
Pusher.logToConsole = true;

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: 'some_key',
    wsHost: '127.0.0.1',
    wsPort: 6001,
    cluster: process.env.MIX_PUSHER_APP_CLUSTER,
    forceTLS: false,
    disableStats: true,
});

【问题讨论】：

标签： javascript php vue.js websocket

【解决方案1】：

您的 Echo 已附加到 window，Vue 没有重新加载页面，它只是用 JS 切换它，所以您的连接仍然有效。

您应该在离开页面之前断开连接，所以只需在beforeDestroy 挂钩中进行。更多关于钩子here

此外，如果您在任何地方都需要此连接，则不应在 mounted、created 或 Vue 组件的其他位置初始化它，您可以为 Vue 创建单独的文件或插件，因为每次打开页面时都会触发该功能.

【讨论】：