詳解JS 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   可以由應用使用.

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。即可解決問題。

以上就是詳解JS WebSocket斷開原因和心跳機制的詳細內容,更多關於JS WebSocket斷開原因和心跳機制的資料請關註WalkonNet其它相關文章!

推薦閱讀: