websocket心跳機制

一、何爲websocket心跳機制？

  websockt心跳機制，不得不說很形象；那何爲心跳機制，就是表明client與server的連接是否還在的檢測機制；

  如果不存在檢測，那麼網絡突然斷開，造成的後果就是client、server可能還在傻乎乎的發送無用的消息，浪費了資源；

  怎樣檢測呢？原理就是定時向server發送消息，如果接收到server的響應就表明連接依舊存在；

二、代碼邏輯

        //serverUrl
        let socketUrl = 'ws://127.0.0.1:3000';
        //保存websocket對象
        let socket;
        // reConnect函數節流標識符
        let flag = true;
        //心跳機制
        let heart = {
            timeOut:3000,
            timeObj = null,
            serverTimeObj = null,
            start:function(){
                console.log('start');
                let self = this;
                //清除延時器
                this.timeObj && clearTimeout(this.timeObj);
                this.serverTimeObj && clearTimeout(this.serverTimeObj);
                this.timeObj = setTimeout(function(){
                    socket.send('兄弟，你還好嗎?');//發送消息，服務端返回信息，即表示連接良好，可以在socket的onmessage事件重置心跳機制函數
                    //定義一個延時器等待服務器響應，若超時，則關閉連接，重新請求server建立socket連接
                    self.serverTimeObj=setTimeout(function(){
                        socket.close();
                        reConnect(socketUrl);
                    },self.timeOut)
                },this.timeOut)
            }
        }
        //建立websocket連接函數
        function createWebsocket(url) {
            try {
                socket = new WebSocket(url);
                init();
            } catch (e) {
                //進行重連;
                console.log('websocket連接錯誤');
                reConnect(socketUrl);
            }
        }
        //對WebSocket各種事件進行監聽   
        function init() {
            socket.onopen = function () {
                //連接已經打開
                //重置心跳機制
                heart.start();
            }
            socket.onmessage = function (event) {
                //通過event.data獲取server發送的信息
                //對數據進行操作
                console.log(event.data);
                //收到消息表示連接正常，所以重置心跳機制
                heart.start();
            }
            socket.onerror = function () {
                //報錯+重連
                console.log('socket連接出錯');
                reConnect(socketUrl);
            }
            socket.onclose = function () {
                console.log('socket連接關閉');
            }
        }
 
        //重連函數
        //因爲重連函數會被socket事件頻繁觸發，所以通過函數節流限制重連請求發送
        function reConnect(url) {
            if (!flag) {
                return;
            }
            flag = false;
            setTimeout(function () {
                createWebsocket(url);
                flag = true;
            }, 3000)
        }