Vue Websockets 双

Posted 2023-02-16

【中文标题】Vue Websockets 双

【英文标题】：Vue Websockets double

【发布时间】：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,
);

【参考方案1】：

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

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

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