服务端实时推送技术解析：轮询、WebSocket 与 SSE 的选择与实践

发布时间：2025-04-23 17:07:50

在现代 Web 开发中，实时推送技术的应用场景（如实时数据大屏、消息通知、聊天功能等）越来越广泛。本文将从技术原理、实现方案对比、实际应用三个维度，深入解析三种主流实时推送技术：轮询、WebSocket 和 SSE（Server-Sent Events），帮助开发者根据业务场景选择最合适的方案。

一、实时推送技术的三大方案

1. 轮询（Polling）

原理：客户端定时向服务端发起请求，服务端返回最新数据。
实现方式：通过 setInterval 或 setTimeout 定时发送 HTTP 请求。

缺点与局限性

资源浪费：每次请求都需要建立 HTTP 连接（三次握手/四次挥手），消耗网络资源。
延迟问题：数据更新频率与轮询间隔直接相关，无法做到真正的实时。
并发限制：浏览器对同一域名的并发请求数有限（如 Chrome 最多 6 个），长期轮询会占用资源。
客户端负载：持续发起请求会增加客户端的计算和网络负担。

适用场景：仅在浏览器不支持 WebSocket 或 SSE 的极端情况下使用（如旧版 IE 浏览器）。

2. WebSocket

原理：基于 TCP 的全双工通信协议，服务端与客户端可双向实时传输数据。
协议：ws://（非加密）或 wss://（加密）。

核心优势

实时性：数据传输延迟极低，适合高频交互场景。
双向通信：客户端与服务端可随时发送消息（如聊天、游戏对战）。

技术挑战

协议复杂性：需服务端支持 WebSocket 协议，开发成本较高。
兼容性：部分旧浏览器（如 IE）不支持，需额外处理。
服务器负载：每个连接需要保持 TCP 连接，对服务器资源消耗较大。

适用场景：需要双向实时通信的场景，如：

即时聊天、在线游戏
实时协作工具（如共享文档）
需要客户端主动发送指令的场景

3. Server-Sent Events（SSE）

原理：基于 HTTP/1.1 的单向流式传输协议，服务端可主动推送数据到客户端。
协议：通过标准 HTTP 协议实现，无需额外协议支持。

核心优势

轻量级：实现简单，仅需服务端保持长连接并持续发送数据。
天然支持长连接：浏览器自动处理断线重连，减少开发复杂度。
浏览器兼容性好：现代浏览器（Chrome、Firefox、Safari 等）均支持，仅 IE 不支持。

局限性

单向通信：仅支持服务端推送，客户端无法主动发送数据。
依赖 HTTP 协议：需处理跨域问题（CORS）。

适用场景：服务端单向推送的场景，如：

数据大屏的实时数据更新
消息中心的未读消息通知
股票、物联网设备的实时数据监控

二、技术方案对比与选型指南

维度	WebSocket	SSE	轮询
通信方向	双向	单向（服务端→客户端）	单向（客户端→服务端）
协议复杂度	高（需处理握手/数据帧）	低（基于 HTTP）	低（简单 HTTP 请求）
实时性	高	高（依赖服务端推送频率）	中（受轮询间隔限制）
开发成本	高（需处理连接管理）	低（浏览器原生支持）	极低（简单 HTTP 请求）
服务器负载	高（保持 TCP 连接）	中（长连接占用资源较少）	低（按需发起请求）
断线重连	需手动实现	浏览器自动重连	客户端需手动重试
适用场景	聊天、游戏、实时协作	数据监控、消息通知	无其他选择时的降级方案

选型建议：

优先选择 SSE：当业务仅需服务端单向推送时（如数据更新、通知），SSE 是最佳选择。
选择 WebSocket：需要双向实时通信（如聊天、协作工具）时，必须使用 WebSocket。
避免轮询：仅在浏览器不支持现代协议的极端情况下使用。

三、SSE 实战示例

1. 前端代码实现

<!DOCTYPE html>
<html>
<head>
  <title>SSE Demo</title>
</head>
<body>
  <ul id="messages"></ul>
  <script>
    // 检查浏览器是否支持 **SSE**
    if (!window.EventSource) {
      alert("您的浏览器不支持 **SSE**！");
      throw new Error("SSE 不支持");
    }

    const source = new EventSource('/sse'); // 连接服务端

    // 监听连接打开事件
    source.onopen = () => {
      console.log("已连接到服务端");
    };

    // 监听消息事件
    source.onmessage = (event) => {
      const data = JSON.parse(event.data);
      const li = document.createElement('li');
      li.textContent = `时间：${data.time}`;
      document.getElementById('messages').appendChild(li);
    };

    // 监听错误事件
    source.onerror = (err) => {
      console.error("连接错误", err);
      source.close();
    };
  </script>
</body>
</html>

2. 后端代码实现（Node.js + Express）

const express = require('express');
const app = express();
const port = 3000;

// 跨域配置
app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Content-Type', 'text/event-stream');
  res.header('Cache-Control', 'no-cache');
  res.header('Connection', 'keep-alive');
  next();
});

// **SSE** 接口
app.get('/sse', (req, res) => {
  // 每秒推送当前时间
  const interval = setInterval(() => {
    const time = new Date().toLocaleTimeString();
    res.write(`data: ${JSON.stringify({ time })}\n\n`);
  }, 1000);

  // 处理客户端断开
  req.on('close', () => {
    clearInterval(interval);
    res.end();
  });
});

app.listen(port, () => {
  console.log(`服务已启动，访问 http://localhost:${port}`);
});

四、关键注意事项

浏览器兼容性：
- SSE：所有现代浏览器支持，但需注意 IE 不兼容。
- WebSocket：需检查目标浏览器是否支持（可通过 WebSocket 构造函数检测）。
服务端实现：
- 长连接管理：需处理客户端断开事件，避免内存泄漏。
- 数据格式：SSE 的数据格式需严格遵循 data: ... 格式，每条消息以 \n\n 分隔。
性能优化：
- 心跳机制：SSE 可通过定期发送空消息保持连接活跃。
- 数据压缩：对大体积数据进行压缩（如 JSON 压缩）。

五、总结

SSE 是单向推送的最优解：轻量、易用且兼容性好，适合 90% 的单向推送场景。
WebSocket 是双向通信的必要选择：复杂实时交互场景的唯一方案。
轮询是最后的选择：仅在兼容性极差时使用，否则会显著增加资源消耗。

通过合理选择 实时推送技术（如 WebSocket 或 SSE），开发者可以高效实现各类实时推送需求，同时兼顾性能与开发成本。

13712947744