Websocket心跳重连

心跳重连的原因

在使用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秒钟之后, 执行心跳检测, 看是不是断连了, 这个检测时间可以自己根据自身情况设定.