前端 WebSocket 实战：从轮询到实时通信

这里的关键在于 reconnect 机制和事件分发模式，这样业务逻辑不需要关心底层连接状态。

React 场景：自定义 Hook

在 React 项目中，我们需要管理组件的生命周期，避免内存泄漏。使用自定义 Hook 是最佳实践。

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

function useWebSocket(url) {
  const [isConnected, setIsConnected] = useState(false);
  const [messages, setMessages] = useState([]);
  const ws = useRef(null);

  useEffect(() => {
    ws.current = new WebSocket(url);
    
    ws.current.onopen = () => setIsConnected(true);
    ws.current.onclose = () => setIsConnected(false);
    
    ws.current.onmessage = (event) => {
      const data = JSON.parse(event.data);
      setMessages(prev => [...prev, data]);
    };

    return () => {
      ws.current.close();
    };
  }, [url]);

  const sendMessage = useCallback((message) => {
    if (ws.current && ws.current.readyState === WebSocket.OPEN) {
      ws.current.send(JSON.stringify(message));
    }
  }, []);

  return { isConnected, messages, sendMessage };
}

// 组件中使用
function ChatRoom() {
  const { isConnected, messages, sendMessage } = useWebSocket('wss://chat.example.com');
  const [input, setInput] = useState('');

  const handleSend = () => {
    sendMessage({ type: 'chat', content: input });
    setInput('');
  };

  return (
    <div>
      <div>状态：{isConnected ? '已连接' : '未连接'}</div>
      <div className="messages">
        {messages.map((msg, i) => (
          <div key={i}>{msg.content}</div>
        ))}
      </div>
      <input value={input} onChange={e => setInput(e.target.value)} />
      <button onClick={handleSend}>发送</button>
    </div>
  );
}

注意 useEffect 中的清理函数，这能确保组件卸载时断开连接，防止无效请求。

进阶方案：引入 Socket.io

如果不想自己处理重连、心跳或协议降级，Socket.io 是个不错的选择。它基于 WebSocket（兼容 fallback），并提供了丰富的 API。

import { io } from 'socket.io-client';

const socket = io('https://api.example.com', {
  transports: ['websocket'],
  autoConnect: true,
  reconnection: true,
  reconnectionAttempts: 5,
  reconnectionDelay: 3000
});

// 连接事件
socket.on('connect', () => {
  console.log('连接成功，ID:', socket.id);
});

// 断开连接
socket.on('disconnect', () => {
  console.log('连接断开');
});

// 监听消息
socket.on('message', (data) => {
  console.log('收到消息:', data);
});

// 发送消息
socket.emit('chat message', { text: 'Hello' });

// 房间管理
socket.emit('join room', 'room-1');
socket.emit('leave room', 'room-1');

早这么写，你的实时通信早就稳了。别再用轮询折腾了，除非你想去发短信。

实战技巧与最佳实践

WebSocket 不是银弹，实际落地时要注意以下几点：

1. 重连机制：网络波动不可避免，断线后必须自动重连。
2. 心跳检测：保持长连接活跃，防止中间设备（如防火墙）切断空闲连接。
3. 消息确认：关键业务数据需要 ACK 机制，确保送达。
4. 错误处理：优雅捕获异常，避免应用崩溃。

常见应用场景包括实时聊天、股票行情、协同编辑和在线游戏。WebSocket 就像电话，HTTP 就像写信。紧急的事打电话，不急的事写信。学会选择正确的工具，能让你的应用真正'实时'起来。