WebSocket的心跳检测和重连和Spring的整合

最近搞好论文，对其中的WebSocket中相对比较实用的技术做一个总结，这个东西之前是用来作前后台的监控数据的实时通信，主要记录一下心跳包和重连的过程，websocket中的心跳这里是通过客户端定义一个定时器实现，主要代码如下：

//心跳检测,每20s心跳一次
var heartCheck = {
    timeout: 20000,
    timeoutObj: null,
    serverTimeoutObj: null,
    reset: function(){
        clearTimeout(this.timeoutObj);
        clearTimeout(this.serverTimeoutObj);
        return this;
    },
    start: function(){
        var self = this;
        this.timeoutObj = setTimeout(function(){
            //这里发送一个心跳，后端收到后，返回一个心跳消息，
            //onmessage拿到返回的心跳就说明连接正常
            ws.send("HeartBeat" + new Date().format("yyyy-MM-dd hh:mm:ss"));
            console.info("客户端发送心跳：" + new Date().format("yyyy-MM-dd hh:mm:ss"));
            self.serverTimeoutObj = setTimeout(function(){//如果超过一定时间还没重置，说明后端主动断开了
                ws.close();//如果onclose会执行reconnect，我们执行ws.close()就行了.如果直接执行reconnect 会触发onclose导致重连两次
            }, self.timeout)
        }, this.timeout)
    }
}

服务器在接受到心跳信息时必须给予它回应，不然客户端会默认两者断开进行重连的行为，后台的回应代码如下：

session.sendMessage(new TextMessage("服务器的心跳回应-HeartBeat" + sdf.format(new Date())));

每次客户端接受到后台心跳回应时或者推送的数据就需要将定时器重置计数，主要代码如下：

    ws.onopen = function () {
        //心跳检测重置
        heartCheck.reset().start();
    };
    ws.onmessage = function (event) {
        console.info(event.data);

        //如果获取到消息，心跳检测重置
        heartCheck.reset().start();
    }

Spring的配置文件正常写就可以了（一定要将webSocket的配置文件和握手文件交给Spring来管理，所以在组件扫描的时候需要将上述两个文件所在的基类包加入到扫描路径下），最终的效果如下所示：


上述的是服务器每隔30s推送一次数据，前端每隔20s心跳一次，如果传输异常或者在下次心跳前没有接受到心跳回应，就会进行重连，这里是将服务器停止作断开测试，然后再启动即可，主要完整的Demo见：https://github.com/Jacksonary/CodeRepository/tree/df56122c141e29eb048b5200d6cfe4fe0a96dd2e/websocket
在线演示案例：WebSocket在线演示案例，打开控制台查看即可，

我没有作单例处理，所以如果有人访问过了，会出现连续新服务器的推送情况，把Demo搞下来本地跑即可，多客户端的案例需要自行处理一下