心跳重連的原因

在使用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秒鐘之后, 執行心跳檢測, 看是不是斷連了, 這個檢測時間可以自己根據自身情況設定.