vue中websocket心跳机制

在 Vue 中使用 WebSocket 心跳机制，可以通过定时发送心跳包来保持连接的稳定性。具体实现方式可以使用 setInterval() 函数来定时发送心跳包，同时在 WebSocket 的 onmessage 事件中监听服务器返回的消息，如果服务器返回的消息为空，则说明连接已经断开，此时需要重新连接。以下是一个简单的示例代码：

let ws = new WebSocket('ws://localhost:8080');
let heartCheck = {
    timeout: 60000, // 60秒
    timeoutObj: null,
    serverTimeoutObj: null,
    reset: function(){
        clearTimeout(this.timeoutObj);
        clearTimeout(this.serverTimeoutObj);
        this.start();
    },
    start: function(){
        let self = this;
        this.timeoutObj = setTimeout(function(){
            ws.send('ping');
            self.serverTimeoutObj = setTimeout(function(){
                ws.close();
            }, self.timeout);
        }, this.timeout);
    }
};
ws.onopen = function(){
    heartCheck.start();
};
ws.onmessage = function(event){
    if(event.data === 'pong'){
        heartCheck.reset();
    }
};
ws.onclose = function(){
    clearTimeout(heartCheck.timeoutObj);
    clearTimeout(heartCheck.serverTimeoutObj);
};

这段代码实现了一个简单的心跳机制，每隔 60 秒发送一次心跳包，如果服务器返回的消息为 'pong'，则重置心跳机制，否则关闭连接。