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

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

1. 為什麼叫心跳包呢？

它就像心跳一樣每隔固定的時間發一次，來告訴伺服器，我還活著。

2. 心跳機制是？

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

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

具體的思路如下：

1. 第一步頁面初始化，先呼叫createwebsocket函式，目的是建立乙個websocket的方法：new websocket(wsurl);因此封裝成函式內如下**：

function createwebsocket()  catch(e) 
}

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

function init() ;
ws.onerror = function() ;
ws.onopen = function () ;
ws.onmessage = function (event) 
}

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

onopen方法的，當接收到資料時，會被onmessage事件監聽到。

4. 重連操作 reconnect**如下：

var lockreconnect = false;//避免重複連線
function reconnect(url) ;
lockreconnect = true;
//沒連線上會一直重連，設定延遲避免請求過多
tt && cleartimeout(tt);
tt = settimeout(function () , 4000);
}

如上**，如果網路斷開的話，會執行reconnect方法，使用了乙個定時器，4秒後會重新建立乙個新的websocket鏈結，重新呼叫createwebsocket函式，

重新會執行及傳送資料給伺服器端。

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

//心跳檢測
var heartcheck = , self.timeout);
}, this.timeout)
}}

實現心跳檢測的思路是：每隔一段固定的時間，向伺服器端傳送乙個ping資料，如果在正常的情況下，伺服器會返回乙個pong給客戶端，如果客戶端通過

onmessage事件能監聽到的話，說明請求正常，這裡我們使用了乙個定時器，每隔3秒的情況下，如果是網路斷開的情況下，在指定的時間內伺服器端並沒有返回心跳響應訊息，因此伺服器端斷開了，因此這個時候我們使用ws.close關閉連線，在一段時間後(在不同的瀏覽器下，時間是不一樣的，firefox響應更快)，

可以通過 onclose事件監聽到。因此在onclose事件內，我們可以呼叫 reconnect事件進行重連操作。

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

理解WebSocket心跳及重連機制

理解WebSocket心跳及重連機制

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

相關推薦