理解WebSocket心跳重连机制以及移动端锁屏或退到后台运行时重连机制

一 WebSocket 心跳重连机制

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

1. 为什么叫心跳包呢？
它就像心跳一样每隔固定的时间发一次，来告诉服务器，我还活着。

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

前台代码：

var websocket;

// 设置端口号
var serverPort = '8080';

// 设置路径
var url = '/platform-framework/api/osWebsocket';

// 获取IP地址
function getWebIP() {
    var curIP = window.location.hostname;
    return curIP;
}


function init(){

    //ws地址
    var wsuri = "ws://" + getWebIP() + ":" + serverPort + url;
    try {
        websocket = new WebSocket(wsuri);
    } catch (e) {
        console.log(' 您的浏览器暂时不支持 webSocket ');
    }

    websocket.onclose = function (e) {
        websocket.close();
        console.log("WebSocket 关闭");
    }
    
    websocket.onopen = function () {
        //心跳检测重置
    	heartCheck.start();
    }

    //连接发生错误的回调方法
    websocket.onerror = function () {
        websocket.close();
        console.log("WebSocket 连接发生错误");
    }

}

// 初始化
init();

/***
 *	webSocket 自动接收数据
 *  给外部预留接口，方便页面实时获取新内容
 *  传递方法（messageCallback）进来，给方法赋返回值（websocket接收到的数据）
 */
function onMessage(messageCallback) { 
    websocket.onmessage = function (e) {
        if (typeof(messageCallback) === 'function') {
            messageCallback(JSON.parse(e.data));
        }
        // 心跳检测重置