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

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

    }
}