面试官：你知道websocket的心跳机制吗？

前言

哈喽，大家好，我是泽南Zn👨‍🎓。在之前的一篇文章写到， 前端如何使用websocket发送消息，websocket是怎么建立连接的呢？如果断开了会怎样？如何一直保持长连接呢？接下来，本篇文章将会带你了解--- WebSocket心跳机制

一、WebSocket心跳机制

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

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

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

二、WebSocket心跳包机制

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

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

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

三、WebSocket心跳机制原理

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

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

四、WebSocket心跳机制必要吗

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

五、WebSocket心跳机制作用

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

六、WebSocket重连机制

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

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

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

七、WebSocket的缺点和不足

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

1. 
   
2. WebSocket需要浏览器和服务器端都支持该协议。
   
3. 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();

  };

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