WebSocket的心跳重连机制

WebSocket心跳及重连机制

在使用websocket的过程中，有时候会遇到网络断开的情况，但是在网络断开的时候服务器端并没有触发onclose的事件。这样会有：服务器会继续向客户端发送多余的链接，并且这些数据还会丢失。所以就需要一种机制来检测客户端和服务端是否处于正常的链接状态。因此就有了websocket的心跳了。还有心跳，说明还活着，没有心跳说明已经挂掉了。

1.为什么叫心跳包呢
它就像心跳一样每隔固定的时间发一次，来告诉服务器，我还活着。
2.心跳机制
心跳机制是每隔一段时间会向服务器发送一个数据包，告诉服务器自己还活着，同时客户端会确认服务器端是否还活着，如果还活着的话，就会回传一个数据包给客户端来确定服务器端也还活着，否则的话，有可能是网络断开连接了。需要重连~
3.如何实现心跳机制
Websocket的前后端交互
首先实现并且理解这篇文章之后，那就很简单了，我们只需要将js部分稍微重写一下

$(function () {
    createWebSocket();
});

//避免重复连接
var lockReconnect = false;
var wsUrl = "ws://localhost:8888/websocket/name";
var websocket = null;
var tt = null;
function createWebSocket() {
    try {
        websocket = new WebSocket(wsUrl);
        init();
    } catch(e) {
        console.log('catch');
        reconnect(wsUrl);
    }
}

function init() {

    //连接发生错误的回调方法
    websocket.onerror = function(){
        console.log("socket连接失败");
        //重连
        reconnect(wsUrl);
    };

    //连接成功建立的回调方法
    websocket.onopen = function(event){
        console.log("socket连接已打开");
        //心跳检测重置
        heartCheck.start();
    };

    //接收到消息的回调方法
    websocket.onmessage = function(event){
        console.log("后台接收到前台传送的值，还有心跳...");
        //心跳检测重置
        heartCheck.start();
        setMessageInnerHTML(event.data);
    };

    //连接关闭的回调方法
    websocket.onclose = function(){
        console.log("socket连接已关闭");
        //重连
        reconnect(wsUrl);
    };

    //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
    window.onbeforeunload = function(){
        websocket.close();
    };
}


//重连函数
function reconnect(url) {
    if(lockReconnect) {
        return;
    };
    lockReconnect = true;
    //没连接上会一直重连，设置延迟避免请求过多
    tt && clearTimeout(tt);
    tt = setTimeout(function () {
        createWebSocket(url);
        lockReconnect = false;
    }, 20000);
}


//心跳检测
var heartCheck = {
    //每隔几秒测试一下心跳是否在继续
    timeout: 10000,
    timeoutObj: null,
    serverTimeoutObj: null,
    start: function(){
        console.log('开始测试心跳');
        var self = this;
        this.timeoutObj && clearTimeout(this.timeoutObj);
        this.serverTimeoutObj && clearTimeout(this.serverTimeoutObj);
        this.timeoutObj = setTimeout(function(){
            //这里发送一个心跳，后端收到后，返回一个心跳消息，
            console.log('发送消息，测试后台是否运行中...');
            //任意发一个消息过去，后台接收，在init()中的onmessage收到消息，说明后台没有挂掉，有心跳
            websocket.send("666");
            self.serverTimeoutObj = setTimeout(function() {
                console.log("后台挂掉，没有心跳了....");
                console.log("打印websocket的地址:"+websocket);
                websocket.close();
                // createWebSocket();
            }, self.timeout);

        }, this.timeout)
    }
};


//关闭连接
function closeWebSocket(){
    websocket.close();
}

//发送消息
function send(){
    var message = document.getElementById('text').value;
    websocket.send(message);
}

4.实现的效果
当我们实现心跳重连之后，不管是我们断网还是程序停止之后，前端都会每隔一段时间向后端发起请求，只要程序重新打开或者重新联网，项目都会重新开始运行！

项目学习:理解WebSocket心跳及重连机制