websocket中的心跳重連機制目的:檢測客戶端和服務端是否處於正常連線的狀態。
思路:每隔一段指定的時間(定時器),向伺服器傳送乙個資料,伺服器收到資料後再傳送給客戶端,正常情況下客戶端通過onmessage事件是能監聽到伺服器返回的資料,說明請求正常。
如果在這個指定時間內,客戶端沒有收到伺服器返回的響應訊息,就判斷連線斷開了,使用websocket.close關閉連線。
這個關閉連線的動作可以通過onclose事件監聽到,因此在onclose事件內,我們可以呼叫reconnect事件進行重連操作。
//思路
//1.每隔一段指定的時間(定時器),向伺服器傳送乙個資料,伺服器收到資料後再傳送給客戶
//端,正常情況下客戶端通過onmessage事件是能監聽到伺服器返回的資料,說明請求正常。
//2.如果在這個指定時間內,客戶端沒有收到伺服器返回的響應訊息,就判斷連線斷開了,使用websocket.close關閉連線。
//3.這個關閉連線的動作可以通過onclose事件監聽到,因此在onclose事件內,我們可以呼叫reconnect事件進行重連操作。
//定時器、onmessage事件、onclose事件、reconnect事件
let ws =
null
;// 判斷當前瀏覽器是否支援websocket
let wsurl = myurl;
createwebsocket
(wsurl)
;//連線ws
通過createwebsocket建立連線
function
createwebsocket
(wsurl)
elseif(
'mozwebsocket'
in window)
else);
}init()
;//初始化
}catch
(e)}
建立init()方法,初始化一些監聽事件,如果希望websocket連線一直保持,在close或者error上繫結重新連線方法
function
init()
; ws.
onerror
=function()
; ws.
open
=function()
; ws.
onmessage
=function()
}// 監聽視窗關閉事件,當視窗關閉時,主動去關閉websocket連線,防止連線還沒斷開就關閉視窗,server端會拋異常。
window.
onbeforeunload
=function()
重連操作,通過設定lockreconnect變數避免重複連線
let lockreconnect =
false
;function
reconnect
(wsurl)
; lockreconnect =
true
;//沒連線上會一直重連。設定延遲避免請求過多
tt &&
cleartimeout
(tt)
; tt =
settimeout
(function()
,4000);
}心跳檢測
let heartcheck =
,_this.servertimeout);}
,this
.timeout);}
}
tcp本身是有keepalive機制的為什麼還要做應用層心跳?
client異常掛死,此時keepalive機制無法反饋真實的client狀態;
client 異常斷電斷網出現tcp假死keepalive並不能根本性解決問題,實際上網際網路環境很不穩定;
ws在應用層,基於傳輸層,在ws中操作tcp也很不方便。封裝就意味著易用性提高靈活性降低。
Websocket心跳重連
websocket心跳重連 最近的工作業務上有用到關於websocket的相關知識,本來打算用socket.io去完成,但是最後還是採用了自帶的websocket的方式完成需求 this.websocket.binarytype arraybuffer 現在想象一下有這麼乙個場景,如果網路狀態不佳,...
websocket 心跳重連
websocket是什麼 websocket作用是來做訊息的實時推送 websocket的基本事件有onopen onmessage onerror onclose這四個事件,onopen是連線已開啟,且可以通訊,onmessage是收到訊息,onerror是websocket發生錯誤,onclos...
websocket心跳重連機制
1 心跳重連的原因 心跳和重連的目的用一句話概括就是客戶端和服務端保證彼此還活著,避免丟包發生。websocket斷開有兩種情況 前端斷開 在使用websocket過程中,可能會出現網路斷開的情況,比如訊號不好,或者網路臨時關閉,這時候websocket的連線已經斷開,而不同瀏覽器有不同的機制,觸發...