理解WebSocket心跳及重連機制（五）

龍恩0707發表於2018-03-26
Web

理解WebSocket心跳及重連機制

    在使用websocket的過程中，有時候會遇到網路斷開的情況，但是在網路斷開的時候伺服器端並沒有觸發onclose的事件。這樣會有：伺服器會繼續向客戶端傳送多餘的連結，並且這些資料還會丟失。所以就需要一種機制來檢測客戶端和服務端是否處於正常的連結狀態。因此就有了websocket的心跳了。還有心跳，說明還活著，沒有心跳說明已經掛掉了。

1. 為什麼叫心跳包呢？
它就像心跳一樣每隔固定的時間發一次，來告訴伺服器，我還活著。

2. 心跳機制是？
心跳機制是每隔一段時間會向伺服器傳送一個資料包，告訴伺服器自己還活著，同時客戶端會確認伺服器端是否還活著，如果還活著的話，就會回傳一個資料包給客戶端來確定伺服器端也還活著，否則的話，有可能是網路斷開連線了。需要重連~

那麼需要怎麼去實現它呢？如下所有程式碼：

<html>
<head>
  <meta charset="utf-8">
  <title>WebSocket Demo</title>
</head>
<body>
  <script type="text/javascript">
    // var ws = new WebSocket("wss://echo.websocket.org");
    /*
    ws.onerror = function(e) {
      console.log('已關閉');
    };
    ws.onopen = function(e) {
      console.log('握手成功');
      ws.send('123456789');
    }
    ws.onclose = function() {
      console.log('已關閉');
    }
    ws.onmessage = function(e) {
      console.log('收到訊息');
      console.log(e);
    }
    */
    
    var lockReconnect = false;//避免重複連線
    var wsUrl = "wss://echo.websocket.org";
    var ws;
    var tt;
    function createWebSocket() {
      try {
        ws = new WebSocket(wsUrl);
        init();
      } catch(e) {
        console.log('catch');
        reconnect(wsUrl);
      }
    }
    function init() {
      ws.onclose = function () {
        console.log('連結關閉');
        reconnect(wsUrl);
      };
      ws.onerror = function() {
        console.log('發生異常了');
        reconnect(wsUrl);
      };
      ws.onopen = function () {
        //心跳檢測重置
        heartCheck.start();
      };
      ws.onmessage = function (event) {
        //拿到任何訊息都說明當前連線是正常的
        console.log('接收到訊息');
        heartCheck.start();
      }
    }
    function reconnect(url) {
      if(lockReconnect) {
        return;
      };
      lockReconnect = true;
      //沒連線上會一直重連，設定延遲避免請求過多
      tt && clearTimeout(tt);
      tt = setTimeout(function () {
        createWebSocket(url);
        lockReconnect = false;
      }, 4000);
    }
    //心跳檢測
    var heartCheck = {
      timeout: 3000,
      timeoutObj: null,
      serverTimeoutObj: null,
      start: function(){
        console.log('start');
        var self = this;
        this.timeoutObj && clearTimeout(this.timeoutObj);
        this.serverTimeoutObj && clearTimeout(this.serverTimeoutObj);
        this.timeoutObj = setTimeout(function(){
          //這裡傳送一個心跳，後端收到後，返回一個心跳訊息，
          console.log('55555');
          ws.send("123456789");
          self.serverTimeoutObj = setTimeout(function() {
            console.log(111);
            console.log(ws);
            ws.close();
            // createWebSocket();
          }, self.timeout);

        }, this.timeout)
      }
    }
    createWebSocket(wsUrl);
  </script>
</body>
</html>

具體的思路如下：
1. 第一步頁面初始化，先呼叫createWebSocket函式，目的是建立一個websocket的方法：new WebSocket(wsUrl);因此封裝成函式內如下程式碼：

function createWebSocket() {
  try {
    ws = new WebSocket(wsUrl);
    init();
  } catch(e) {
    console.log('catch');
    reconnect(wsUrl);
  }
}

2. 第二步呼叫init方法，該方法內把一些監聽事件封裝如下：

function init() {
  ws.onclose = function () {
    console.log('連結關閉');
    reconnect(wsUrl);
  };
  ws.onerror = function() {
    console.log('發生異常了');
    reconnect(wsUrl);
  };
  ws.onopen = function () {
    //心跳檢測重置
    heartCheck.start();
  };
  ws.onmessage = function (event) {
    //拿到任何訊息都說明當前連線是正常的
    console.log('接收到訊息');
    heartCheck.start();
  }
}

3. 如上第二步，當網路斷開的時候，會先呼叫onerror，onclose事件可以監聽到，會呼叫reconnect方法進行重連操作。正常的情況下，是先呼叫
onopen方法的，當接收到資料時，會被onmessage事件監聽到。

4. 重連操作 reconnect程式碼如下：

var lockReconnect = false;//避免重複連線
function reconnect(url) {
  if(lockReconnect) {
    return;
  };
  lockReconnect = true;
  //沒連線上會一直重連，設定延遲避免請求過多
  tt && clearTimeout(tt);
  tt = setTimeout(function () {
    createWebSocket(url);
    lockReconnect = false;
  }, 4000);
}

如上程式碼，如果網路斷開的話，會執行reconnect方法，使用了一個定時器，4秒後會重新建立一個新的websocket連結，重新呼叫createWebSocket函式，
重新會執行及傳送資料給伺服器端。

5. 最後一步就是實現心跳檢測的程式碼：如下：

//心跳檢測
var heartCheck = {
  timeout: 3000,
  timeoutObj: null,
  serverTimeoutObj: null,
  start: function(){
    console.log('start');
    var self = this;
    this.timeoutObj && clearTimeout(this.timeoutObj);
    this.serverTimeoutObj && clearTimeout(this.serverTimeoutObj);
    this.timeoutObj = setTimeout(function(){
      //這裡傳送一個心跳，後端收到後，返回一個心跳訊息，
      //onmessage拿到返回的心跳就說明連線正常
      console.log('55555');
      ws.send("123456789");
      self.serverTimeoutObj = setTimeout(function() {
        console.log(111);
        console.log(ws);
        ws.close();
        // createWebSocket();
      }, self.timeout);

    }, this.timeout)
  }
}

實現心跳檢測的思路是：每隔一段固定的時間，向伺服器端傳送一個ping資料，如果在正常的情況下，伺服器會返回一個pong給客戶端，如果客戶端通過
onmessage事件能監聽到的話，說明請求正常，這裡我們使用了一個定時器，每隔3秒的情況下，如果是網路斷開的情況下，在指定的時間內伺服器端並沒有返回心跳響應訊息，因此伺服器端斷開了，因此這個時候我們使用ws.close關閉連線，在一段時間後(在不同的瀏覽器下，時間是不一樣的，firefox響應更快)，
可以通過 onclose事件監聽到。因此在onclose事件內，我們可以呼叫 reconnect事件進行重連操作。

相關文章