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)
        }