初探和實現websocket心跳重連

心跳重連緣由

在使用websocket過程中，可能會出現網路斷開的情況，比如訊號不好，或者網路臨時性關閉，這時候websocket的連線已經斷開，

而瀏覽器不會執行websocket 的 onclose方法，我們無法知道是否斷開連線，也就無法進行重連操作。

如果當前傳送websocket資料到後端，一旦請求超時，onclose便會執行，這時候便可進行繫結好的重連操作。

因此websocket心跳重連就應運而生。

如何實現

在websocket例項化的時候，我們會繫結一些事件：


var ws = new websocket(url);
ws.onclose = function () ;
ws.onerror = function () ;
ws.onopen = function () ;
ws.onmessage = function (event)

如果希望websocket連線一直保持，我們會在close或者error上繫結重新連線方法。


ws.onclose = function () ;
ws.onerror = function () ;

這樣一般正常情況下失去連線時，觸發onclose方法，我們就能執行重連了。

那麼針對斷網的情況的心跳重連，怎麼實現呢。

簡單的實現：


var heartcheck = ,
start: function(), this.timeout)}}
ws.onopen = function () ;
ws.onmessage = function (event)

如上**，heartcheck 的 reset和start方法主要用來控制心跳的定時。

什麼條件下執行心跳：

當onopen也就是連線上時，我們便開始start計時，如果在定時時間範圍內，onmessage獲取到了後端的訊息，我們就重置倒計時，距離上次從後端獲取到訊息超過60秒之後，執行心跳檢測，看是不是斷連了，這個檢測時間可以自己根據自身情況設定。

判斷前端ws斷開(斷網但不限於斷網的情況）：

當心跳檢測send方法執行之後，如果當前websocket是斷開狀態(或者說斷網了)，傳送超時之後，瀏覽器的ws會自動觸發onclose方法，重連也執行了（onclose方法體繫結了重連事件），如果當前一直是斷網狀態，重連會2秒（時間是自己**設定的）執行一次直到網路正常後連線成功。

如此一來，我們判斷前端主動斷開ws的心跳檢測就實現了。為什麼說是前端主動斷開，因為當前這種情況主要是通過前端ws的事件來判斷的，後面說後端主動斷開的情況。

我本想測試websocket超時時間，又發現了一些新的問題

[list]

[*]在chrome中，如果心跳檢測也就是websocket例項執行send之後，15秒內沒傳送到另一接收端，onclose便會執行。那麼超時時間是15秒。

[*]我又開啟了firefox ，firefox在斷網7秒之後，直接執行onclose。說明在firefox中不需要心跳檢測便能自動onclose。

[*]同一**， reconnect方法在chrome 執行了一次，firefox執行了兩次。當然我們在幾處地方（**邏輯處和websocket事件處）繫結了reconnect()

[/list]

所以保險起見，我們還是給reconnect()方法加上乙個鎖，保證只執行一次

目前來看不同的瀏覽器，有不同的機制，無論瀏覽器websocket自身會不會在斷網情況下執行onclose，加上心跳重連後，已經能保證onclose的正常觸發。

判斷後端斷開：

如果後端因為一些情況斷開了ws，是可控情況下的話，會下發乙個斷連的訊息通知，之後才會斷開，我們便會重連。

如果因為一些異常斷開了連線，我們是不會感應到的，所以如果我們傳送了心跳一定時間之後，後端既沒有返回心跳響應訊息，前端又沒有收到任何其他訊息的話，我們就能斷定後端主動斷開了。

一點特別重要的傳送心跳到後端，後端收到訊息之後必須返回訊息，否則超過60秒之後會判定後端主動斷開了。再改造下**:


var heartcheck = ,
start: function(), self.timeout)
}, this.timeout)},}
ws.onopen = function () ;
ws.onmessage = function (event) 
ws.onclose = function () ;
ws.onerror = function () ;

因為目前我們這種方式會一直重連如果沒連線上或者斷連的話，如果有兩個裝置同時登陸並且會踢另一端下線，一定要傳送乙個踢下線的訊息型別，這邊接收到這種型別的訊息，邏輯判斷後就不再執行reconnect，否則會出現乙隻相互擠下線的死迴圈。

初探和實現websocket心跳重連

初探和實現websocket心跳重連

初探和實現websocket心跳重連

WebSocket 和 Golang 實現聊天功能

相關推薦