前言
为了获取实时数据，前端需要和后端保持通信，HTTP 协议只能是客户端向服务器发出请求，服务器返回查询结果。这种单向请求的特点，注定了如果服务器有连续的状态变化，客户端要获知就非常麻烦。我们只能使用"轮询"：每隔一段时候，就发出一个询问，了解服务器有没有新的信息。
webSoket心跳及重连机制
websocket是前后端交互的长连接，在使用的过程中，遇到弱网或者网络暂时断连的情况时，服务端并没有触发onclose的事件，客户端也无法得知当前连接是否已经断开，服务端会继续向客户端发送多余链接，并且这些数据还会丢失。因此为了保证连接的可持续性和稳定性，我们需要有一套机制来检测客户端和服务端是否处于正常连接状态，websocket心跳重连就应运而生。
基本使用（详见websoketAPI官网The WebSocket API (WebSockets) - Web APIs | MDN (mozilla.org)）
onopen（）
实例对象的onopen属性，用于指定连接成功后的回调函数。
ws.onopen = function () {
ws.send('Hello Server!');
}
如果要指定多个回调函数，可以使用addEventListener方法
ws.addEventListener('open', function (event) {ws.send('Hello Server!');});
webSoket.readyState方法
readyState属性返回实例对象的当前状态，共有四种。
CONNECTING：值为0，表示正在连接。
OPEN：值为1，表示连接成功，可以通信了。
CLOSING：值为2，表示连接正在关闭。
CLOSED：值为3，表示连接已经关闭，或者打开连接失败。
onerror方法
实例对象的onerror属性，用于指定报错时的回调函数。
onclose方法
实例对象的onclose属性，用于指定连接关闭后的回调函数。
onmessage方法
webSoket.send()
实例对象的send()方法用于向服务器发送数据。
webSoket.bufferedAmount
实例对象的bufferedAmount属性，表示还有多少字节的二进制数据没有发送出去。它可以用来判断发送是否结束。
整体代码
具体步骤
一、第一步页面初始化，先调用createWebSocket函数，目的是创建一个websocket的方法：new WebSocket(wsUrl)
function createWebSocket() {
try {
ws = new WebSocket(wsUrl);
init();
} catch(e) {
console.log('catch');
reconnect(wsUrl);
}
}
二、第二步调用init方法，该方法内把一些监听事件封装如下： 当网络断开的时候，会先调用onerror，onclose事件可以监听到，会调用reconnect方法进行重连操作。正常的情况下，是先调用onopen方法的，当接收到数据时，会被onmessage事件监听到。
function init() {
ws.onclose = function () {
console.log('链接关闭');
reconnect(wsUrl);
};
ws.onerror = function() {
console.log('发生异常了');
reconnect(wsUrl);
};
ws.onopen = function () {
//心跳检测重置
heartCheck.start();
};
ws.onmessage = function (event) {
//拿到任何消息都说明当前连接是正常的
console.log('接收到消息');
heartCheck.start();
}
}
三、重连操作 reconnect代码如下： 如果网络断开的话，会执行reconnect方法，使用了一个定时器，4秒后会重新创建一个新的websocket链接，重新调用createWebSocket函数，重新会执行及发送数据给服务器端。
var lockReconnect = false;//避免重复连接
function reconnect(url) {
if(lockReconnect) {
return;
};
lockReconnect = true;
//没连接上会一直重连，设置延迟避免请求过多
tt && clearTimeout(tt);
tt = setTimeout(function () {
createWebSocket(url);
lockReconnect = false;
}, 4000);
}
四、心跳检测
//心跳检测
var heartCheck = {
timeout: 3000,
timeoutObj: null,
serverTimeoutObj: null,
start: function(){
console.log('start');
var self = this;
this.timeoutObj && clearTimeout(this.timeoutObj);
this.serverTimeoutObj && clearTimeout(this.serverTimeoutObj);
this.timeoutObj = setTimeout(function(){
//这里发送一个心跳，后端收到后，返回一个心跳消息，
//onmessage拿到返回的心跳就说明连接正常
console.log('55555');
ws.send("123456789");
self.serverTimeoutObj = setTimeout(function() {
console.log(111);
console.log(ws);
ws.close();
// createWebSocket();
}, self.timeout);
}, this.timeout)
}
}