websocket的心跳机制

一、WebSocket心跳机制

前端实现WebSocket心跳机制的方式主要有两种:

  1. 使用setInterval定时发送心跳包。
  2. 在前端监听到WebSocket的onclose()事件时,重新创建WebSocket连接。

第一种方式会对服务器造成很大的压力,因为即使WebSocket连接正常,也要定时发送心跳包,从而消耗服务器资源。第二种方式虽然减轻了服务器的负担,但是在重连时可能会丢失一些数据。

二、WebSocket心跳包机制

WebSocket心跳包是WebSocket协议的保活机制,用于维持长连接。有效的心跳包可以防止长时间不通讯时,WebSocket自动断开连接。

心跳包是指在一定时间间隔内,WebSocket发送的空数据包。常见的WebSocket心跳包机制如下:

  1. 客户端定时向服务器发送心跳数据包,以保持长连接。
  2. 服务器定时向客户端发送心跳数据包,以检测客户端连接是否正常。
  3. 双向发送心跳数据包。

 三、WebSocket心跳机制原理 

WebSocket心跳机制的原理是利用心跳包及时发送和接收数据,保证WebSocket长连接不被断开。WebSocket心跳机制的原理可以用下面的流程来说明:

  • 客户端建立WebSocket连接。
  • 客户端向服务器发送心跳数据包,服务器接收并返回一个表示接收到心跳数据包的响应。
  • 当服务器没有及时接收到客户端发送的心跳数据包时,服务器会发送一个关闭连接的请求。
  • 服务器定时向客户端发送心跳数据包,客户端接收并返回一个表示接收到心跳数据包的响应。
  • 当客户端没有及时接收到服务器发送的心跳数据包时,客户端会重新连接WebSocket

四、WebSocket心跳机制必要吗

WebSocket心跳机制是必要的,它可以使 WebSocket 连接保持长连接,避免断开连接的情况发生。同时,心跳机制也可以检查WebSocket连接的状态,及时处理异常情况。

五、WebSocket心跳机制作用

WebSocket心跳机制的作用主要有以下几点:

  1. 保持WebSocket连接不被断开。
  2. 检测WebSocket连接状态,及时处理异常情况。
  3. 减少WebSocket连接及服务器资源的消耗。

六、WebSocket重连机制

WebSocket在发送和接收数据时,可能会因为网络原因、服务器宕机等因素而断开连接,此时需要使用WebSocket重连机制进行重新连接。

WebSocket重连机制可以通过以下几种方式实现:

 

  • 前端监听WebSocket的onclose()事件,重新创建WebSocket连接。
  • 使用WebSocket插件或库,例如Sockjs、Stompjs等。
  • 使用心跳机制检测WebSocket连接状态,自动重连。
  • 使用断线重连插件或库,例如ReconnectingWebSocket等。

七、WebSocket的缺点和不足

WebSocket的缺点和不足主要有以下几点:

  1. WebSocket需要浏览器和服务器端都支持该协议。
  2. WebSocket会增加服务器的负担,不适合大规模连接的应用场景。

 八、关键代码

// 开启心跳
  const start = () => {
    clearTimeout(timeoutObj);
    // serverTimeoutObj && clearTimeout(serverTimeoutObj);
    timeoutObj = setTimeout(function () {
      if (websocketRef.current?.readyState === 1) {
        //连接正常
        sendMessage('hello');
      }
    }, timeout);
  };
  const reset = () => {
    // 重置心跳 清除时间
    clearTimeout(timeoutObj);
    // 重启心跳
    start();
  };
  
  ws.onopen = (event) => {
      onOpenRef.current?.(event, ws);
      reconnectTimesRef.current = 0;
      start(); // 开启心跳
      setReadyState(ws.readyState || ReadyState.Open);
    };
    ws.onmessage = (message: WebSocketEventMap['message']) => {
      const { data } = message;
     
      if (data === '收到,hello') {
        reset();
        return;
      }
      if (JSON.parse(data).status === 408) {
        reconnect();
        return;
      }
      onMessageRef.current?.(message, ws);
      setLatestMessage(message);
    };
 const connect = () => {
    reconnectTimesRef.current = 0;
    connectWs();
  };

 主要思路:在建立长连接的时候开启心跳,通过和服务端发送信息,得到服务端给返回的信息,然后重置心跳,清楚时间,再重新开启心跳。如果网络断开的话,会执行方法,重新连接。

你可能感兴趣的:(javascript,前端)