websocket中的心跳重连机制目的：检测客户端和服务端是否处于正常连接的状态。
思路：
每隔一段指定的时间（定时器），向服务器发送一个数据，服务器收到数据后再发送给客户端，正常情况下客户端通过onmessage事件是能监听到服务器返回的数据，说明请求正常。如果在这个指定时间内，客户端没有收到服务器返回的响应消息，就判断连接断开了，使用websocket.close关闭连接。这个关闭连接的动作可以通过onclose事件监听到，因此在onclose事件内，我们可以调用reconnect事件进行重连操作。
//思路//1.每隔一段指定的时间（定时器），向服务器发送一个数据，服务器收到数据后再发送给客户//端，正常情况下客户端通过onmessage事件是能监听到服务器返回的数据，说明请求正常。//2.如果在这个指定时间内，客户端没有收到服务器返回的响应消息，就判断连接断开了，使用websocket.close关闭连接。//3.这个关闭连接的动作可以通过onclose事件监听到，因此在onclose事件内，我们可以调用reconnect事件进行重连操作。//关键词：//定时器、onmessage事件、onclose事件、reconnect事件let ws = null;// 判断当前浏览器是否支持WebSocketlet wsUrl = myurl;createWebsocket(wsUrl); //连接ws//2.1通过createWebsocket创建连接function createWebsocket(wsUrl) {try {//检查兼容性if('WebSocket' in window){ws = new WebSocket(wsUrl);}else if('MozWebSocket' in window){ws = new MozWebSocket(wsUrl);}else{layui.use(['layer'],function(){var layer = layui.layer;layer.alert("您的浏览器不支持websocket协议,建议使用新版谷歌、火狐等浏览器，请勿使用IE10以下浏览器，360浏览器请使用极速模式，不要使用兼容模式！"); });}init(); //初始化}catch(e){console.log('catch');reconnect(wsUrl);//重连}}//2.2创建init()方法，初始化一些监听事件，如果希望websocket连接一直保持，在close或者error上绑定重新连接方法function init() {ws.onclose = function (){console.log("连接关闭");reconnect(wsUrl);};ws.onerror = function (){console.log("出现异常");reconnect(wsUrl);};ws.open = function (){//心跳检测重置heartcheck.start();};ws.onmessage = function (){console.log("接受到消息");//接收到消息说明连接正常heartcheck.start();}}// 监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。window.onbeforeunload = function() {ws.close();}//2.3重连操作，通过设置lockReconnect变量避免重复连接let lockReconnect = false;function reconnect(wsUrl){if(lockReconnect){return;};lockReconnect = true;//没连接上会一直重连。设置延迟避免请求过多tt && clearTimeout(tt);tt = setTimeout(function(){createWebsocket(wsUrl);lockReconnect = false;},4000);}//2.4心跳检测let heartcheck = {timeout: 3000, //每隔三秒发送心跳serverTimeout: 5000, //服务器超时时间timeoutObj: null,serverTimeoutObj: null,start: function(){let _this = this;let _num = num;this.timeoutObj && clearTimeout(this.timeoutObj);this.serverTimeoutObj && clearTimeout(this.serverTimeout);this.timeoutObj = setTimeout(function (){//这里发送一个心跳，后台收到之后返回一个心跳信息//onmessage拿到返回的心跳说明来连接正常ws.send("123456789"); //心跳包//计算答复的超时时间_this.serverTimeoutObj = setTimeout(function (){ws.close(); //服务器超时关闭连接},_this.serverTimeout);},this.timeout);}}
TCP本身是有keepalive机制的为什么还要做应用层心跳？
client异常挂死，此时keepalive机制无法反馈真实的client状态；client 异常断电断网出现TCP假死keepalive并不能根本性解决问题，实际上互联网环境很不稳定；ws在应用层，基于传输层，在ws中操作TCP也很不方便。封装就意味着易用性提高灵活性降低。
如果觉得《websocket中的心跳重连机制》对你有帮助，请点赞、收藏，并留下你的观点哦！
