WebSocket

是一种在单个 TCP 连接上进行全双工通信的网络协议。HTML5 的新特性，实现客户端和服务端相互之间的实时通信。

相比于 HTTP 协议的请求，使用 WebSocket 可以建立持久的连接，允许服务器主动向客户端推送数据，避免不必要的轮询请求，提高了实时性和效率。

使用场景

• 实时性要求比较高的应用：比如在线聊天，游戏，数据可视化等。
• 需要频繁交换数据的应用：在线编辑器，文档管理器等。
• 需要推送服务的应用：比如实时数据监控、通知系统等。
• 跨平台应用：比如桌面应用程序、移动应用程序等。

使用

后端

node

• 安装 ws 和其声明文件。
• 新建一个 WebSocket 的服务（ws.Server）。
• 监听客户端的连接。

默认是使用点对点的方式，可以修改为广播的方式，让连接到这个 socket 的客户端都能通过服务端的广播消息，收到对方客户端的消息。（群聊）

• 遍历 clients，获取每一个连接上的 client，发送消息。

前端

• 构造一个 WebSocket 的实例，该实例需要传入一个用于建立连接的 url，以 ws 或 wss 开头（不用 http/https）。
• 在这个实例对象上监听 open()。

发送消息前后端都使用 send()，接收消息默认监听 message 事件。

心跳检测

在实际使用过程中，由干网络波动、弱信号等原因，可能会导 WebSocket 连接断开。为了避免这种请求，可以通过心跳检测机制来检测 WebSocket 连接是否正常，当发现连接断开时尝试重连。

心跳自定义的。

const state = {
  HEART: 1,
  MESSAGE: 2,
};
// ...
let heartInreaval = null;
const heartCheck = () => {
  if (socket.readyState === ws.OPEN) {
    // socket.send("ping");
    socket.send(
      JSON.stringify({
        type: state.HEART,
        message: "心跳检测",
      })
    );
  } else {
    clearInterval(heartInreaval);
  }
};
heartInreaval = setInterval(heartCheck, 5000);