WebSocket之心跳重连机制
之前，接到公司的一个斗地主小游戏的bug修改需求，需要在弱网环境和网络暂时断开的情况下，需要有一个稳定的重连机制，保证在网络不稳定的时候，客户端和服务端能够重连，继续通信。
所以自己就去搜看了一些网上的文档，就看到了“心跳机制”，因为这个项目有个AI模式（机器人陪玩）中通信方式就是用的websocket，关于什么是websocket，大家可以百度（https://www.runoob.com/html/html5-websocket.html）先行了解一下。
何为“心跳”，即客户端和服务端约定一个特定的心跳消息用于检测链路是否通信正常。这个“心跳”是在约定的时间间隔发出，接收方如果在这个时间内没有给予回应，发出方收不到回应，则执行重连。
# 思路
在实例化websocket后，定义好各个回调事件需要执行的函数
在弱网环境下，发送消息无法抵达接收端；或是，断网到浏览器约定时限等一些异常情况都会触发onclose和onerror，所以理论上，我们只要在onclose和onerror时，重新创建连接就可以。
# 实现
根据上面的思路，代码如下：
稍微抽取再丰富下，createWebSocket来创建websocket实例，initEventHandle来绑定各回调函数：
# 优化
弱网、断网所导致重连都是被动的，而在一般的websocket连接中都是存在心跳机制的，客户端和服务端约定一个特定的心跳消息用于检测链路是否通信正常。
我们通过心跳机制，在客户端来检测链路的正常，在约定时间间隔内收不到心跳或者其他任何通信消息时，客户端进行主动重连。
所以下面优化的，我们需要加一个心跳检测的方法：
心跳检测对象，定义了
timeout: 心跳超时时间
timeoutObj: 定时器变量
reset：重置心跳
start: 开启心跳
当连接成功时，开启心跳；在收到消息时，重置心跳并开启下一轮检测，所以我们只需要在onopen和onmessage中加入心跳检测就行
# 同时触发多次重连的问题
在实际使用过程中，发现有些浏览器，reconnect重连会多次触发，所以需要给重连加一把锁，当一个重连正在执行时，无法再触发一次重连。
参考：http://www.javashuo.com/article/p-uozmkkds-bx.html
你的打赏是我们不断耕耘的动力，如果帮助到你了，还希望不吝打赏，谢谢！（有问题可留言）