HTML5的WebSocket连接，针对断网情况的心跳重连

WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。
js代码如下：

//websocket连接
var websocket = null;
function websocketMsg() {
    //判断当前浏览器是否支持WebSocket
    if ('WebSocket' in window) {
        websocket = new WebSocket("ws://" + baseurl.substring(7) + "equsocket");  //具体的url
    } else {
        alert('Not support websocket')
    }
    //连接发生错误的回调方法
    websocket.onerror = function () {
        //websocketMsg(); 
        reconnect();
        setMessageInnerHTML("error");
    };
    //连接成功建立的回调方法
    websocket.onopen = function (event) {
        websocket.send(JSON.stringify({storeId:$("#door-room").find("option:selected").val()}));//发送数据
        setMessageInnerHTML("open");
    }
    //接收到消息的回调方法
    websocket.onmessage = function (event) {
        setMessageInnerHTML(event.data);
    }
    //连接关闭的回调方法
    websocket.onclose = function () {
        setMessageInnerHTML("close");
        reconnect(); //执行重连(前端断开websocket的心跳检测，会执行多次)
    }
    //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
    window.onbeforeunload = function () {
        websocket.close();
    }
}

//将消息显示在网页上
function setMessageInnerHTML(innerHTML) {
        var msgjson = JSON.parse(innerHTML);
        msgjson=JSON.parse(msgjson);
        console.log(msgjson);
 }
        

针对断网情况的心跳重连，只需要定时的发送消息，去触发websocket.send方法，如果网络断开了，浏览器便会触发onclose。

1. 前端心跳重连（前端发送心跳，后端需要返回心跳，也就是ping pong的过程会有两次数据传递）

//针对断网的情况的心跳重连
var heartCheck = {
    timeout: 20000,//20ms
    timeoutObj: null,
    reset: function( ){
        clearTimeout(this.timeoutObj);
　　this.start();
    },
    start: function( ){
      this.timeoutObj = setTimeout(function(){
            websocket.send("HeartBeat");  //自定义需要执行的命令
        }, this.timeout)
    }
};

 heartCheck.start();
 heartCheck.reset();
 //heartCheck 的 reset和start方法主要用来控制心跳的定时。执行心跳检测，看是不是断连了。

2、后端心跳重连（后端来发送心跳的话，就只需要发送ping，前端不需要回应。前端需要和后端约定好心跳间隔，比如后端设置10秒发送一次心跳，那前端就需要设置一个安全值，比如距离上次收到心跳超过12秒还没收到下一个心跳就重连。）

var heartCheck = {
    timeout: 20000,//20ms
    timeoutObj: null,
    serverTimeoutObj: null,
    reset: function(){
        clearTimeout(this.timeoutObj);
        clearTimeout(this.serverTimeoutObj);
　　    this.start();
    },
    start: function(){
        var self = this;
        this.timeoutObj = setTimeout(function(){
            websocket.send("HeartBeat");
            self.serverTimeoutObj = setTimeout(function(){
                websocket.close();//如果onclose会执行reconnect，我们执行websocket.close()就行了.如果直接执行reconnect 会触发onclose导致重连两次
            }, self.timeout)
        }, this.timeout)
    },
}