码迷,mamicode.com
首页 > Web开发 > 详细

websocket实现心跳连接

时间:2019-09-26 09:37:21      阅读:187      评论:0      收藏:0      [点我收藏+]

标签:断开连接   去重   建立连接   func   load   实现   erro   return   hat   

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

websocket实现心跳连接

标签:断开连接   去重   建立连接   func   load   实现   erro   return   hat   

原文地址:https://www.cnblogs.com/exmyth/p/11588696.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!