前端 WebSocket 实时通信实战：告别轮询陷阱

生产级实现方案

1. 封装基础客户端类

通过类封装管理连接状态、重连策略和消息分发，避免全局变量污染。

// ✅ 正确示范：健壮的基础客户端
class WebSocketClient {
  constructor(url) {
    this.url = url;
    this.socket = null;
    this.connected = false;
    this.reconnectAttempts = 0;
    this.maxReconnectAttempts = 5;
    this.reconnectDelay = 1000;
    this.messageHandlers = {};
    this.heartbeatInterval = null;
  }

  connect() {
    this.socket = new WebSocket(this.url);
    
    this.socket.onopen = () => {
      console.log('WebSocket connected');
      this.connected = true;
      this.reconnectAttempts = 0;
      this.startHeartbeat();
    };

    this.socket.onmessage = (event) => {
      this.handleMessage(event.data);
    };

    this.socket.onclose = () => {
      console.log('WebSocket disconnected');
      this.connected = false;
      this.stopHeartbeat();
      this.reconnect();
    };

    this.socket.onerror = (error) => {
      console.error('WebSocket error:', error);
    };
  }

  reconnect() {
    if (this.reconnectAttempts < this.maxReconnectAttempts) {
      this.reconnectAttempts++;
      console.log(`Attempting to reconnect... (${this.reconnectAttempts}/${this.maxReconnectAttempts})`);
      setTimeout(() => this.connect(), this.reconnectDelay * this.reconnectAttempts);
    } else {
      console.error('Max reconnect attempts reached');
    }
  }

  startHeartbeat() {
    this.heartbeatInterval = setInterval(() => {
      if (this.connected) this.send({ type: 'heartbeat' });
    }, 30000);
  }

  stopHeartbeat() {
    if (this.heartbeatInterval) {
      clearInterval(this.heartbeatInterval);
      this.heartbeatInterval = null;
    }
  }

  send(data) {
    if (this.connected) {
      this.socket.send(JSON.stringify(data));
    } else {
      console.error('WebSocket not connected');
    }
  }

  on(type, handler) {
    if (!this.messageHandlers[type]) this.messageHandlers[type] = [];
    this.messageHandlers[type].push(handler);
  }

  handleMessage(data) {
    try {
      const message = JSON.parse(data);
      const { type, payload } = message;
      if (this.messageHandlers[type]) {
        this.messageHandlers[type].forEach(handler => handler(payload));
      }
    } catch (error) {
      console.error('Error parsing message:', error);
    }
  }

  disconnect() {
    this.stopHeartbeat();
    if (this.socket) this.socket.close();
  }
}

2. React 组件集成

在 React 中利用 useRef 保持实例引用，配合 useEffect 管理生命周期。

import React, { useEffect, useCallback, useRef, useState } from 'react';

function ChatComponent() {
  const [messages, setMessages] = useState([]);
  const [input, setInput] = useState('');
  const wsClientRef = useRef(null);

  useEffect(() => {
    wsClientRef.current = new WebSocketClient('ws://localhost:8080');
    wsClientRef.current.connect();

    wsClientRef.current.on('chat', (payload) => {
      setMessages(prev => [...prev, payload]);
    });

    return () => {
      if (wsClientRef.current) wsClientRef.current.disconnect();
    };
  }, []);

  const handleSend = useCallback(() => {
    if (input.trim() && wsClientRef.current) {
      wsClientRef.current.send({ type: 'chat', payload: { message: input, user: 'Current User' } });
      setInput('');
    }
  }, [input]);

  return (
    <div>
      <div className="messages">
        {messages.map((msg, i) => (
          <div key={i} className="message">
            <strong>{msg.user}:</strong> {msg.message}
          </div>
        ))}
      </div>
      <div className="input-area">
        <input value={input} onChange={(e) => setInput(e.target.value)} />
        <button onClick={handleSend}>Send</button>
      </div>
    </div>
  );
}

3. 高级特性扩展

针对认证、重试策略和消息队列进行增强。

// 带认证的连接
class AuthWebSocketClient extends WebSocketClient {
  constructor(url, token) {
    super(url);
    this.token = token;
  }
  connect() {
    this.socket = new WebSocket(`${this.url}?token=${this.token}`);
    // ... 复用父类逻辑
  }
}

// 指数退避重试
class RetryWebSocketClient extends WebSocketClient {
  reconnect() {
    if (this.reconnectAttempts < this.maxReconnectAttempts) {
      this.reconnectAttempts++;
      const delay = Math.pow(2, this.reconnectAttempts - 1) * this.reconnectDelay;
      setTimeout(() => this.connect(), delay);
    }
  }
}

服务端最佳实践

Node.js 后端需关注连接管理和广播效率。

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

server.on('connection', (socket) => {
  console.log('Client connected');
  clients.add(socket);
  socket.send(JSON.stringify({ type: 'system', payload: 'Welcome!' }));

  socket.on('message', (message) => {
    try {
      const parsed = JSON.parse(message);
      if (parsed.type === 'heartbeat') {
        socket.send(JSON.stringify({ type: 'heartbeat' }));
        return;
      }
      // 广播消息
      clients.forEach(client => {
        if (client.readyState === WebSocket.OPEN) {
          client.send(JSON.stringify(parsed));
        }
      });
    } catch (err) {
      console.error('Parse error:', err);
    }
  });

  socket.on('close', () => {
    clients.delete(socket);
  });
});

资深建议

WebSocket 确实是实时通信的首选，但并非所有场景都适用。如果业务允许秒级延迟，简单的 HTTP 轮询可能更稳定且易于调试。

过度设计是开发大忌。如果你的 WebSocket 实现让系统变得复杂且不可靠，那说明方案选错了。记住，技术的目的是解决问题，而不是炫技。根据实际需求权衡，选择最合适的方案才是成熟工程师的标志。

对于必须实时的场景，务必重视重连、心跳和错误监控，确保用户体验的连续性。