前端实时通信怎么选？HTTP、WebSocket、SSE 一文看懂

🎬 开场白

在现代 Web 应用中，前端实时通信变得越来越重要------从即时聊天、协作编辑到股票行情、IoT 数据展示，都离不开它。那么面对多种通信方式，我们该如何选择？本文将从 HTTP、WebSocket、SSE 三种常见方案出发，为你梳理选择逻辑，并附上简单示例代码。

为什么前端需要实时通信

实时通信指的是前端和后端能够即时交换数据，让用户无需刷新页面就能看到最新信息。这不仅提高了用户体验，也支持更多互动和业务场景。具体来说，可以从几个典型例子理解：

场景	描述	关键要求
即时聊天	用户发送消息后，对方可以立刻收到，无需手动刷新聊天窗口	低延迟、响应快
实时数据监控	IoT（物联网）设备监控、服务器性能监控或数据仪表盘中，数据持续更新	高通信效率、能处理大数据量和高更新频率
多人协作编辑	多人同时操作同一文档或表格，实时同步操作和变动	数据一致性、双向通信能力
金融行情	股票、数字货币等价格实时波动	高频更新、低延迟、稳定性高

常见前端实时通信技术对比

技术	描述	双向通信	优势	劣势	典型场景
HTTP 轮询 / 长轮询	前端定期或保持请求等待后端返回最新数据	❌	简单易用，兼容性好	延迟高，频繁请求消耗资源	简单状态刷新、低频数据更新
WebSocket	持久化 TCP 连接，支持双向实时通信	✅	低延迟、双向通信、可推送大数据量	需要后端支持，连接管理复杂	即时聊天、多人协作、金融行情
SSE（Server-Sent Events）	单向服务端推送，基于 HTTP	❌	简单，天然支持自动重连	仅支持服务端→客户端，无法双向	实时监控、数据更新、通知消息

💡 提示：选择方案时要结合延迟、数据量、双向需求、兼容性等因素。

HTTP 轮询 / 长轮询

HTTP 轮询是前端定期向后端发送请求获取最新数据；

长轮询则是保持请求挂起，直到服务器有新数据再返回，从而减少空响应次数。

javascript 复制代码

// 普通轮询
function fetchData() {
  fetch('/api/data')
    .then(res => res.json())
    .then(data => {
      console.log('最新数据', data);
    })
    .catch(console.error);
}

// 每5秒轮询一次
setInterval(fetchData, 5000);

javascript 复制代码

// 长轮询
function longPolling() {
  fetch('/api/long-poll')
    .then(res => res.json())
    .then(data => {
      console.log('新数据', data);
      // 请求完成后立即再次发起
      longPolling();
    })
    .catch(err => {
      console.error(err);
      setTimeout(longPolling, 5000);
    });
}

longPolling();

技术	描述	优势	劣势	典型场景
HTTP 轮询	前端定时向后端发送请求，获取最新数据	简单易用，兼容性好	延迟高，频繁请求消耗资源	简单状态刷新、低频数据更新
HTTP 长轮询	前端发起请求，后端保持连接直到有新数据返回，再立即重连	延迟比普通轮询低，无需前端频繁轮询	对服务器压力较大，连接管理复杂，响应慢时占用资源	实时性要求不高的数据更新、通知

WebSocket

WebSocket 是基于 TCP 的全双工持久连接，允许客户端和服务端随时发送消息，实现真正的实时通信。

javascript 复制代码

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

// 连接成功
ws.onopen = () => {
  console.log('WebSocket 已连接');
  ws.send(JSON.stringify({ type: 'hello', payload: 'Hi Server' }));
};

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

// 连接关闭
ws.onclose = () => console.log('WebSocket 已关闭');
ws.onerror = (err) => console.error('WebSocket 错误', err);

优势	劣势	典型场景
低延迟，实时性强双向通信，可推送大数据量适合高频更新场景	需要后端支持 WebSocket 协议连接管理和心跳维护复杂不适合跨域限制严格的环境（需配置 CORS）	聊天应用、股票行情、游戏、IoT 数据传输

原生及三方工具库

工具	典型场景	优点	不足
ws	高性能服务端 WebSocket 推送、IoT 设备数据传输	轻量、高性能原生 API，灵活可控	需要自己实现心跳、重连机制不提供事件命名空间封装
Socket.IO	实时聊天、多人协作应用、在线游戏	封装 WebSocket，自动回退到轮询支持事件机制和命名空间自动重连机制	相比原生 WebSocket 增加包体积对低延迟要求极高场景略有开销
STOMP + SockJS	企业级消息推送、金融行情、后台管理系统	支持消息队列和主题订阅模式跨浏览器兼容性好可与 Spring、Java 后端无缝集成	相比原生 WebSocket 多一层协议，延迟略高配置复杂，入门成本高

SSE（Server-Sent Events）

SSE 是一种单向通信方式，浏览器通过 HTTP 连接订阅服务器事件，服务器主动推送数据到客户端。

特点：服务端 → 客户端单向推送，自动断线重连。

javascript 复制代码

import { fetchEventSource } from '@microsoft/fetch-event-source';

const url = 'https://example.com/sse';

fetchEventSource(url, {
  method: 'GET',
  headers: {
    Authorization: 'Bearer token123'
  },
  onmessage(event) {
    console.log('收到 SSE 消息:', event.data);
  },
  onerror(err) {
    console.error('SSE 出错:', err);
  },
  onopen(response) {
    console.log('SSE 已连接，状态码:', response.status);
  }
});

优势	劣势	典型场景
轻量级，实现简单浏览器自动处理重连基于 HTTP，穿透防火墙能力强	单向通信（服务端 → 客户端），无法直接由客户端推送不适合大规模双向通信对老旧浏览器兼容性差（IE 除外需 polyfill）	实时通知、日志推送、监控数据展示、股票行情更新、IoT 设备状态更新

原生及三方工具库

工具	环境支持	特点与功能	优点	不足
原生 EventSource	浏览器	浏览器内置 SSE 客户端，直接订阅服务端事件流	无需额外依赖，简单易用，自动重连	只支持浏览器，无法自定义请求头，Node.js 不可用
@microsoft/fetch-event-source	浏览器 / Node	封装 Fetch API 和 SSE，支持自定义 headers、AbortController、自动重连	可在 Node.js 使用，自定义请求头，灵活控制重连和取消订阅	需要额外安装依赖，只支持单向推送
sse-node / sse-express 等 Node SSE 库	Node.js	提供服务端 SSE 功能或 Node.js 客户端 SSE 订阅	完整 Node.js 支持，可做服务端 SSE 推送或客户端订阅	仅限 Node.js，不适合浏览器端使用

📝 总结

前端实时通信，不只是"快"，更是"适配"。技术选型不是炫技，而是贴合业务场景。有的场景需要双向即时交互，有的场景只需单向更新。理解原理、权衡利弊、灵活运用，才是真正让应用"活起来"的关键。