1、斷開原因

WebSocket斷開的原因有很多，最好在WebSocket斷開時(shí)，將錯(cuò)誤打印出來。

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

錯(cuò)誤狀態(tài)碼：

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

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

CloseEvent.code: code是錯(cuò)誤碼，是整數(shù)類型

CloseEvent.reason: reason是斷開原因，是字符串

CloseEvent.wasClean: wasClean表示是否正常斷開，是布爾值。一般異常斷開時(shí)，該值為false

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

var lockReconnect = false; //避免ws重復(fù)連接var ws = null; // 判斷當(dāng)前瀏覽器是否支持WebSocketvar wsUrl = serverConfig.socketUrl;createWebSocket(wsUrl); //連接wsfunction 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連接關(guān)閉!'+new Date().toLocaleString()); }; ws.onerror = function () {reconnect(wsUrl);console.log('llws連接錯(cuò)誤!'); }; ws.onopen = function () {heartCheck.reset().start(); //心跳檢測重置console.log('llws連接成功!'+new Date().toLocaleString()); }; ws.onmessage = function (event) { //如果獲取到消息，心跳檢測重置heartCheck.reset().start(); //拿到任何消息都說明當(dāng)前連接是正常的console.log('llws收到消息啦:' +event.data);if(event.data!=’pong’){ let data = jsON.parse(event.data);} };}// 監(jiān)聽窗口關(guān)閉事件，當(dāng)窗口關(guān)閉時(shí)，主動(dòng)去關(guān)閉websocket連接，防止連接還沒斷開就關(guān)閉窗口，server端會(huì)拋異常。window.onbeforeunload = function() { ws.close();} function reconnect(url) { if(lockReconnect) return; lockReconnect = true; setTimeout(function () { //沒連接上會(huì)一直重連，設(shè)置延遲避免請求過多createWebSocket(url);lockReconnect = false; }, 2000);}//心跳檢測var heartCheck = { timeout: 1000,//1分鐘發(fā)一次心跳 timeoutObj: null, serverTimeoutObj: null, reset: function(){clearTimeout(this.timeoutObj);clearTimeout(this.serverTimeoutObj);return this; }, start: function(){var self = this;this.timeoutObj = setTimeout(function(){ //這里發(fā)送一個(gè)心跳，后端收到后，返回一個(gè)心跳消息， //onmessage拿到返回的心跳就說明連接正常 ws.send('ping'); console.log('ping!') self.serverTimeoutObj = setTimeout(function(){//如果超過一定時(shí)間還沒重置，說明后端主動(dòng)斷開了ws.close(); //如果onclose會(huì)執(zhí)行reconnect，我們執(zhí)行ws.close()就行了.如果直接執(zhí)行reconnect 會(huì)觸發(fā)onclose導(dǎo)致重連兩次 }, self.timeout)}, this.timeout) }} // 收到客戶端消息后調(diào)用的方法 @OnMessage public void onMessage(String message, Session session) { if(message.equals('ping')){}else{。。。。} }

系統(tǒng)發(fā)現(xiàn)websocket每隔1分鐘自動(dòng)斷開連接，搜了很多博客都說設(shè)置一下nginx的proxy_read_timeout，但是這個(gè)時(shí)間過長會(huì)影響服務(wù)器性能，采取心跳包的方式每隔1分鐘客戶端自動(dòng)發(fā)送ping消息給服務(wù)端，服務(wù)端需要返回pong。即可解決問題。

以上就是詳解JS WebSocket斷開原因和心跳機(jī)制的詳細(xì)內(nèi)容，更多關(guān)于JS WebSocket斷開原因和心跳機(jī)制的資料請關(guān)注好吧啦網(wǎng)其它相關(guān)文章！