WebSocket斷開原因、心跳機制防止自動斷開連接

1、斷開原因

WebSocket斷開的原因有很多，最好在WebSocket斷開時，將錯誤打印出來。

ws.onclose = function (e) { console.log('websocket 斷開: ' + e.code + ' ' + e.reason + ' ' + e.wasClean) console.log(e) }

錯誤狀態碼：

WebSocket斷開時，會觸發CloseEvent, CloseEvent會在連接關閉時發送給使用 WebSockets 的客戶端. 它在 WebSocket 對象的 onclose 事件監聽器中使用。CloseEvent的code字段表示了WebSocket斷開的原因。可以從該字段中分析斷開的原因。

CloseEvent有三個字段需要注意, 通過分析這三個字段，一般就可以找到斷開原因

• CloseEvent.code: code是錯誤碼，是整數類型
• CloseEvent.reason: reason是斷開原因，是字符串
• CloseEvent.wasClean: wasClean表示是否正常斷開，是布爾值。一般異常斷開時，該值為false

狀態碼	名稱	描述
0–999		保留段, 未使用.
1000	CLOSE_NORMAL	正常關閉; 無論為何目的而創建, 該鏈接都已成功完成任務.
1001	CLOSE_GOING_AWAY	終端離開, 可能因為服務端錯誤, 也可能因為瀏覽器正從打開連接的頁面跳轉離開.
1002	CLOSE_PROTOCOL_ERROR	由於協議錯誤而中斷連接.
1003	CLOSE_UNSUPPORTED	由於接收到不允許的數據類型而斷開連接 (如僅接收文本數據的終端接收到了二進制數據).
1004		保留. 其意義可能會在未來定義.
1005	CLOSE_NO_STATUS	保留. 表示沒有收到預期的狀態碼.
1006	CLOSE_ABNORMAL	保留. 用於期望收到狀態碼時連接非正常關閉 (也就是說, 沒有發送關閉幀).
1007	Unsupported Data	由於收到了格式不符的數據而斷開連接 (如文本消息中包含了非 UTF-8 數據).
1008	Policy Violation	由於收到不符合約定的數據而斷開連接. 這是一個通用狀態碼, 用於不適合使用 1003 和 1009 狀態碼的場景.
1009	CLOSE_TOO_LARGE	由於收到過大的數據幀而斷開連接.
1010	Missing Extension	客戶端期望服務器商定一個或多個拓展, 但服務器沒有處理, 因此客戶端斷開連接.
1011	Internal Error	客戶端由於遇到沒有預料的情況阻止其完成請求, 因此服務端斷開連接.
1012	Service Restart	服務器由於重啟而斷開連接.
1013	Try Again Later	服務器由於臨時原因斷開連接, 如服務器過載因此斷開一部分客戶端連接.
1014		由 WebSocket標准保留以便未來使用.
1015	TLS Handshake	保留. 表示連接由於無法完成 TLS 握手而關閉 (例如無法驗證服務器證書).
1016–1999		由 WebSocket標准保留以便未來使用.
2000–2999		由 WebSocket拓展保留使用.
3000–3999		可以由庫或框架使用.? 不應由應用使用. 可以在 IANA 注冊, 先到先得.
4000–4999		可以由應用使用.

廣州品牌設計公司https://www.houdianzi.com PPT模板下載大全https://redbox.wode007.com

2、加入心跳

var lockReconnect = false; //避免ws重復連接 var ws = null; // 判斷當前瀏覽器是否支持WebSocket var wsUrl = serverConfig.socketUrl; createWebSocket(wsUrl); //連接ws function createWebSocket(url) { try{ if('WebSocket' in window){ ws = new WebSocket(url); } initEventHandle(); }catch(e){ reconnect(url); console.log(e); } } function initEventHandle() { ws.onclose = function () { reconnect(wsUrl); console.log("llws連接關閉!"+new Date().toLocaleString()); }; ws.onerror = function () { reconnect(wsUrl); console.log("llws連接錯誤!"); }; ws.onopen = function () { heartCheck.reset().start(); //心跳檢測重置 console.log("llws連接成功!"+new Date().toLocaleString()); }; ws.onmessage = function (event) { //如果獲取到消息，心跳檢測重置 heartCheck.reset().start(); //拿到任何消息都說明當前連接是正常的 console.log("llws收到消息啦:" +event.data); if(event.data!='pong'){ let data = jsON.parse(event.data); } }; } // 監聽窗口關閉事件，當窗口關閉時，主動去關閉websocket連接，防止連接還沒斷開就關閉窗口，server端會拋異常。 window.onbeforeunload = function() { ws.close(); } function reconnect(url) { if(lockReconnect) return; lockReconnect = true; setTimeout(function () { //沒連接上會一直重連，設置延遲避免請求過多 createWebSocket(url); lockReconnect = false; }, 2000); } //心跳檢測 var heartCheck = { timeout: 1000, //1分鍾發一次心跳 timeoutObj: null, serverTimeoutObj: null, reset: function(){ clearTimeout(this.timeoutObj); clearTimeout(this.serverTimeoutObj); return this; }, start: function(){ var self = this; this.timeoutObj = setTimeout(function(){ //這里發送一個心跳，后端收到后，返回一個心跳消息， //onmessage拿到返回的心跳就說明連接正常 ws.send("ping"); console.log("ping!") self.serverTimeoutObj = setTimeout(function(){//如果超過一定時間還沒重置，說明后端主動斷開了 ws.close(); //如果onclose會執行reconnect，我們執行ws.close()就行了.如果直接執行reconnect 會觸發onclose導致重連兩次 }, self.timeout) }, this.timeout) } }

    // 收到客戶端消息后調用的方法 @OnMessage public void onMessage(String message, Session session) { if(message.equals("ping")){ }else{ 。。。。 } }

系統發現websocket每隔1分鍾自動斷開連接，搜了很多博客都說設置一下nginx的proxy_read_timeout，但是這個時間過長會影響服務器性能，采取心跳包的方式每隔1分鍾客戶端自動發送ping消息給服務端，服務端需要返回pong。即可解決問題。