前端 WebSocket 实时通信实战：告别轮询，拥抱全双工

React 组件集成

在 React 中使用 useRef 保存实例，避免组件重新渲染导致重复创建连接，并利用 useEffect 管理生命周期。

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

function WebSocketComponent() {
  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((message, index) => (
          <div key={index} className="message">
            <strong>{message.user}:</strong> {message.message}
          </div>
        ))}
      </div>
      <div className="input-area">
        <input 
          type="text" 
          value={input} 
          onChange={(e) => setInput(e.target.value)} 
          onKeyPress={(e) => e.key === 'Enter' && handleSend()} 
        />
        <button onClick={handleSend}>Send</button>
      </div>
    </div>
  );
}

export default WebSocketComponent;

进阶场景处理

针对认证、重试策略及消息队列等需求，可以通过继承基类进行扩展。

认证与高级配置

// 1. 带认证的 WebSocket
class AuthWebSocketClient extends WebSocketClient {
  constructor(url, token) {
    super(url);
    this.token = token;
  }
  connect() {
    this.socket = new WebSocket(`${this.url}?token=${this.token}`);
    // 复用父类其他逻辑
    this.socket.onopen = (event) => {
      console.log('Authed WebSocket connected');
      this.connected = true;
      this.reconnectAttempts = 0;
      this.startHeartbeat();
    };
    this.socket.onmessage = (event) => this.handleMessage(event.data);
    this.socket.onclose = (event) => {
      console.log('Authed WebSocket disconnected');
      this.connected = false;
      this.stopHeartbeat();
      this.reconnect();
    };
    this.socket.onerror = (error) => console.error('Authed WebSocket error:', error);
  }
}

// 2. 带指数退避重试机制
class RetryWebSocketClient extends WebSocketClient {
  constructor(url, options = {}) {
    super(url);
    this.maxReconnectAttempts = options.maxReconnectAttempts || 10;
    this.reconnectDelay = options.reconnectDelay || 1000;
    this.exponentialBackoff = options.exponentialBackoff || true;
  }
  reconnect() {
    if (this.reconnectAttempts < this.maxReconnectAttempts) {
      this.reconnectAttempts++;
      const delay = this.exponentialBackoff 
        ? this.reconnectDelay * Math.pow(2, this.reconnectAttempts - 1)
        : this.reconnectDelay;
      console.log(`Retrying... (${this.reconnectAttempts}/${this.maxReconnectAttempts})`);
      setTimeout(() => this.connect(), delay);
    } else {
      console.error('Max retry attempts reached');
    }
  }
}

// 3. 消息队列（离线消息暂存）
class QueueWebSocketClient extends WebSocketClient {
  constructor(url) {
    super(url);
    this.messageQueue = [];
  }
  connect() {
    super.connect();
    this.socket.onopen = (event) => {
      console.log('Connected, flushing queue');
      this.flushQueue();
    };
  }
  send(data) {
    if (this.connected && this.socket.readyState === WebSocket.OPEN) {
      this.socket.send(JSON.stringify(data));
    } else {
      this.messageQueue.push(data);
      console.log('Not connected, message queued');
    }
  }
  flushQueue() {
    if (this.connected && this.messageQueue.length > 0) {
      this.messageQueue.forEach(msg => this.socket.send(JSON.stringify(msg)));
      this.messageQueue = [];
    }
  }
}

服务端与工程化

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 parsedMessage = JSON.parse(message);
      
      // 处理心跳
      if (parsedMessage.type === 'heartbeat') {
        socket.send(JSON.stringify({ type: 'heartbeat' }));
        return;
      }

      // 广播消息
      clients.forEach(client => {
        if (client.readyState === WebSocket.OPEN) {
          client.send(JSON.stringify(parsedMessage));
        }
      });
    } catch (error) {
      console.error('Parse error:', error);
    }
  });

  socket.on('close', () => {
    console.log('Client disconnected');
    clients.delete(socket);
  });

  socket.on('error', (error) => {
    console.error('Socket error:', error);
  });
});

console.log('Server running on port 8080');

单例管理与监控

在多模块共享连接时，建议使用单例模式管理实例，并增加错误计数监控。

class WebSocketManager {
  static instance = null;
  constructor() {
    this.clients = {};
  }
  static getInstance() {
    if (!WebSocketManager.instance) {
      WebSocketManager.instance = new WebSocketManager();
    }
    return WebSocketManager.instance;
  }
  createClient(name, url, options = {}) {
    const client = new QueueWebSocketClient(url);
    this.clients[name] = client;
    client.connect();
    return client;
  }
  removeClient(name) {
    if (this.clients[name]) {
      this.clients[name].disconnect();
      delete this.clients[name];
    }
  }
  disconnectAll() {
    Object.values(this.clients).forEach(client => client.disconnect());
    this.clients = {};
  }
}

// 错误监控示例
class MonitoredWebSocketClient extends WebSocketClient {
  constructor(url) {
    super(url);
    this.errorCount = 0;
    this.maxErrorCount = 10;
  }
  handleError(error) {
    this.errorCount++;
    console.error('Error count:', this.errorCount);
    if (this.errorCount > this.maxErrorCount) {
      console.error('Too many errors, forcing disconnect');
      this.disconnect();
    }
  }
  socket.onerror = (error) => this.handleError(error);
}

总结与建议

WebSocket 确实是实现实时通信的首选，但它并非万能药。在实际项目中，务必根据业务需求权衡：

1. 按需使用：如果不需要毫秒级响应，简单的轮询可能更简单可靠。
2. 稳定性优先：生产环境必须包含重连、心跳和错误恢复机制。
3. 资源控制：注意服务端并发连接数，合理设计广播范围。
4. 架构清晰：将连接逻辑封装，避免散落在各个组件中。

记住，技术的目的是解决问题，而不是炫技。如果你的 WebSocket 实现让系统变得更脆弱，那说明你需要重新审视架构了。