vue3中使用websocket即时刷新数据

websocket的学习和使用

刚好最近要用到websocket做即时刷新，又是第一次使用，做个回顾
个人理解应该是后端通过这个提示前端来刷新数据，而不是后端通过这个给把数据直接给前端，个人理解哈，但是也可以接收不太长的数据好像，反正看项目需要

1.不需要安装依赖

我使用websocket是没装依赖的，直接创建的websocket对象
我创建了个ts用来连接，接收信息，关闭接收信息

export const createConnection = async (tag: any) => {
    socket = new WebSocket(`xxx`);
    console.log('ws连接状态：' + socket.readyState);
    socket.onopen = function () {
        console.log('ws连接状态：' + socket.readyState);
        status = socket.readyState;
    };
    socket.onclose = function () {
        // 监听整个过程中websocket的状态
        console.log('ws连接状态：' + socket.readyState);
        status = 0;
    };
};

连接的地址让后端给就好了，一般都是
ws://xxxx:8090/websocket/ 类似的地址，这里有个问题，https的好像要改成wss，不然在https环境下会报错不给用

在使用websocket的过程中有遇到一些坑，我也写出来，避免重复踩坑

// 接听服务器发回的信息并处理展示
ws.onmessage = function (data) {
    console.log('接收到来自服务器的消息：');
    console.log(JSON.parse(data.data));
    //完成通信后关闭WebSocket连接
    // ws.close();
}

原本的设想是，多个vue组件中要用到，于是就写成个方法，这样多个地方都能用到了，只需要引入这个方法，加了个回调， vue组件中：

import { wsOnMessage } from '@/utils/socket';
wsOnMessage((data: any) => {
            if (data.data) {
                let info = JSON.parse(data.data);
               // xxxxx代码接收到的逻辑
            }
        })

ts：

export const wsOnMessage = (callback: any) => {
            socket.onmessage = function (data: any) {
                callback(data);
            };
};

但是发现个问题，之前注册的方法被顶替掉了，即多个vue组件都注册了接收，但是只有一个能接收，于是优化了下：

export const wsOnMessage = (callback: any, type: any = '') => {
    funArr[type] = callback;
        if (socket) {
            socket.onmessage = function (data: any) {
                for (const key in funArr) {
                    funArr[key](data);
                }
            };
    };
};

加了个对象存方法，然后接收到新消息就都发一遍，这样每个vue就都能接收到了，后面又发现了需要主动去掉这个对象，不然你组件没了都还会接收…
于是加了个方法

export const closeMessageAccept = (type: any) => {
    if (funArr[type]) {
        delete funArr[type];
    }
};

在onBeforeUnmount或者其他生命周期给他删掉