前端实时通信技术：HTTP轮询、SSE、WebSocket、WebRTC

前言

在Web开发中，我们经常遇到需要"实时获取最新数据"的场景：股票行情、聊天消息、语音识别、视频通话......这些场景对通信技术的要求各不相同。

很多同学对这些技术的选型感到困惑：什么时候用轮询？什么时候用SSE？WebSocket和WebRTC又有什么区别？

今天这篇文章，就带大家彻底搞懂这几种技术的原理、优缺点和适用场景。

一、技术全景图

先看一张总览表，快速了解四种技术的核心差异：

技术	通信方向	协议	实时性	复杂度	典型场景
HTTP短轮询	单向（客户端请求）	HTTP	差（有延迟）	低	旧版消息通知
HTTP长轮询	单向（模拟推送）	HTTP	一般	中	兼容性要求高的场景
SSE	单向（服务器→客户端）	HTTP	好	低	消息推送、股票行情
WebSocket	双向（全双工）	WS/WSS	极好	中	聊天、游戏、实时语音识别
WebRTC	双向（P2P媒体流）	UDP为主	极好（低延迟）	高	音视频通话、实时会议

二、HTTP轮询：最原始的方式

1. 短轮询（Short Polling）

工作原理：客户端每隔一段时间（如1秒）主动向服务器发起HTTP请求，询问是否有新数据。

javascript

// 短轮询示例
setInterval(async () => {
  const response = await fetch('/api/messages');
  const data = await response.json();
  updateUI(data);
}, 1000); // 每秒请求一次

优点：

• 实现极其简单

• 兼容所有浏览器和服务器

缺点：

• 大量无效请求，浪费资源

• 实时性差（延迟 = 轮询间隔）

• 服务器压力大

适用场景：几乎没有。已被更好的方案取代。

2. 长轮询（Long Polling）

工作原理：客户端发起请求后，服务器"挂起"这个请求，直到有新数据或超时才返回。客户端收到响应后立即发起下一次请求。

javascript

// 长轮询示例
async function longPoll() {
  const response = await fetch('/api/wait-for-messages');
  const data = await response.json();
  updateUI(data);
  longPoll(); // 立即发起下一次
}
longPoll();

优点：

• 相比短轮询，无效请求少

• 兼容性好，可在不支持SSE/WebSocket的环境使用

缺点：

• 服务器需要维持大量挂起连接

• 实现比短轮询复杂

• 仍有HTTP头开销

适用场景：需要兼容老旧浏览器的实时推送场景。

三、SSE（Server-Sent Events）：轻量级服务器推送

什么是SSE？

SSE是HTML5标准的一部分，允许服务器单向向客户端推送数据。它基于HTTP协议，使用简单。

工作原理

客户端通过EventSourceAPI建立连接，服务器保持连接打开，随时可以推送数据。

javascript

// 客户端代码
const eventSource = new EventSource('/api/stream');

eventSource.onmessage = (event) => {
  console.log('收到数据:', event.data);
};

eventSource.onerror = (error) => {
  console.error('连接出错:', error);
};

// 关闭连接
// eventSource.close();
javascript

// 服务端代码（Node.js + Express示例）
app.get('/api/stream', (req, res) => {
  res.writeHead(200, {
    'Content-Type': 'text/event-stream',
    'Cache-Control': 'no-cache',
    'Connection': 'keep-alive'
  });

  // 每秒推送一条消息
  const interval = setInterval(() => {
    res.write(`data: ${JSON.stringify({ time: Date.now() })}\n\n`);
  }, 1000);

  req.on('close', () => clearInterval(interval));
});

优点

• 简单：基于HTTP，无需特殊协议

• 自动重连：连接断开后浏览器自动尝试重连

• 轻量：比WebSocket更轻量，适合单向推送

• 支持自定义事件：可以推送不同类型的事件

缺点

• 单向：只能服务器→客户端，客户端无法通过同一连接发送数据

• 连接数限制：浏览器限制同域名下6个左右并发连接

• 不支持二进制数据：只能传输文本（通常用JSON或纯文本）

适用场景

• 股票行情、加密货币价格

• 消息通知中心

• 日志实时输出

• AI对话流式输出（配合打字机效果）

• 手动开关的语音转文字结果推送

典型产品

微信网页版的消息通知、微博实时提醒

四、WebSocket：真正的双向实时通信

什么是WebSocket？

WebSocket是一种全双工通信协议，在单个TCP连接上实现客户端和服务器之间的双向实时通信。

工作原理

通过HTTP升级握手建立连接，之后切换为WebSocket协议，保持长连接。

javascript

// 客户端代码
const ws = new WebSocket('wss://example.com/socket');

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

ws.onmessage = (event) => {
  const data = JSON.parse(event.data);
  console.log('收到消息:', data);
};

ws.onerror = (error) => {
  console.error('WebSocket错误:', error);
};

ws.onclose = () => {
  console.log('连接已关闭');
};

javascript

// 服务端代码（Node.js + ws库示例）
import { WebSocketServer } from 'ws';

const wss = new WebSocketServer({ port: 8080 });

wss.on('connection', (ws) => {
  console.log('客户端已连接');
  
  ws.on('message', (data) => {
    console.log('收到:', data.toString());
    // 广播给所有客户端
    wss.clients.forEach(client => {
      if (client !== ws && client.readyState === WebSocket.OPEN) {
        client.send(data);
      }
    });
  });
  
  ws.send('欢迎加入聊天室！');
});

