理解WebSocket心跳及重连机制以及加强版的reconnectingwebsocket.js实现

最新推荐文章于 2024-06-28 15:05:41 发布

秦岭熊猫

最新推荐文章于 2024-06-28 15:05:41 发布

阅读量5.7k

点赞数 4

分类专栏： Java

本文链接：https://blog.csdn.net/tianshan2010/article/details/106314649

版权

本文介绍了WebSocket的心跳机制及其重要性，详细解析了心跳检测的实现过程，包括定期发送ping数据和等待服务器的pong响应。在网络断开时，通过onerror和onclose事件触发重连操作。此外，分享了一种加强版的reconnectingwebsocket.js实现，用于自动管理和恢复WebSocket连接。

摘要由CSDN通过智能技术生成

理解WebSocket心跳及重连机制

在使用websocket的过程中，有时候会遇到网络断开的情况，但是在网络断开的时候服务器端并没有触发onclose的事件。这样会有：服务器会继续向客户端发送多余的链接，并且这些数据还会丢失。所以就需要一种机制来检测客户端和服务端是否处于正常的链接状态。因此就有了websocket的心跳了。还有心跳，说明还活着，没有心跳说明已经挂掉了。

1. 为什么叫心跳包呢？
它就像心跳一样每隔固定的时间发一次，来告诉服务器，我还活着。

2. 心跳机制是？
心跳机制是每隔一段时间会向服务器发送一个数据包，告诉服务器自己还活着，同时客户端会确认服务器端是否还活着，如果还活着的话，就会回传一个数据包给客户端来确定服务器端也还活着，否则的话，有可能是网络断开连接了。需要重连~

那么需要怎么去实现它呢？如下所有代码：

<html>
<head>
  <meta charset="utf-8">
  <title>WebSocket heartcheck</title>
</head>
<body>
  <script type="text/javascript">
            
    var lockReconnect = false;//避免重复连接
    var wsUrl = "ws://localhost:8080/heartcheck";
    var ws;
    var tt;
    function createWebSocket() {
      try {
        ws = new WebSocket(wsUrl);
        init();
      } catch(e) {
        console.log('catch');
        reconnect(wsUrl);
      }
    }
    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();
      }
    }
    function reconnect(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(){
          //这里发送一个心跳，后端收到后，返回一个心跳消息，
          ws.send("Client HeartBeat Test Message.");
          self.serverTimeoutObj = setTimeout(function() {
            console.log(111);
            console.log(ws);
            ws.close();
            // createWebSocket();
          }, self.timeout);

        }, this.timeout)
      }
    }
    createWebSocket(wsUrl);
  </script>
</body>
</html>

具体的思路如下：
1. 第一步页面初始化，先调用createWebSocket函数，目的是创建一个websocket的方法：new WebSocket(wsUrl);因此封装成函数内如下代码：

function createWebSocket() {
  try {
    ws = new WebSocket(wsUrl);
    init();
  } catch(e) {
    console.log('catch');
    reconnect(wsUrl);
  }
}

2. 第二步调用init方法，该方法内把一些监听事件封装如下：

function init() {
  ws.onclose = function () {
    console.log('链接关闭');
    reconnect(wsUrl);
  };
  ws.onerror = function() {
    console.log('发生异常了');
    reconnect(wsUrl);
  };
  ws.onopen =

最低0.47元/天解锁文章

秦岭熊猫

关注

4
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
理解WebSocket心跳及重连机制以及加强版的reconnectingwebsocket.js实现

理解WebSocket心跳及重连机制在使用websocket的过程中，有时候会遇到网络断开的情况，但是在网络断开的时候服务器端并没有触发onclose的事件。这样会有：服务器会继续向客户端发送多余的链接，并且这些数据还会丢失。所以就需要一种机制来检测客户端和服务端是否处于正常的链接状态。因此就有了websocket的心跳了。还有心跳，说明还活着，没有心跳说明已经挂掉了。1. 为什么叫心跳包呢？它就像心跳一样每隔固定的时间发一次，来告诉服务器，我还活着。2. 心跳机制是？心跳机制是每隔..
复制链接

扫一扫

专栏目录