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

廣州品牌設計公司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。即可解決問題。