如何用WebSocket实现实时数据推送与重连机制？

首先建立WebSocket连接并监听事件，然后实现自动重连与心跳机制以确保稳定性。

WebSocket 是实现前后端实时通信的核心技术，适合用于聊天系统、实时通知、数据监控等场景。要实现稳定的数据推送与重连机制，关键在于建立可靠的连接管理策略。

建立 WebSocket 连接并监听数据

前端通过 new WebSocket(url) 创建连接，监听 onopen、onmessage、onerror 和 onclose 事件，确保能及时响应状态变化。

示例代码：

const socket = new WebSocket(‘ws://yourdomain.com/socket’);
socket.onopen = () => {
  console.log(‘连接已建立’);
};
socket.onmessage = (event) => {
  console.log(‘收到消息:’, event.data);
};
socket.onerror = (error) => {
  console.error(‘连接错误:’, error);
};
socket.onclose = () => {
  console.log(‘连接已关闭’);
};

实现自动重连机制

网络不稳定或服务重启可能导致连接中断，需设计重连逻辑。使用定时器控制重连间隔，避免频繁请求，并支持最大重试次数。

可封装一个重连函数，在 onclose 或 onerror 触发时调用：

• 设置标志位防止重复启动重连
• 采用指数退避策略（如每次延迟增加）提升稳定性
• 记录重试次数，超过上限后提示用户或暂停尝试

简单实现：

let reconnectAttempts = 0;
const maxReconnects = 5;
const baseDelay = 1000;
function reconnect() {
  if (reconnectAttempts >= maxReconnects) return;
  const delay = baseDelay * Math.pow(2, reconnectAttempts);
  setTimeout(() => {
    createSocket();
    reconnectAttempts++;
  }, delay);
}

心跳检测维持连接活跃

长时间无数据交互可能被代理或防火墙断开连接。通过心跳包（ping/pong）保持连接活跃。

在连接建立后启动心跳：

• 客户端定时发送 ping 消息
• 服务端收到后返回 pong 响应
• 若连续多次未收到响应，主动关闭并触发重连

示例：

let heartCheck = {
  timeout: 30000,
  timer: null,
  reset: function() { clearTimeout(this.timer); return this; },
  start: function() {
    this.timer = setInterval(() => {
      if (socket.readyState === 1) {
        socket.send(‘ping’);
      }
    }, this.timeout);
  }
};
// 在 onopen 中调用 heartCheck.reset().start();

基本上就这些。只要处理好连接、断线重连和心跳，就能构建一个稳定的实时推送系统。注意服务端也要配合处理异常连接和资源释放，整体才能健壮运行。