第22章：与后端集成

实现实时数据更新（WebSocket/SSE）

1. WebSocket基础与应用

什么是WebSocket？

  • 全双工通信协议，建立在单个TCP连接上
  • 与HTTP协议的关系：WebSocket通过HTTP升级握手建立连接
  • 实时性优势：服务端可主动推送数据，无需客户端轮询

在React中集成WebSocket

// 示例：WebSocket基础连接
useEffect(() => {
  const socket = new WebSocket('wss://your-api-endpoint');

  socket.onopen = () => console.log('WebSocket连接已建立');
  socket.onmessage = (event) => {
    setRealTimeData(JSON.parse(event.data));
  };
  
  return () => socket.close();
}, []);

常用场景

  • 实时聊天应用
  • 股票行情推送
  • 多人协作编辑工具

2. Server-Sent Events (SSE) 技术

SSE与WebSocket对比

特性WebSocketSSE
协议独立协议基于HTTP
通信方向全双工服务端→客户端
数据格式二进制/文本仅文本
重连机制需手动实现内置自动重连

React中的SSE实现

// 示例：EventSource基础用法
useEffect(() => {
  const eventSource = new EventSource('/api/stream');

  eventSource.onmessage = (event) => {
    setServerData(prev => [...prev, JSON.parse(event.data)]);
  };

  return () => eventSource.close();
}, []);

3. 生产环境最佳实践

错误处理与重连机制

// 增强型WebSocket实现
function useWebSocket(url) {
  const [data, setData] = useState(null);
  const [retryCount, setRetryCount] = useState(0);

  useEffect(() => {
    const socket = new WebSocket(url);
    
    const handleError = () => {
      if (retryCount < 3) {
        setTimeout(() => setRetryCount(c => c+1), 2000);
      }
    };

    socket.addEventListener('error', handleError);
    // ...其他事件监听

    return () => {
      socket.removeEventListener('error', handleError);
      socket.close();
    };
  }, [url, retryCount]);

  return data;
}

性能优化建议

  • 使用WebWorker处理高频数据
  • 实现数据节流（throttling）和防抖（debouncing）
  • 考虑使用专业库（如Socket.IO、ReconnectingWebSocket）

4. 现代替代方案

GraphQL Subscriptions

// Apollo Client订阅示例
const { data } = useSubscription(
  gql`subscription { newMessages { id, content } }`
);

Firebase Realtime Database

  • 谷歌提供的实时数据同步服务
  • 与React深度集成的SDK

5. 安全注意事项

  • 实现身份验证（JWT/WSS）
  • 数据加密敏感信息
  • 限制连接频率防止DDoS攻击
// WebSocket鉴权示例
const socket = new WebSocket(
  `wss://api.example.com/ws?token=${getAuthToken()}`
);

专家提示：对于需要双向通信的场景选择WebSocket，若只需服务端推送且需要简单实现，SSE可能是更好的选择。大型应用建议使用经过生产验证的库如Socket.IO。

Last Updated::