websocket心跳链接代码_websocket实现心跳连接

在使用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);