websocket心跳链接代码_WebSocket原理与实践(五)--心跳及重连机制
在使用websocket的过程中,有时候会遇到网络断开的情况,但是在网络断开的时候服务器端并没有触发onclose的事件。这样会有:服务器会继续向客户端发送多余的链接,并且这些数据还会丢失。所以就需要一种机制来检测客户端和服务端是否处于正常的链接状态。因此就有了websocket的心跳了。还有心跳,说明还活着,没有心跳说明已经挂掉了。
1. 为什么叫心跳包呢?
它就像心跳一样每隔固定的时间发一次,来告诉服务器,我还活着。
2. 心跳机制是?
心跳机制是每隔一段时间会向服务器发送一个数据包,告诉服务器自己还活着,同时客户端会确认服务器端是否还活着,如果还活着的话,就会回传一个数据包给客户端来确定服务器端也还活着,否则的话,有可能是网络断开连接了。需要重连~
那么需要怎么去实现它呢?如下所有代码:
WebSocket Demo
//var ws = new WebSocket("wss://echo.websocket.org");
/*ws.onerror = function(e) {
console.log('已关闭');
};
ws.onopen = function(e) {
console.log('握手成功');
ws.send('123456789');
}
ws.onclose = function() {
console.log('已关闭');
}
ws.onmessage = function(e) {
console.log('收到消息');
console.log(e);
}*/
var lockReconnect = false;//避免重复连接
var wsUrl = "wss://echo.websocket.org";varws;vartt;functioncreateWebSocket() {try{
ws= newWebSocket(wsUrl);
init();
}catch(e) {
console.log('catch');
reconnect(wsUrl);
}
}functioninit() {
ws.onclose= function() {
console.log('链接关闭');
reconnect(wsUrl);
};
ws.οnerrοr= function() {
console.log('发生异常了');
reconnect(wsUrl);
};
ws.onopen= function() {//心跳检测重置
heartCheck.start();
};
ws.onmessage= function(event) {
//拿到任何消息都说明当前连接是正常的
console.log('接收到消息');
heartCheck.start();
}
}functionreconnect(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(){//这里发送一个心跳,后端收到后,返回一个心跳消息,
console.log('55555');
ws.send("123456789");
self.serverTimeoutObj= setTimeout(function() {
console.log(111);
console.log(ws);
ws.close();//createWebSocket();
}, self.timeout);
},this.timeout)
}
}
createWebSocket(wsUrl);
具体的思路如下:
1. 第一步页面初始化,先调用createWebSocket函数,目的是创建一个websocket的方法:new WebSocket(wsUrl);因此封装成函数内如下代码:
functioncreateWebSocket() {try{
ws= newWebSocket(wsUrl);
init();
}catch(e) {
console.log('catch');
reconnect(wsUrl);
}
}
2. 第二步调用init方法,该方法内把一些监听事件封装如下:
functioninit() {
ws.onclose= function() {
console.log('链接关闭');
reconnect(wsUrl);
};
ws.οnerrοr= function() {
console.log('发生异常了');
reconnect(wsUrl);
};
ws.onopen= function() {//心跳检测重置
heartCheck.start();
};
ws.onmessage= function(event) {
//拿到任何消息都说明当前连接是正常的
console.log('接收到消息');
heartCheck.start();
}
}
3. 如上第二步,当网络断开的时候,会先调用onerror,onclose事件可以监听到,会调用reconnect方法进行重连操作。正常的情况下,是先调用
onopen方法的,当接收到数据时,会被onmessage事件监听到。
4. 重连操作 reconnect代码如下:
var lockReconnect = false;//避免重复连接
functionreconnect(url) {if(lockReconnect) {return;
};
lockReconnect= true;//没连接上会一直重连,设置延迟避免请求过多
tt &&clearTimeout(tt);
tt= setTimeout(function() {
createWebSocket(url);
lockReconnect= false;
},4000);
}
如上代码,如果网络断开的话,会执行reconnect方法,使用了一个定时器,4秒后会重新创建一个新的websocket链接,重新调用createWebSocket函数,
重新会执行及发送数据给服务器端。
5. 最后一步就是实现心跳检测的代码:如下:
//心跳检测
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)
}
}
实现心跳检测的思路是:每隔一段固定的时间,向服务器端发送一个ping数据,如果在正常的情况下,服务器会返回一个pong给客户端,如果客户端通过
onmessage事件能监听到的话,说明请求正常,这里我们使用了一个定时器,每隔3秒的情况下,如果是网络断开的情况下,在指定的时间内服务器端并没有返回心跳响应消息,因此服务器端断开了,因此这个时候我们使用ws.close关闭连接,在一段时间后(在不同的浏览器下,时间是不一样的,firefox响应更快),
可以通过 onclose事件监听到。因此在onclose事件内,我们可以调用 reconnect事件进行重连操作。
websocket心跳链接代码_WebSocket原理与实践(五)--心跳及重连机制相关推荐
- websocket心跳链接代码_websocket心跳的实现(包括全部代码)
本文主要讲的是如果设计websocket心跳已经需要考虑哪些问题. 前言 在使用websocket的过程中,有时候会遇到客户端网络关闭的情况,而这时候在服务端并没有触发onclose事件.这样会: 多 ...
- websocket心跳链接代码_Hyperf+RabbitMQ+WebSocket实现大屏幕消息推送
作者:八重樱 来源:www.cnblogs.com/a609251438/p/12713467.html 介绍 基于 Hyperf+ WebSocket +RabbitMQ 实现的一个简单大屏幕的消息 ...
- java类加载机制为什么双亲委派_[五]类加载机制双亲委派机制 底层代码实现原理 源码分析 java类加载双亲委派机制是如何实现的...
Launcher启动类 本文是双亲委派机制的源码分析部分,类加载机制中的双亲委派模型对于jvm的稳定运行是非常重要的不过源码其实比较简单,接下来简单介绍一下我们先从启动类说起有一个Launcher类 ...
- 【入门学习二】基于 FPGA 使用 Verilog 实现蜂鸣器响动的代码及原理讲解
目录 一.知识了解 二.模块设计 三.程序实现 四.管脚配置及结果展示 五.写给小白看的 上一篇博文:[入门学习一]基于 FPGA 使用 Verilog 实现按键点灯代码及原理讲解 功能描述:通过前面 ...
- 《数字图像处理原理与实践(MATLAB版)》一书之代码Part3
本文系<数字图像处理原理与实践(MATLAB版)>一书之代码系列的Part3,辑录该书第135至第184页之代码,供有需要读者下载研究使用.代码执行结果请参见原书配图. --------- ...
- 【密码学Sage代码】椭圆曲线加密/解密(基于《密码编码学与网络安全——原理与实践(第七版)》)
[密码学Sage代码]椭圆曲线加密/解密(基于<密码编码学与网络安全--原理与实践(第七版)>) 教材内容: 实践的Sage代码: #[静水流深Sage代码]使用椭圆曲线密码体制进行加密/ ...
- 【通知】《生成对抗网络GAN原理与实践》代码开源,勘误汇总!
有三上个月出版了新书<生成对抗网络GAN:原理与实践>,Generative Adversarial Networks(中文名生成对抗网络,简称GAN)自从被提出来后,其发展就非常迅猛,几 ...
- 分布式开放消息系统(RocketMQ)的原理与实践
分布式消息系统作为实现分布式系统可扩展.可伸缩性的关键组件,需要具有高吞吐量.高可用等特点.而谈到消息系统的设计,就回避不了两个问题: 消息的顺序问题 消息的重复问题 RocketMQ作为阿里开源的一 ...
- 解密“达达-京东到家”的订单即时派发技术原理和实践
本文由达达京东到家Java工程师季炳坤原创分享. 1.前言 达达-京东到家作为优秀的即时配送物流平台,实现了多渠道的订单配送,包括外卖平台的餐饮订单.新零售的生鲜订单.知名商户的优质订单等.为了提升平 ...
最新文章
- asp.net MVC2 Jquery
- Linux服务器安全之用户密钥认证登录(基于CentOS 7.0系统)
- 如何在tomcat下应用部署日志_教妹子用IDEA创建web应用,部署到Tomcat服务器
- ViewPager通过自定义适配器MyPagerAdapter实现界面导航(上标题)
- 保持 SSH 连接,防止长时间未动作断线
- 十六进制转十进制_跟运维组学Python之秒懂十六进制
- Ubuntu 20.04美化及QQ、微信、ssh客户端安装
- c语言误差椭圆,平差计算
- 无法加载JIT编译器问题解决
- winscp是什么软件_避免使用绿色版破解版和不更新的FTP软件
- 笔试——字符串算法题——寻找最大回文子串
- POJ - 1733 带权并查集 模运算 利用map进行离散化 题目没看全导致疯狂WA
- 【博学谷学习记录】超强总结,用心分享 | 人工智能常用数据可视化库 matplotlib 入门(1)
- QT编译时查找不到GL /usr/bin/ld cannot find -lGL
- 记阿里巴巴的一次面试,教你怎样应对到来的“金三银四
- Java导出excel文件以.xlsx后缀结尾,可设置部分单元格只读
- 100集华为HCIE安全培训视频教材整理 | Agile Controller终端安全管理特性(三)
- Win10 任务栏使用小图标
- 计算机用户身份识别,计算机用户身份识别装置及使用方法与流程
- 学习笔记20220513