VUE-添加长链接webSocket,全局使用，接收消息并处理

App.vue

// App.vue
export default {
    data() {
        return {
            // socket参数
            socket: null,
            timeout: 10 * 1000, // 45秒一次心跳
            timeoutObj: null, // 心跳心跳倒计时
            serverTimeoutObj: null, // 心跳倒计时
            timeoutnum: null, // 断开 重连倒计时
            lockReconnect: false, // 防止
            websocket: null
        };
    },
    mounted() {
        this.initWebSocket(userId); // userId为socket链接的参数
    },
    methods：{
        initWebSocket(supplierId) {
            // WebSocket与普通的请求所用协议有所不同，ws等同于http，wss等同于https
            let wsUrl = `wss://192.168.1.33/rest/supplier-api/wss/websocket/${userId}`;
            this.websocket = new WebSocket(wsUrl);
            this.websocket.onopen = this.websocketonopen;
            this.websocket.onerror = this.websocketonerror;
            this.websocket.onmessage = this.setOnmessageMessage;
            this.websocket.onclose = this.websocketclose;
            // 监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
            // window.onbeforeunload = that.onbeforeunload
        },
        start() {
            console.log('start');
            //清除延时器
            this.timeoutObj && clearTimeout(this.timeoutObj);
            this.serverTimeoutObj && clearTimeout(this.serverTimeoutObj);
            this.timeoutObj = setTimeout(() => {
                if (this.websocket && this.websocket.readyState == 1) {
                    this.websocket.send('heartBath');//发送消息，服务端返回信息，即表示连接良好，可以在socket的onmessage事件重置心跳机制函数
                } else {
                    this.reconnect();
                }
                //定义一个延时器等待服务器响应，若超时，则关闭连接，重新请求server建立socket连接
                this.serverTimeoutObj = setTimeout(() => {
                    this.websocket.close();
                }, this.timeout)
            }, this.timeout)
        },
        reset() { // 重置心跳
            // 清除时间
            clearTimeout(this.timeoutObj);
            clearTimeout(this.serverTimeoutObj);
            // 重启心跳
            this.start();
        },
        // 重新连接
        reconnect() {
            if (this.lockReconnect) return
            this.lockReconnect = true;
            //没连接上会一直重连，设置延迟避免请求过多
            this.timeoutnum && clearTimeout(this.timeoutnum);
            this.timeoutnum = setTimeout(() => {
                this.initWebSocket();
                this.lockReconnect = false;
            }, 5000)
        },
        async setOnmessageMessage(event) {
            console.log(event.data, '获得消息');
            this.reset();
            // 自定义全局监听事件
            window.dispatchEvent(new CustomEvent('onmessageWS', {
                detail: {
                    data: event.data
                }
            }))
            // //发现消息进入    开始处理前端触发逻辑
            // if (event.data === 'success' || event.data === 'heartBath') return
        },
        websocketonopen() {
            //开启心跳
            this.start();
            console.log("WebSocket连接成功!!!"+new Date()+"----"+this.websocket.readyState);
        },
        websocketonerror(e) {                
            console.log("WebSocket连接发生错误" + e);              
        },
        websocketclose(e) {
            this.websocket.close();
            clearTimeout(this.timeoutObj);
            clearTimeout(this.serverTimeoutObj);
            console.log("WebSocket连接关闭");
        },
        websocketsend(messsage) {
            that.websocket.send(messsage)
        },
        closeWebSocket() { // 关闭websocket
            that.websocket.close()
        },
    }

在使用页面上调用，举例index.vue　

mounted () {
    // 添加socket通知监听
    window.addEventListener('onmessageWS', this.getSocketData)
},
methods: {
    // 收到消息处理
    getSocketData (res) {
        //res.detail.data 就是你接收到的消息
        // ...业务处理
    },
}

以上是我参考他人的方法（我测试的时候是不能正常使用的）https://blog.csdn.net/MICHAEL_PRINCE/article/details/124492223
以下是我根据我自己的项目做的调整
APP.vue

initWebSocket(supplierId) {
                // WebSocket与普通的请求所用协议有所不同，ws等同于http，wss等同于https
                let wsUrl = `wss://XXXXXXXX`;
                this.websocket = new WebSocket(wsUrl);
                this.websocket.onopen = this.websocketonopen;
                this.websocket.onerror = this.websocketonerror;
                this.websocket.onmessage = this.setOnmessageMessage;
                this.websocket.onclose = this.websocketclose;
                // 监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
                // window.onbeforeunload = that.onbeforeunload
            },
            start() {
                console.log('start');
                let that=this;
                //清除延时器
                this.timeoutObj && clearTimeout(this.timeoutObj);
                this.serverTimeoutObj && clearTimeout(this.serverTimeoutObj);
                // this.timeoutObj = setTimeout(() => {
                    console.log("this.websocket :",this.websocket )
                    if (that.websocket && that.websocket.readyState == 1) {
                        console.log("进入发送心跳包")
                        that.websocket.send('{"token":"' + cookie.get("token") + '"}'); //发送消息，服务端返回信息，即表示连接良好，可以在socket的onmessage事件重置心跳机制函数
                    } else {
                        console.log("心跳包失败，重新链接")
                        that.reconnect();
                    }
                    //定义一个延时器等待服务器响应，若超时，则关闭连接，重新请求server建立socket连接
                    // this.serverTimeoutObj = setTimeout(() => {
                    //  this.websocket.close();
                    // }, this.timeout)
                // }, this.timeout)
            },
            reset() { // 重置心跳
                // 清除时间
                clearTimeout(this.timeoutObj);
                clearTimeout(this.serverTimeoutObj);
                // 重启心跳
                this.start();
            },
            // 重新连接
            reconnect() {
                if (this.lockReconnect) return
                this.lockReconnect = true;
                //没连接上会一直重连，设置延迟避免请求过多
                this.timeoutnum && clearTimeout(this.timeoutnum);
                this.timeoutnum = setTimeout(() => {
                    this.initWebSocket();
                    this.lockReconnect = false;
                }, this.timeout)
            },
            async setOnmessageMessage(event) {
                console.log(event.data, '获得消息');
                this.reset();
                // 自定义全局监听事件
                window.dispatchEvent(new CustomEvent('onmessageWS', {
                    detail: {
                        data: event.data
                    }
                }))
                // //发现消息进入    开始处理前端触发逻辑
                // if (event.data === 'success' || event.data === 'heartBath') return
            },
            websocketonopen() {
                //开启心跳
                let that=this;
                let timer;
                timer = setInterval(function (){
                    that.start();
                },that.timeout)
                // this.start();   //因为我这边一直报心跳延时，所以我添加了setInterval来发送心跳
                console.log("WebSocket连接成功!!!" + new Date() + "///////////" + this.websocket.readyState);
            },
            websocketonerror(e) {
                console.log("WebSocket连接发生错误" + e);
            },
            websocketclose(e) {
                this.websocket.close();
                clearTimeout(this.timeoutObj);
                clearTimeout(this.serverTimeoutObj);
                console.log("WebSocket连接关闭");
            },
            websocketsend(messsage) {
                that.websocket.send(messsage)
            },
            closeWebSocket() { // 关闭websocket
                that.websocket.close()
            },