优点

• 真正的双向实时：客户端和服务器可以随时互相发送消息

• 低延迟：连接建立后，消息直接传输，无需HTTP头

• 高效：相比HTTP轮询，大幅减少网络开销

• 支持二进制：可以传输二进制数据（如音频流）

缺点

• 实现复杂：需要处理心跳、断线重连、消息确认等

• 协议特殊：需要服务器支持WebSocket协议

• 负载均衡麻烦：长连接对负载均衡器有特殊要求

• 防火墙可能拦截：某些网络环境可能阻断WebSocket

适用场景

• 即时通讯（微信、QQ）

• 在线游戏（实时位置同步）

• 协同编辑（多人同时编辑文档）

• 实时语音转文字（边说边出字）

• 实时数据看板（监控系统）

典型产品

微信（部分功能）、Slack、腾讯文档

五、WebRTC：P2P音视频通信

什么是WebRTC？

WebRTC（Web Real-Time Communication）是一个支持浏览器之间直接进行音视频通信的开源项目。它允许在不安装插件的情况下实现点对点（P2P）的音视频通话。

核心组件

• getUserMedia：获取麦克风/摄像头权限，采集音视频流

• RTCPeerConnection：建立P2P连接，传输音视频流

• RTCDataChannel：传输任意数据（文件、文字等）

工作原理

WebRTC需要信令服务器（通常用WebSocket实现）来交换连接信息，但媒体数据走P2P的UDP通道。

javascript

// 获取麦克风流
const stream = await navigator.mediaDevices.getUserMedia({
  audio: {
    echoCancellation: true,  // 回声消除
    noiseSuppression: true,  // 噪声抑制
    autoGainControl: true    // 自动增益
  },
  video: true
});

// 创建对等连接
const pc = new RTCPeerConnection();

// 添加本地流
stream.getTracks().forEach(track => {
  pc.addTrack(track, stream);
});

// 接收远程流
pc.ontrack = (event) => {
  remoteVideo.srcObject = event.streams[0];
};

// 创建offer（发起方）
const offer = await pc.createOffer();
await pc.setLocalDescription(offer);
// 通过信令服务器发送offer给远端

优点

• 极低延迟：基于UDP，无需服务器中转，延迟通常<400ms

• P2P架构：节省服务器带宽和计算资源

• 内置音视频处理：回声消除、降噪、自动增益等

• 安全：强制加密（DTLS/SRTP）

缺点

• 实现极其复杂：需要处理STUN/TURN穿透、NAT、信令等

• P2P不可靠：网络环境差时需要TURN服务器中转

• 连接建立慢：ICE候选收集、连接建立需要时间

• 浏览器兼容性：老浏览器不支持或支持不完整

适用场景

• 视频会议（Zoom、腾讯会议）

• 语音通话（Discord）

• 实时互动直播

• P2P文件传输

• AI语音助手（实时对话场景）

典型产品

Google Meet、Zoom（Web版）、Discord

六、技术选型决策树

根据您的具体需求，可以按照这个决策树来选择：

text

需要实时通信？
    │
    ├─ 只需要服务器推送给客户端？
    │       │
    │       ├─ 是 → SSE（简单、轻量）
    │       │
    │       └─ 需要客户端也能发送数据？
    │               │
    │               ├─ 文本/JSON数据 → WebSocket
    │               │
    │               └─ 音视频流 → WebRTC
    │
    └─ 需要极低延迟、P2P直连？
            │
            └─ 是 → WebRTC

七、实战场景对照表

场景	推荐技术	原因
股票行情推送	SSE	单向推送，实现简单
聊天室	WebSocket	双向通信，实时性强
视频会议	WebRTC	P2P低延迟，内置音视频处理
实时语音识别（边说边出）	WebSocket / WebRTC	需要上传音频流+接收结果
按住说话转文字	HTTP + SSE（可选）	一次性上传，结果可推送可不推送
消息通知中心	SSE	单向推送，自动重连
协同编辑	WebSocket	双向实时同步
AI对话流式输出	SSE 或 WebSocket	SSE更简单，WebSocket更灵活
在线游戏	WebSocket	双向实时，延迟敏感
实时日志查看	SSE	单向推送，适合tail -f场景

八、总结

1. HTTP轮询：老古董，除非需要兼容极老的浏览器，否则不要再用了。

2. SSE：如果你只需要服务器单向推送数据，SSE是最简单、最轻量的选择。它的自动重连机制非常好用。

3. WebSocket：如果需要双向实时通信（客户端和服务器都能随时发消息），WebSocket是标准答案。它的生态最成熟。

4. WebRTC：如果要做音视频通话或需要极低延迟的P2P通信，WebRTC是唯一的选择。但复杂度最高，建议使用成熟的SDK（如声网、腾讯云音视频）。

一个常见误区：很多人以为SSE和WebSocket是竞争关系，其实它们解决的是不同问题。SSE解决"服务器推"的问题，WebSocket解决"互相推"的问题。两者可以共存，各司其职。

选型原则：

• 选最简单的能解决问题的方案

• SSE能搞定就不要上WebSocket

• WebSocket能搞定就不要上WebRTC

• 除非有充分理由，否则不要自己造轮子