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 心跳重连的更多相关文章

  1. 初探和实现websocket心跳重连

    心跳重连缘由 在使用websocket过程中,可能会出现网络断开的情况,比如信号不好,或者网络临时性关闭,这时候websocket的连接已经断开, 而浏览器不会执行websocket 的 onclos ...

  2. 初探和实现websocket心跳重连(npm: websocket-heartbeat-js)

    提示:文章最下方有仓库地址 心跳重连缘由 websocket是前后端交互的长连接,前后端也都可能因为一些情况导致连接失效并且相互之间没有反馈提醒.因此为了保证连接的可持续性和稳定性,websocket ...

  3. websocket心跳重连 websocket-heartbeat-js

    初探和实现websocket心跳重连(npm: websocket-heartbeat-js) 心跳重连缘由 websocket是前后端交互的长连接,前后端也都可能因为一些情况导致连接失效并且相互之间 ...

  4. 161114、websocket实现心跳重连

    心跳重连缘由 在使用websocket过程中,可能会出现网络断开的情况,比如信号不好,或者网络临时性关闭,这时候websocket的连接已经断开, 而浏览器不会执行websocket 的 onclos ...

  5. WebSocket心跳检测和重连机制

    1. 心跳重连原由 心跳和重连的目的用一句话概括就是客户端和服务端保证彼此还活着,避免丢包发生. websocket连接断开有以下两证情况: 前端断开 在使用websocket过程中,可能会出现网络断 ...

  6. 理解WebSocket心跳及重连机制(五)

    理解WebSocket心跳及重连机制 在使用websocket的过程中,有时候会遇到网络断开的情况,但是在网络断开的时候服务器端并没有触发onclose的事件.这样会有:服务器会继续向客户端发送多余的 ...

  7. 【简记】前端对接WebSocket与心跳重连

    前言 最近又在忙着开发别的模块,其中包含了即时通讯这一块,上一次做即时通讯时还是去年年底,一时间代码都在自己的笔记本里,还没带--这里就记录一下前端对接WebSocket的实现,包含心跳重连,简记之. ...

  8. 小程序websocket心跳库——websocket-heartbeat-miniprogram

    前言 在16年的时候因为项目接触到websocket,而后对心跳重连做了一次总结,写了篇博客,而后18年对之前github上的demo代码进行了再次开发和开源,最终封装成库.如下: 博客:https: ...

  9. ws & websocket & 掉线重连

    ws & websocket & 掉线重连 reconnecting websocket https://github.com/joewalnes/reconnecting-webso ...

随机推荐

  1. mac git 删除本地仓库文件

    递归清除本地文件夹下的Git文件,如果想重新建立仓库,那么在重新初始化新建的git仓库 //删除文件夹下的所有 .git 文件 find . -name ".git" | xarg ...

  2. scp免密操作

    scp免密操作 2.1服务器(本机)从目标服务器上传/下载文件或者文件夹 2.2生成秘钥 本机执行:ssh-keygen -t rsa 遇到提示,直接回车就OK,秘钥生成在用户的根目录的.ssh目录下 ...

  3. Spark面试相关

    Spark Core面试篇01 随着Spark技术在企业中应用越来越广泛,Spark成为大数据开发必须掌握的技能.前期分享了很多关于Spark的学习视频和文章,为了进一步巩固和掌握Spark,在原有s ...

  4. 开机自动启动WEB服务,共享目录。

    最近工作中,需要共享一个目录,每次重启总要手动执行一下  nohup python -m SimpleHTTPServer 8000这个命令,想着实现让它开机自动启动,就一劳永逸了. 手动步骤如下: ...

  5. 图论++【洛谷p1744】特价采购商品&&【一本通1342】最短路径问题

    (虽然题面不是很一样,但是其实是一个题qwq) [传送门] 算法标签: 利用Floyed的o(n3)算法: (讲白了就是暴算qwq) 从任意一条单边路径开始.所有两点之间的距离是边的权,或者无穷大,如 ...

  6. 『TensorFlow』函数查询列表_张量属性调整

    数据类型转换Casting 操作 描述 tf.string_to_number(string_tensor, out_type=None, name=None) 字符串转为数字 tf.to_doubl ...

  7. MongoDB一键安装(定制端口)

    #!/bin/bash export lang=Cexport my_port=27019echo '#1.关闭本地的MongoDB'#service mongodb stopecho '#2.清空本 ...

  8. c++中的c_str()用法

    语法: const char *c_str(); c_str()函数返回一个指向正规C字符串的指针, 内容与本string串相同. 这是为了与c语言兼容,在c语言中没有string类型,故必须通过st ...

  9. poj 3254Corn Fields (入门状压dp)

    Farmer John has purchased a lush ≤ M ≤ ; ≤ N ≤ ) square parcels. He wants to grow some yummy corn fo ...

  10. linux下read命令详解

    要与Linux交互,脚本获取键盘输入的结果是必不可少的,read可以读取键盘输入的字符. read [-rs] [-a ARRAY] [-d delim] [-n nchars] [-N nchars ...