WebSocket心跳检测和重连机制
2020-02-06 11:17
459 查看
1. 心跳重连原由
心跳和重连的目的用一句话概括就是客户端和服务端保证彼此还活着,避免丢包发生。
websocket连接断开有以下两证情况:
前端断开
在使用
websocket过程中,可能会出现网络断开的情况,比如信号不好,或者网络临时关闭,这时候websocket的连接已经断开,而不同浏览器有不同的机制,触发
onclose的时机也不同,并不会理想执行
websocket的
onclose方法,我们无法知道是否断开连接,也就无法进行重连操作。
后端断开
如果后端因为一些情况需要断开ws,在可控情况下,会下发一个断连的消息通知,之后才会断开,我们便会重连。
如果因为一些异常断开了连接,我们是不会感应到的,所以如果我们发送了心跳一定时间之后,后端既没有返回心跳响应消息,前端又没有收到任何其他消息的话,我们就能断定后端主动断开了。
因此需要一种机制来检测客户端和服务端是否处于正常连接的状态。通过在指定时间间隔发送心跳包来保证连接正常,如果连接出现问题,就需要手动触发
onclose事件,这时候便可进行重连操作。因此
websocket心跳重连就应运而生。
2. 心跳重连的简单实现
2.1 通过createWebSocket创建连接
function createWebSocket() { try { ws = new WebSocket(wsUrl); 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.onopen = function () { //心跳检测重置 heartCheck.start(); }; ws.onmessage = function (event) { console.log('接收到消息'); //拿到任何消息都说明当前连接是正常的 heartCheck.start(); } }
2.3 重连操作,通过设置
lockReconnect变量避免重复连接
var lockReconnect = false;//避免重复连接 function reconnect(url) { if(lockReconnect) { return; }; lockReconnect = true; //没连接上会一直重连,设置延迟避免请求过多 tt && clearTimeout(tt); tt = setTimeout(function () { createWebSocket(url); lockReconnect = false; }, 4000); }
2.4 心跳检测
//心跳检测 var heartCheck = { timeout: 3000, //每隔三秒发送心跳 severTimeout: 5000, //服务端超时时间 timeoutObj: null, serverTimeoutObj: null, start: function(){ var _this = this; this.timeoutObj && clearTimeout(this.timeoutObj); this.serverTimeoutObj && clearTimeout(this.serverTimeoutObj); this.timeoutObj = setTimeout(function(){ //这里发送一个心跳,后端收到后,返回一个心跳消息, //onmessage拿到返回的心跳就说明连接正常 ws.send("123456789"); // 心跳包 //计算答复的超时时间 _this.serverTimeoutObj = setTimeout(function() { ws.close(); }, _this.severTimeout); }, this.timeout) } }
有的时候,客户端发送3次心跳包服务端均未回复才判定为失去连接,所以这时需要加上计数来判断。
//心跳检测 var heartCheck = { timeout: 3000, //每隔三秒发送心跳 num: 3, //3次心跳均未响应重连 timeoutObj: null, serverTimeoutObj: null, start: function(){ var _this = this; var _num = this.num; this.timeoutObj && clearTimeout(this.timeoutObj); this.serverTimeoutObj && clearTimeout(this.serverTimeoutObj); this.timeoutObj = setTimeout(function(){ //这里发送一个心跳,后端收到后,返回一个心跳消息, //onmessage拿到返回的心跳就说明连接正常 ws.send("123456789"); // 心跳包 _num--; //计算答复的超时次数 if(_num === 0) { ws.colse(); } }, this.timeout) } }
最后总结下
我们确认了后端单台服务器的处理能力有限,因此。我们需要做集群。其次我们为了不让前端关闭或回收,后端不响应。我们需要设置心跳,定时清除无关的连接。
最后,我们需要有消息确认机制,做到保证消息的100%接收。
转载于:https://www.cnblogs.com/buxiugangzi/p/11379883.html
- 点赞 1
- 收藏
- 分享
- 文章举报
相关文章推荐
- WebSocket的心跳检测和重连和Spring的整合
- 分布式系统的心跳检测机制优化
- 【简记】前端对接WebSocket与心跳重连
- 161114、websocket实现心跳重连
- socket心跳检测和重连小demo
- websocket-heartbeat-js心跳检测库正式发布
- 浅析 Netty 实现心跳机制与断线重连
- Netty学习篇④-心跳机制及断线重连
- Netty 4.0 实现心跳检测和断线重连
- 一起学Netty(十四)之 Netty生产级的心跳和重连机制
- 嵌入式 hi3518平台以太网网络模块设计包括重连机制和网线检测机制
- Netty4.X学习(二)Netty经典心跳与重连机制(生产级)及注意事项
- 一起学Netty(十四)之 Netty生产级的心跳和重连机制
- 初探和实现websocket心跳重连
- 微信小程序实现WebSocket心跳重连
- 一起学Netty(十四)之 Netty生产级的心跳和重连机制
- 详解微信小程序实现WebSocket心跳重连
- Netty 之 Netty生产级的心跳和重连机制
- Websocket 断线重连及心跳问题解决方案
- Netty 4.0 实现心跳检测和断线重连