websocket实现心跳连接

Posted 2022-12-03 exmyth

在使用websocket的时候，遇到了一个websocket在连接一段时间就异常断开连接了。第一想法就是重新去连接websocket（websock.onopen），后来发现这种方式是错误的，查阅文档发现，要想重新建立连接，就需要一种心跳思想去处理（实时监听连接情况，断了就去重连）
下面以Vue代码为准：

let lockReconnect = false;//避免重复连接
let wsUrl = ‘‘ // url;
let ws;
let tt;

createWebSocket()
let that = this;
try
ws = new WebSocket(wsUrl);
this.init();
catch(e)
console.log(‘catch‘);
that.reconnect(wsUrl);

,
init()
let that = this;

//心跳检测
let heartCheck =
timeout: 3000,
timeoutObj: null,
serverTimeoutObj: null,
start: function()
console.log(‘start‘);
let self = this;
this.timeoutObj && clearTimeout(this.timeoutObj);
this.serverTimeoutObj && clearTimeout(this.serverTimeoutObj);
this.timeoutObj = setTimeout(function()
//这里发送一个心跳，后端收到后，返回一个心跳消息，
console.log(‘55555‘);
ws.send("888");
self.serverTimeoutObj = setTimeout(function()
console.log(111);
console.log(ws);
ws.close();
// createWebSocket();
, self.timeout);

, this.timeout)

;
ws.onclose = function ()
console.log(‘链接关闭‘);
that.reconnect(wsUrl);
location.reload()
;
ws.onerror = function()
console.log(‘发生异常了‘);
that.reconnect(wsUrl);
location.reload();
;
ws.onopen = function ()
//心跳检测重置
heartCheck.start();
;
ws.onmessage = function (e)
//拿到任何消息都说明当前连接是正常的
console.log(‘接收到消息‘);
console.log(e);

heartCheck.start();

,
reconnect(url)
if(lockReconnect)
return;

lockReconnect = true;
//没连接上会一直重连，设置延迟避免请求过多
tt && clearTimeout(tt);
tt = setTimeout( () =>
this.createWebSocket(url);
lockReconnect = false;
, 4000);
,

 

this.createWebSocket(wsUrl);