前端实现socket 中断重连

前端代码

  let ws;
    let reconnectAttempts = 0;
    const maxReconnectAttempts = 5;
    let reconnectTimer = null;

    // 初始化连接
    function connect() {
      ws = new WebSocket('ws://localhost:3001');

      ws.onopen = () => {
        console.log('✅ 连接成功');
        reconnectAttempts = 0; // 重置重连计数器
        document.body.style.backgroundColor = '#cfc';
      };

      ws.onmessage = (event) => {
        document.getElementById('messages').innerHTML += `<p>${event.data}</p>`;
      };

      ws.onerror = (error) => {
        console.error('💥 连接错误:', error);
        document.body.style.backgroundColor = '#fcc';
      };

      ws.onclose = (event) => {
        console.log('🔌 连接关闭');
        if (reconnectAttempts < maxReconnectAttempts) {
          const delay = Math.min(1000 * Math.pow(2, reconnectAttempts), 30000);
          console.log(`⏳ ${delay/1000}秒后尝试重连...`);
          reconnectTimer = setTimeout(connect, delay);
          reconnectAttempts++;
        }
      };
    }

    // 手动重连
    function manualReconnect() {
      if (reconnectTimer) clearTimeout(reconnectTimer);
      reconnectAttempts = 0;
      connect();
    }

    // 首次连接
    connect();

node模拟处理

// server.js
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 3001 });

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

  // 定时推送消息
  const interval = setInterval(() => {
    if (ws.readyState === WebSocket.OPEN) {
      ws.send(`服务端消息 ${new Date().toISOString()}`);
    }
  }, 2000);

  // 断开处理
  ws.on('close', () => {
    console.log('❌ 客户端断开'+new Date().toISOString());
    clearInterval(interval);
  });
});

console.log('🚀 服务端运行在: ws://localhost:3001');