当前位置：首页 > 文章列表 > 文章 > 前端 > WebSocket双向通信与心跳机制详解

WebSocket双向通信与心跳机制详解

2025-12-06 13:48:04 0浏览收藏

推广推荐

支持 PC / 移动端，安全直达

有志者，事竟成！如果你在学习文章，那么本文《JavaScript WebSocket 双向通信与心跳机制》，就很适合你！文章讲解的知识点主要包括，若是你对本文感兴趣，或者是想搞懂其中某个知识点，就请你继续往下看吧~

WebSocket通过持久化TCP连接实现全双工通信，适用于实时场景；为确保连接稳定，需引入心跳机制，客户端定时发送ping、服务端回应pong，若多次未响应则判定断线并触发重连，结合指数退避与WSS加密可提升系统可靠性。

JavaScriptWebSocket_双向通信与心跳检测机制

WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议，相比传统的 HTTP 请求，它更适合需要实时交互的应用场景，比如聊天室、在线游戏、实时数据推送等。而要保证 WebSocket 连接的稳定性和可靠性，除了基本的双向通信能力外，心跳检测机制也至关重要。

WebSocket 双向通信原理

WebSocket 的双向通信基于客户端与服务端建立的持久连接。一旦握手成功，双方即可随时发送数据，不再受限于“请求-响应”模式。

客户端示例：

const socket = new WebSocket('ws://localhost:8080');

socket.onopen = () => {
  console.log('连接已建立');
  // 发送消息到服务端
  socket.send('Hello Server!');
};

socket.onmessage = (event) => {
  console.log('收到消息:', event.data);
  // 可在此处处理服务端推送的数据
};

服务端（Node.js + ws 库）：

const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', (ws) => {
  console.log('客户端已连接');

  ws.on('message', (data) => {
    console.log('收到:', data);
    // 回传消息
    ws.send(`Echo: ${data}`);
  });
});

这种模式下，客户端和服务端都可以主动发送消息，实现真正的双向通信。

心跳检测的必要性

虽然 WebSocket 是长连接，但网络不稳定、防火墙超时或客户端异常退出可能导致连接中断，而两端无法立即感知。此时若无检测机制，会误以为连接仍有效，造成数据丢失或逻辑错误。

心跳机制通过定时发送轻量级消息（ping/pong），确认连接是否存活。

常见心跳策略：

客户端每 30 秒向服务端发送 ping 消息
服务端收到后回复 pong
若连续多次未收到 pong 或对方 ping，则判定连接失效并重连

实现心跳检测机制

客户端心跳逻辑：

function createSocket() {
  const socket = new WebSocket('ws://localhost:8080');
  let heartBeatInterval;
  let reconnnectTimer;

  function heartbeat() {
    // 发送心跳包
    socket.send('ping');
    // 设置超时，若未收到 pong 则断开
    clearTimeout(reconnnectTimer);
    reconnnectTimer = setTimeout(() => {
      socket.close();
    }, 3000); // 等待 3 秒
  }

  socket.onopen = () => {
    console.log('连接打开');
    // 开始心跳
    heartBeatInterval = setInterval(heartbeat, 5000); // 每 5 秒发一次
  };

  socket.onmessage = (event) => {
    if (event.data === 'pong') {
      // 清除重连计时器
      clearTimeout(reconnnectTimer);
      return;
    }
    console.log('收到数据:', event.data);
  };

  socket.onclose = () => {
    console.log('连接关闭，尝试重连...');
    clearInterval(heartBeatInterval);
    clearTimeout(reconnnectTimer);
    // 延迟重连，避免频繁连接
    setTimeout(createSocket, 2000);
  };

  socket.onerror = () => {
    console.error('连接出错');
    socket.close(); // 触发 onclose
  };

  return socket;
}

createSocket();

服务端响应心跳：

wss.on('connection', (ws) => {
  // 监听消息
  ws.on('message', (data) => {
    if (data === 'ping') {
      ws.send('pong');
      return;
    }
    console.log('收到:', data);
  });

  // 可选：服务端也可主动发送 ping，由客户端回应
});