文档章节

WebSocket心跳检测和重连机制

o
 osc_g8254g7s
发布于 2019/08/19 21:37
字数 929
阅读 12
收藏 0

精选30+云产品,助力企业轻松上云!>>>

1. 心跳重连原由

心跳和重连的目的用一句话概括就是客户端和服务端保证彼此还活着,避免丢包发生。

websocket连接断开有以下两证情况:

前端断开

在使用websocket过程中,可能会出现网络断开的情况,比如信号不好,或者网络临时关闭,这时候websocket的连接已经断开,而不同浏览器有不同的机制,触发onclose的时机也不同,并不会理想执行websocketonclose方法,我们无法知道是否断开连接,也就无法进行重连操作。

后端断开

如果后端因为一些情况需要断开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%接收。

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
WebSocket心跳检测和重连机制

为什么会进行心跳检测 简单地说是为了证明客户端和服务器还活着。websocket 在使用过程中,如果遭遇网络问题等,这个时候服务端没有触发事件,这样会产生多余的连接,并且服务端会继续发送消...

七弦桐
2019/11/16
442
1
初探和实现websocket心跳重连

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

osc_67he7idx
2018/12/09
35
0
websocket-heartbeat-js心跳检测库正式发布

前言: 两年前写了一篇websocket心跳的博客——初探和实现websocket心跳重连。 阅读量一直比较大,加上最近考虑写一个自己的npm包,因此就完成了一个websocket心跳的检测库。在这里先感谢几个...

osc_wme0cmft
2018/10/15
2
0
websocket-heartbeat-js心跳检测库正式发布

前言: 两年前写了一篇websocket心跳的博客——初探和实现websocket心跳重连。 阅读量一直比较大,加上最近考虑写一个自己的npm包,因此就完成了一个websocket心跳的检测库。在这里先感谢几个...

2018/10/15
0
0
理解WebSocket心跳及重连机制(五)

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

osc_flp5mhtj
2018/03/26
9
0

没有更多内容

加载失败,请刷新页面

加载更多

LINUX_VERSION_CODE与KERNEL_VERSION

由于Linux版本的在不断更新,当设备驱动去兼容不同版本的内核时,需要知道当前使用的内核源码版本,以此来调用对应版本的内核API,这两个宏定义在文件 /usr/include/linux/version.h#defin...

osc_5g68egoj
18分钟前
16
0
JVM09-类加载过程

这一篇我们来学习一下JVM中的类加载过程。说到类的加载过程,我们需要先了解一下JVM中类的生命周期。在JVM中类的生命周期有七个阶段。分别是: 加载(Loading):加载是通过类加载器从不同的...

osc_zai0dt9q
19分钟前
17
0
###豪豪豪豪######2020 推荐系统技术演进趋势了解

读知乎文章《推荐系统技术演进趋势:从召回到排序再到重排》笔记: 《推荐系统技术演进趋势:从召回到排序再到重排》这篇文章主要说了下最近两年,推荐系统技术的一些比较明显的技术发展趋势...

osc_lhmderwy
20分钟前
9
0
SpringBoot入门实现RESTFUL API以及用Postman测试

Model @Data@Builderpublic class Article { private Long id; private String author; private String title; private String content; private Date createTime;}......

osc_7ludm6s2
21分钟前
4
0
Leetcode 83 删除排序链表中的重复元素-链表双指针

维护两个指针,第一个指针指向链表没有重复元素的最后一个位置,第二个指针向后扫描,直到末尾。严格来说,在C++中需要手动释放内存。但在算法题或者Java中不需要这么做。 class Solution {...

osc_n1x6m26g
22分钟前
12
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部