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

2. React 中使用 WebSocket

// 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>
  );
}

3. 使用 Socket.io

// 引入 Socket.io 客户端
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');

实战技巧：WebSocket 指南

1. WebSocket 使用场景

• 实时聊天：即时通讯
• 实时数据：股票、比分更新
• 协同编辑：多人协作
• 在线游戏：实时对战

2. 最佳实践

1. 重连机制：断线自动重连
2. 心跳检测：保持连接活跃
3. 消息确认：确保消息送达
4. 错误处理：优雅处理异常

总结

WebSocket 是实时通信的标准协议。相比 HTTP 轮询，它建立了持久连接，降低了延迟和服务器压力。建议根据实际场景选择合适的实现方式。