心跳重连的原因
在使用Websocket过程中, 可能会出现网络断开的情况, 比如信号不好, 或者网络临时性关闭, 这时候Websocket的连接已经断开, 而浏览器不会执行websocket的onclose方法, 我们无法知道是否断开连接, 也就无法进行重连操作.
如果当前发送websocket数据到后端, 一旦请求超时, onclose便会执行, 这时候便可进行绑定好的重连操作.因此websocket心跳重连就应运而生了.
如何实现
在websocket实例化的时候, 我们会绑定一些事件:
var ws = new Websocket(url);
ws.onclose = function(){
// doing something
};
ws.onerror = function(){
// doing something
};
ws.onopen = function(){
// doing something
};
ws.onmessage = function(){
// doing something
};
如果希望websocket连接一直保持, 我们会在close或者error上绑定重新连接方法.
ws.onclose = function(){
reconnect();
};
ws.onerror = function(){
reconnect();
};
这样一般正常情况下失去连接时, 触发onclose方法, 我们就能执行重连了.
那么针对断网的情况的心跳重连, 怎么实现呢?
简单的实现:
var heartCheck = {
timeout: 60000,
timeoutObj: null,
reset: function(){
clearTimeout(this.timeoutObj);
this.start();
},
start: function(){
this.timeoutObj = setTimeout(function(
ws.send('HeartBeat');
){}, this.timeout)
},
};
ws.onopen = function(){
heartCheck.start();
};
ws.onmessage = function(event){
heartCheck.reset();
};
如上代码, heartCheck的reset和start方法主要用来控制定时.
什么条件下执行心跳
当onopen也就是连接上时, 我们便开始start计时, 如果在定时时间范围内, onmessage获取到了后端的消息, 我们就重置倒计时, 距离上次从后端获取到消息超过60秒钟之后, 执行心跳检测, 看是不是断连了, 这个检测时间可以自己根据自身情况设定.
