前端 WebSocket 实时通信实战：替代轮询方案

主要问题包括：缺乏重连机制、无心跳保活、消息路由混乱、错误恢复能力弱以及连接状态不可追踪。

标准实现方案

基础客户端封装

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 = () => {
      this.connected = true;
      this.reconnectAttempts = 0;
      this.startHeartbeat();
    };
    this.socket.onmessage = (event) => this.handleMessage(event.data);
    this.socket.onclose = () => {
      this.connected = false;
      this.stopHeartbeat();
      this.reconnect();
    };
    this.socket.onerror = (error) => console.error(error);
  }

  reconnect() {
    if (this.reconnectAttempts < this.maxReconnectAttempts) {
      this.reconnectAttempts++;
      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);
  }

  send(data) {
    if (this.connected) this.socket.send(JSON.stringify(data));
  }

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

  handleMessage(data) {
    try {
      const { type, payload } = JSON.parse(data);
      if (this.messageHandlers[type]) {
        this.messageHandlers[type].forEach(h => h(payload));
      }
    } catch (e) {
      console.error('Parse error', e);
    }
  }

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

React 组件集成

import React, { useEffect, 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 = () => {
    if (input.trim() && wsClientRef.current) {
      wsClientRef.current.send({ type: 'chat', payload: { message: input, user: 'User' } });
      setInput('');
    }
  };

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

进阶实践与服务端示例

扩展功能类

// 认证支持
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 {
  constructor(url, options = {}) {
    super(url);
    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;
      setTimeout(() => this.connect(), delay);
    }
  }
}

// 消息队列
class QueueWebSocketClient extends WebSocketClient {
  constructor(url) {
    super(url);
    this.messageQueue = [];
  }
  send(data) {
    if (this.connected) this.socket.send(JSON.stringify(data));
    else this.messageQueue.push(data);
  }
  flushQueue() {
    while (this.messageQueue.length > 0) {
      this.socket.send(JSON.stringify(this.messageQueue.shift()));
    }
  }
}

Node.js 服务端

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

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

  socket.on('message', (msg) => {
    try {
      const data = JSON.parse(msg);
      if (data.type === 'heartbeat') {
        socket.send(JSON.stringify({ type: 'heartbeat' }));
        return;
      }
      clients.forEach(c => c.send(JSON.stringify(data)));
    } catch (e) {
      console.error('Parse error', e);
    }
  });

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

全局管理器

class WebSocketManager {
  static instance = null;
  constructor() { this.clients = {}; }
  static getInstance() {
    if (!WebSocketManager.instance) WebSocketManager.instance = new WebSocketManager();
    return WebSocketManager.instance;
  }
  createClient(name, url) {
    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];
    }
  }
}

总结与建议

WebSocket 是构建实时应用的有力工具，但需谨慎评估适用场景。若业务对实时性要求不高，轮询方案可能更简单可靠。过度设计会导致系统复杂度增加，维护成本上升。

建议遵循以下原则：

1. 根据实际需求选择通信协议。
2. 实现完善的连接管理（重连、心跳、错误恢复）。
3. 保持服务端与客户端的状态同步。
4. 避免为技术而技术，确保方案服务于业务目标。