关于javascript:websocket心跳及重连机制

websocket 是前后端交互的长连贯，前后端也都可能因为一些状况导致连贯生效并且相互之间没有反馈揭示。因而为了保障连贯的可持续性和稳定性，websocket 心跳重连就应运而生。

在应用原生 websocket 的时候，如果设施网络断开，不会立即触发 websocket 的任何事件，前端也就无奈得悉以后连贯是否曾经断开。这个时候如果调用 websocket.send 办法，浏览器才会发现链接断开了，便会立即或者肯定短时间后（不同浏览器或者浏览器版本可能体现不同）触发 onclose 函数。

后端 websocket 服务也可能出现异常，造成连贯断开，这时前端也并没有收到断开告诉，因而须要前端定时发送心跳音讯 ping，后端收到 ping 类型的音讯，立马返回 pong 音讯，告知前端连贯失常。如果肯定工夫没收到 pong 音讯，就阐明连贯不失常，前端便会执行重连。

心跳机制是每隔一段时间会向服务器发送一个数据包，通知服务器本人还活着，同时客户端会确认服务器端是否还活着，如果还活着的话，就会回传一个数据包给客户端来确定服务器端也还活着，否则的话，有可能是网络断开连接了，须要重连。

当胜利建设连贯后，即启动心跳检测，大略的流程如下图：

export default {
    name: 'App',
    data () {
        return {
            isOpen:false,// 是否连贯
            pingIntervalSeconds:3000,// 心跳连接时间
            lockReconnect: false,// 是否真正建设连贯
            heartTimer: null,// 心跳定时器
            serverTimer: null,// 服务器超时 定时器
            reconnectTimer: null,// 断开 重连倒计时
            sendFixHeartTimer:null,//20s 固定发送心跳定时器
        }
    },
    created(){this.connect();
    },
    methods:{
        // ws 连贯
        connect(){ws.WebSocket('wss://ws.51vv.com/game','');
            // 监听连贯开启,
            ws.onopen(e => {
                // 开启心跳
                this.start();
                this.sendFixHeart();});
            ws.onmessage(e => {
                // 收到服务器信息，心跳重置, 上报
                this.reset();});
            ws.onerror(e => {
                // 重连
                this.reconnect();});
            ws.onclose(e => {
                // 重连
                this.reconnect();});
        },
        // 开启心跳
        start(){this.heartTimer && clearTimeout(this.heartTimer);
            this.serverTimer && clearTimeout(this.serverTimer);
            this.heartTimer = setTimeout(()=>{
                this.send({cmd:1100,});
                // 超时敞开，超时工夫为 5s
                this.serverTimer = setTimeout(()=>{ws.close();
                }, 5000);
            }, this.pingIntervalSeconds)
        },
        // 从新连贯  3000-5000 之间，设置提早防止申请过多
        reconnect(){
            // 设置 lockReconnect 变量防止反复连贯
            if(this.lockReconnect) return;
            this.lockReconnect = true;
            this.reconnectTimer && clearTimeout(this.reconnectTimer);
            this.reconnectTimer = setTimeout(()=> {this.connect();
                this.lockReconnect = false;
            }, parseInt(Math.random()*2000 + 3000));
        },
        // 重置心跳
        reset(){clearTimeout(this.heartTimer);
            clearTimeout(this.serverTimer);
            this.start();},
        // 20s 固定发送心跳
        sendFixHeart(){clearInterval(this.sendFixHeartTimer);
            this.sendFixHeartTimer = setInterval(()=>{
                this.send({cmd:1100,});
            }, 20000);
        }

    }
}

websocket 心跳及重连机制

心跳机制