前端對websocket心跳重連的處理

$(function() {
    var lockReconnect = false;//避免重複連接
    var ws = null; //WebSocket的引用
    var wsUrl = "xxxxxx"; //這個要與後端提供的相同
    //創建WebSocket連接,如果不確定瀏覽器是否支持，可以使用socket.js做連接
    function createWebSocket(url){
         try {
             if ('WebSocket' in window) {
                ws = new WebSocket("ws://" + url + "/socketServer");
             } else {
                ws = new SockJS("http://" + url + "/sockjs/socketServer");
             }
             initEventHandle();
         } catch (e) {
             reconnect(wsUrl);
         }
    }
    
    function reconnect(url) {
        if(lockReconnect) return;
        lockReconnect = true;
        //沒連接上會一直重連，設置延遲避免請求過多
        setTimeout(function () {
            createWebSocket(wsUrl);
            console.log("正在重連，當前時間"+new Date())
            lockReconnect = false;
        }, 5000); //這裏設置重連間隔(ms)
    }
    
     /*********************初始化開始**********************/
    function initEventHandle() {
        // 連接成功建立後響應
        ws.onopen = function() {
            console.log("成功連接到" + wsUrl);
            //心跳檢測重置
            heartCheck.reset().start();
        }
        // 收到服務器消息後響應
        ws.onmessage = function(e) {
            //如果獲取到消息，心跳檢測重置
            //拿到任何消息都說明當前連接是正常的
            heartCheck.reset().start();
            //Json轉換成Object
            var msg = eval('(' + e.data + ')');
            
            if(msg.message == "heartBeat"){
                //忽略心跳的信息，因爲只要有消息進來，斷線重連就會重置不會觸發
            }else{
                //處理消息的業務邏輯
            }
        }

        // 連接關閉後響應
        ws.onclose = function() {
            console.log("關閉連接");
            reconnect(wsUrl);//重連
        }
        ws.onerror = function () {
            reconnect(wsUrl);//重連
        };
    } 
    /***************初始化結束***********************/
     //心跳檢測
    var heartCheck = {
        timeout: 15000,//毫秒
        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("HeartBeat");
                console.log("HeartBeat");
                self.serverTimeoutObj = setTimeout(function(){//如果超過一定時間還沒重置，說明後端主動斷開了
                    ws.close();//如果onclose會執行reconnect，我們執行ws.close()就行了.如果直接執行reconnect 會觸發onclose導致重連兩次
                }, self.timeout)
            }, this.timeout)
        }
    }

// 發送字符串消息

    $("#sendBtn").click(function() {
        if (ws.readyState ==1) {
            //自定義消息串，讓後端接收
            ws.send("xxxxxx");
        }else{
            alert("當前連接超時，請刷新重試!");
        }
        return false;
    });

    // 強制退出
    window.onunload = function() {
        ws.close();
    }
    createWebSocket(wsUrl);/**啓動連接**/
});