WebSocket心跳检测和重连机制

1. 心跳重连原由

心跳和重连的目的用一句话概括就是客户端和服务端保证彼此还活着，避免丢包发生。

websocket连接断开有以下两证情况：

前端断开

在使用websocket过程中，可能会出现网络断开的情况，比如信号不好，或者网络临时关闭，这时候websocket的连接已经断开，而不同浏览器有不同的机制，触发onclose的时机也不同，并不会理想执行websocket的onclose方法，我们无法知道是否断开连接，也就无法进行重连操作。

后端断开

如果后端因为一些情况需要断开ws，在可控情况下，会下发一个断连的消息通知，之后才会断开，我们便会重连。
如果因为一些异常断开了连接，我们是不会感应到的，所以如果我们发送了心跳一定时间之后，后端既没有返回心跳响应消息，前端又没有收到任何其他消息的话，我们就能断定后端主动断开了。

因此需要一种机制来检测客户端和服务端是否处于正常连接的状态。通过在指定时间间隔发送心跳包来保证连接正常，如果连接出现问题，就需要手动触发onclose事件，这时候便可进行重连操作。因此websocket心跳重连就应运而生。

2. 心跳重连的简单实现

2.1 通过createWebSocket创建连接

1 2 3 4 5 6 7 8 9

function createWebSocket() {   try {     ws = new WebSocket(wsUrl);     init();   } catch(e) {     console.log('catch');     reconnect(wsUrl);   } }

2.2 创建init方法，初始化一些监听事件，如果希望websocket连接一直保持