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. Codeforces Round #495 (Div. 2) C. Sonya and Robots

    http://codeforces.com/contest/1004/problem/C 题意: 在一行上有n个数字,现在在最左边和最右边各放置一个机器人,左右机器人各有一个数字p和q.现在这两个机器 ...

  2. 从实验室走向世界:HSP90抑制剂,一种新的癌症药物

    热休克蛋白90(HSP90)是细胞内一种普遍存在的.十分保守的以及有高度活性的蛋白质,它在肿瘤细胞内的含量要比正常细胞多.作为一种分子伴侣,HSP90协助不同种类的癌蛋白(即HSP90的服务蛋白)进行 ...

  3. 【Mac】【环境变量】

    Mac配置环境变量的地方  1./etc/profile   (建议不修改这个文件 )  全局(公有)配置,不管是哪个用户,登录时都会读取该文件.    2./etc/bashrc    (一般在这个 ...

  4. 【BZOJ】 4810: [Ynoi2017]由乃的玉米田

    题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=4810 思路还是比较显然,第一反应应该就是莫队. 考虑怎么维护三个询问,想到了要维护每一个数 ...

  5. mongodb+nodejs

    不能只看mongodb官网文档https://docs.mongodb.com/manual/reference/method/db.collection.findOne/,都是同步接口 要看node ...

  6. (19)ThreadPoolExecutor线程池

    # 线程池 # 实例化线程池 ThreadPoolExcutor (推荐cpu_count*(n+1)) # 异步提交任务 submit / map # 阻塞直到任务完成 shutdown # 获取子 ...

  7. ubuntu 关闭 笔记本键盘背景灯

    /etc/rc.local 加入 ' > /sys/class/leds/tpacpi::kbd_backlight/brightness

  8. [数据结构]P1.3 栈 Stack

    * 注: 本文/本系列谢绝转载,如有转载,本人有权利追究相应责任. 栈是一种先进后出的结构(FILO),常见的操作有:push 入栈.pop删除栈顶元素并返回.peek 查看栈顶元素 与其他线性结构一 ...

  9. GSEA - Gene set enrichment analysis 基因集富集 | ORA - Over-Representation Analysis 分析原理与应用

    RNA-seq是利器,大部分做实验的老板手下都有大量转录组数据,所以RNA-seq的分析需求应该是很大的(大部分的生信从业人员应该都差不多要沾边吧). 普通的转录组套路并不多,差异表达基因.富集分析. ...

  10. 『Python CoolBook』C扩展库_其四_结构体操作与Capsule

    点击进入项目 一.Python生成C语言结构体 C语言中的结构体传给Python时会被封装为胶囊(Capsule), 我们想要一个如下结构体进行运算,则需要Python传入x.y两个浮点数, type ...