pqs-9100_client/frontend/src/utils/webSocketClient.ts

import {ElMessage} from "element-plus";


export default class SocketService {
    static instance = null;
    static get Instance() {
        if (!this.instance) {
            this.instance = new SocketService();
        }
        return this.instance;
    }
    // 和服务端连接的socket对象
    ws = null;
    // 存储回调函数
    callBackMapping = {};
    // 标识是否连接成功
    connected = false;
    // 记录重试的次数
    sendRetryCount = 0;
    // 重新连接尝试的次数
    connectRetryCount = 0;
    work:any;
    workerBlobUrl:any;
    lastActivityTime= 0; // 上次活动时间戳
    lastResponseHeartTime = Date.now();//最后一次收到心跳回复时间

    reconnectDelay= 5000; // 重新连接延迟，单位毫秒

    //  定义连接服务器的方法
    connect() {

        // 连接服务器
        if (!window.WebSocket) {
            return console.log('您的浏览器不支持WebSocket');
        }

        // let token = $.cookie('123');
        // let token = '4E6EF539AAF119D82AC4C2BC84FBA21F';


        const url = 'ws://127.0.0.1:7777/hello?name=cdf'
        this.ws = new WebSocket(url);
        // 连接成功的事件
        this.ws.onopen = () => {
            ElMessage.success("webSocket连接服务端成功了");
            console.log('连接服务端成功了');
            this.connected = true;
            // 重置重新连接的次数
            this.connectRetryCount = 0;
            this.updateLastActivityTime();
            this.startHeartbeat();
        };
        // 1.连接服务端失败
        // 2.当连接成功之后, 服务器关闭的情况
        this.ws.onclose = () => {
            console.log('连接webSocket服务端关闭');
            this.connected = false;
            this.connectRetryCount++;
            this.clearHeartbeat();
           /* setTimeout(() => {
                this.connect();
            }, 500 * this.connectRetryCount);*/


        };

        this.ws.onerror = () => {
            ElMessage.error("webSocket连接异常！");


        };


        // 得到服务端发送过来的数据
        this.ws.onmessage = (event) => {
            // console.log('🚀 ~ SocketService ~ connect ~ event:', event)
            if(event.data == 'over') {
                //心跳消息处理
                this.lastResponseHeartTime = Date.now();
                this.updateLastActivityTime(); // 收到心跳响应时更新活动时间
            }else {
                let message: { [key: string]: any };
                try {
                    console.log('Received message:',event.data)
                    message = JSON.parse(event.data);
                } catch (e) {
                    return console.error("消息解析失败", event.data, e);
                }

                /* 通过接受服务端发送的type字段来回调函数 */
                if (message?.type && this.callBackMapping[message.type]) {
                    this.callBackMapping[message.type](message);
                } else {
                    console.log("抛弃====>")
                    console.log(event.data)
                    /* 丢弃或继续写你的逻辑 */
                }
            }


        };
    }





    startHeartbeat() {
        this.lastResponseHeartTime = Date.now();
        const  _this = this
        _this.workerBlobUrl  = window.URL.createObjectURL(new Blob(['(function(e){setInterval(function(){this.postMessage(null)},9000)})()']));

        this.work = new Worker(_this.workerBlobUrl);
        this.work.onmessage = function(e){
            //判断多久没收到心跳响应

            if(_this.lastActivityTime - _this.lastResponseHeartTime > 30000){
                //说明已经三轮心跳没收到回复了，关闭检测，提示用户。
                ElMessage.error("业务主体模块发生未知异常，请尝试重新启动！");
                _this.clearHeartbeat();
                return;
            }
            _this.sendHeartbeat();
		}

    }
    sendHeartbeat() {
        console.log(new Date()+"进入心跳消息发送。。。。。。。。。。。。。")
        this.ws.send('alive');
        this.updateLastActivityTime(); // 发送心跳后更新活动时间
    }


    updateLastActivityTime() {
        this.lastActivityTime = Date.now();
    }

    clearHeartbeat() {
        const  _this = this
        if (_this.work) {
            _this.work.terminate();
            _this.work = null;
        }
        if (_this.workerBlobUrl) {
            window.URL.revokeObjectURL(_this.workerBlobUrl); // 释放临时的Blob URL
            _this.workerBlobUrl = null;
        }
    }



    // 回调函数的注册
    registerCallBack(socketType, callBack) {
        this.callBackMapping[socketType] = callBack;
    }
    // 取消某一个回调函数
    unRegisterCallBack(socketType) {
        this.callBackMapping[socketType] = null;
    }
    // 发送数据的方法
    send(data) {
        // 判断此时此刻有没有连接成功
        if (this.connected) {
            this.sendRetryCount = 0;
            try {
                this.ws.send(JSON.stringify(data));
            } catch (e) {
                this.ws.send(data);
            }
        } else {
            this.sendRetryCount++;
            setTimeout(() => {
                this.send(data);
            }, this.sendRetryCount * 500);
        }
    }

    // 断开方法
    closeWs() {
        if (this.connected) {
            this.ws.close()
        }
        console.log('执行WS关闭命令..');
    }
}