websocket 心跳重连
websocket 的基本使用: var ws = new WebSocket(url);
ws.onclose = function () {
//something
reconnect(); // 自定义的 websocket 重连方法
};
ws.onerror = function () {
//something
reconnect(); // 自定义的 websocket 重连方法
}; ws.onopen = function () {
//something
};
ws.onmessage = function (event) {
//something
} 想要 websocket 一直保持连接,我们在 onclose 和 onerror 方法中执行重连方法。
但是当信号不好,网络临时断开时,websocket 连接断开而不会执行 onclose 方法,这时我们就无法重连 websocket 了。
所以需要针对断网情况使用心跳重连的方式。
var heartCheck = {
timeout: 60000,//60s
timer: null,
reset: function(){ // 终止 start 的 setTimerout,不让 ws.send() 执行,然后重新执行 start
clearTimeout(this.timer);
this.start();
},
start: function(){
this.timer= setTimeout(function(){
ws.send("HeartBeat"); // send 方法执行,如果是断网状态,则会自动触发 onclose 方法,实现重连。重连方法中会执行 start 方法,再次开始心跳检测,所以这里使用的 setTimeout 而不是 setInterval
}, this.timeout)
}
}
ws.onopen = function () {
heartCheck.start(); // onopen 的时候执行 start 开始心跳检测
};
ws.onmessage = function (event) { // 接收到后端的消息执行 reset
heartCheck.reset();
}
websocket 心跳重连的更多相关文章
- 初探和实现websocket心跳重连
心跳重连缘由 在使用websocket过程中,可能会出现网络断开的情况,比如信号不好,或者网络临时性关闭,这时候websocket的连接已经断开, 而浏览器不会执行websocket 的 onclos ...
- 初探和实现websocket心跳重连(npm: websocket-heartbeat-js)
提示:文章最下方有仓库地址 心跳重连缘由 websocket是前后端交互的长连接,前后端也都可能因为一些情况导致连接失效并且相互之间没有反馈提醒.因此为了保证连接的可持续性和稳定性,websocket ...
- websocket心跳重连 websocket-heartbeat-js
初探和实现websocket心跳重连(npm: websocket-heartbeat-js) 心跳重连缘由 websocket是前后端交互的长连接,前后端也都可能因为一些情况导致连接失效并且相互之间 ...
- 161114、websocket实现心跳重连
心跳重连缘由 在使用websocket过程中,可能会出现网络断开的情况,比如信号不好,或者网络临时性关闭,这时候websocket的连接已经断开, 而浏览器不会执行websocket 的 onclos ...
- WebSocket心跳检测和重连机制
1. 心跳重连原由 心跳和重连的目的用一句话概括就是客户端和服务端保证彼此还活着,避免丢包发生. websocket连接断开有以下两证情况: 前端断开 在使用websocket过程中,可能会出现网络断 ...
- 理解WebSocket心跳及重连机制(五)
理解WebSocket心跳及重连机制 在使用websocket的过程中,有时候会遇到网络断开的情况,但是在网络断开的时候服务器端并没有触发onclose的事件.这样会有:服务器会继续向客户端发送多余的 ...
- 【简记】前端对接WebSocket与心跳重连
前言 最近又在忙着开发别的模块,其中包含了即时通讯这一块,上一次做即时通讯时还是去年年底,一时间代码都在自己的笔记本里,还没带--这里就记录一下前端对接WebSocket的实现,包含心跳重连,简记之. ...
- 小程序websocket心跳库——websocket-heartbeat-miniprogram
前言 在16年的时候因为项目接触到websocket,而后对心跳重连做了一次总结,写了篇博客,而后18年对之前github上的demo代码进行了再次开发和开源,最终封装成库.如下: 博客:https: ...
- ws & websocket & 掉线重连
ws & websocket & 掉线重连 reconnecting websocket https://github.com/joewalnes/reconnecting-webso ...
随机推荐
- Docker部署Bytom全节点钱包
微服务和容器目前比较流行,相信很多小伙伴都比较熟悉docker, 如果你不是太了解,可以查看文档docker学习手册.那如何用docker搭建比原链(Bytom)的节点呢? 在操作之前,请自行安装do ...
- malloc/free 和 new/delete
(本文参考于网上) 首先两者都可用于申请动态内存和释放内存。 对于非内部数据类型的对象而言,只用malloc/free无法满足动态对象的要求.对象在创建的同时要自动执行构造函数,对象在消亡之前要自动执 ...
- MapReduce编程:词频统计
首先在项目的src文件中需要加入以下文件,log4j的内容为: log4j.rootLogger=INFO, stdout log4j.appender.stdout=org.apache.log4j ...
- Linux之文件目录
一.Linux的目录结构 1.概览 2.树状目录结构 说明: /root:该目录为系统管理员用户主目录 /bin:即Binary,存放着系统必备执行命令 /boot:这里存放的是启动Linux时使用的 ...
- robot framework测试数据语法
Robot Framework通过文件的扩展名来选择使用何种解析器. 扩展名不分大小写. 可以识别的扩展名包括: HTML: .html, .htm 和 .xhtml TSV: .tsv 纯文本: . ...
- IdentityServer4服务器配置
Session认证和JWT(Json Web Token) Token认证就是基于JWT 1.Session认证 1. 用户输入其登录信息 2. 服务器验证信息是否正确,并创建一个session,然后 ...
- PHP中buffer的认知
buffer其实就是缓冲区,一个内存地址空间,只要用于存储数据区域. <?php echo 1; 运行这段代码,浏览器会显示1,其实中间会经历一个buffer(数据1先到buffer,当buff ...
- 数组和List以指定的方式拼接成字符串类型
/// <summary> /// list转换成格式的字符串 /// </summary> /// <param name="param">拼 ...
- CRM INBOX 结果增强功能
前段时间接到的需求:INBOX(ICCMP_INBOX)查询结果,多选后弹出选择用户的框,选择用户,带入到单据的PARTNER FUNC的工程师中,并修改单据状态. 其实标准的INBOX的Compon ...
- RobotFramework--环境安装1
1.RobotFramework RobotFramework 的架构是一个通用型的验收测试和验收测试驱动开发的自动化测试框架(ATDD).它 具有易于使用的表格来组织测试过程和测试数据. 3.1版本 ...