引言：前端的实时通信

在前端开发中，实时通信已是基础能力。本文梳理轮询、WebSocket 与 SSE 的原理、适用场景，核心的是降低延迟、减少开销、提升可靠性。

技术选型速览

一、轮询时代：主动请求的局限性

1.1 短轮询（Short Polling）

工作原理

// 客户端定时请求
setInterval(() => {
  fetch('/api/messages')
    .then(response => response.json())
    .then(data => {
      if (data.length > 0) {
        updateUI(data);
      }
    });
}, 3000); // 每3秒请求一次

特点

• 简单易实现，兼容性极好
• 大量无效请求，服务器压力大
• 实时性差，延迟至少为轮询间隔

适用场景

• 数据更新不频繁的后台管理系统
• 兼容性要求极高的传统系统
• 开发原型或 MVP 阶段

1.2 长轮询（Long Polling）

工作原理

function longPoll() {
  fetch('/api/long-poll')
    .then(response => response.json())
    .then(data => {
      processData(data);
      longPoll(); // 递归调用
    })
    .catch(() => {
      setTimeout(longPoll, 1000); // 错误重试
    });
}

优势与局限

• 优点：减少无效请求，实时性更好；兼容性好，不需要特殊协议
• 缺点：服务器保持的连接数可能过高；实现复杂度相对更高

二、WebSocket：全双工实时通信的里程碑

2.1 核心工作原理

连接建立（客户端）

const ws = new WebSocket('wss://example.com/ws');

ws.onopen = () => {
  console.log('连接已建立');
  ws.send(JSON.stringify({ type: 'auth', token }));
};

ws.onmessage = (event) => {
  const data = JSON.parse(event.data);
  handleMessage(data);
};

ws.onclose = (event) => {
  console.log('连接关闭', event.code, event.reason);
  setTimeout(connectWebSocket, 2000); // 自动重连
};

2.3 适用场景

• 聊天应用与即时通讯
• 多人协作工具
• 实时数据监控仪表板
• 实时游戏与金融交易

三、SSE（Server-Sent Events）：轻量级单向流式通信

3.1 SSE 的核心优势

客户端实现

const eventSource = new EventSource('/api/stream');

eventSource.onopen = () => {
  console.log('SSE 连接已建立');
};

eventSource.onmessage = (event) => {
  const data = JSON.parse(event.data);
  updateUI(data);
};

eventSource.addEventListener('stock-update', (event) => {
  const stockData = JSON.parse(event.data);
  updateStockChart(stockData);
});

eventSource.onerror = (error) => {
  console.error('SSE 连接错误:', error);
  // 自动重连是 SSE 内置特性
};

3.2 大模型流式输出示例

async function streamAIResponse(prompt) {
  const response = await fetch('https://api.openai.com/v1/completions', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${API_KEY}` },
    body: JSON.stringify({ model: 'gpt-3.5-turbo', prompt, stream: true })
  });

  const reader = response.body.getReader();
  const decoder = new TextDecoder();

  while (true) {
    const { done, value } = await reader.read();
    if (done) break;
    const chunk = decoder.decode(value);
    for (const line of chunk.split('\n')) {
      if (line.startsWith('data: ')) {
        const data = line.slice(6);
        if (data === '[DONE]') return;
        try {
          const parsed = JSON.parse(data);
          const text = parsed.choices[0]?.text || '';
          appendToOutput(text);
        } catch (e) {
          console.error('解析错误:', e);
        }
      }
    }
  }
}

3.3 SSE 的典型应用场景

• 股票行情实时推送
• 传感器数据（温度、湿度）的持续上报与展示
• 新闻动态流
• 屏幕同步
• 大模型流式输出
• 实时日志监控
• 文件上传进度

四、技术对比分析

4.1 特性对比表

4.3 选择指南

• 选择轮询：需支持极老旧浏览器（如 IE8），后端无法支持长连接，或数据更新频率极低。
• 选择 WebSocket：需要双向实时通信、二进制传输，或对延迟极敏感（游戏、交易）。
• 选择 SSE：只需服务器单向推送，想要 HTTP/2 的多路复用优势，或追求实现简单（含大模型流式输出）。

五、实时通信的轻量化趋势

5.1 HTTP/2 与 HTTP/3 的影响

HTTP/2 服务器推送（已逐步淡出）：允许服务器在客户端请求外主动推送资源，适合减少关键静态资源的首次请求等待。不过浏览器支持和场景边际收益有限，正被逐步弱化。

HTTP/3（基于 QUIC）优势：

• 0-RTT 建连、握手更快，弱网下更友好
• 基于 UDP 的多路复用，无队头阻塞
• 更好地适配移动网络与高丢包场景

5.2 WebTransport：下一代传输协议

基于 HTTP/3/QUIC 的新一代传输协议，提供：

• 双向流与单向流，既可可靠传输也可低延迟半可靠传输
• 原生支持 Web 平台、握手更快，适合实时音视频、游戏状态同步等低延迟场景
• 仍处于演进期，需关注浏览器与服务端支持度

5.3 混合架构实践

现实项目常用组合策略：

• 核心交互走 WebSocket（或 WebTransport）保持低延迟、双向能力
• 广播类通知用 SSE，轻量且自带重连
• 大文件/非实时数据用上传接口或分块直传，避开长连接
• 在弱网与省流模式下降级为智能轮询，保障可用性

七、未来展望

7.1 新兴技术趋势

• WebRTC DataChannel：点对点实时数据传输
• WebAssembly + WebSocket：高性能二进制处理
• 边缘计算实时通信：减少网络跳数、降低延迟
• 模型驱动的自适应通信：按内容与场景优化传输

7.2 渐进增强策略

从简单到复杂的渐进增强

1. 基础：轮询
2. 增强：SSE
3. 完整：WebSocket
4. 未来：WebTransport

实时通信的技术路径大致经历：

传统轮询（Polling） → 长轮询（Long Polling） → 单向服务器推送（SSE/流式） → WebSocket → WebRTC。

选型时结合实际业务（单向推送或双向交互）、场景（移动/桌面、网络质量）、技术约束（兼容性、服务端能力、团队栈）与扩展性。常见组合：核心交互用 WebSocket，广播通知用 SSE，轮询作为降级。HTTP/3、WebTransport 等新技术提升建连速度和多路复用，需关注标准与兼容性。