HTTP vs SSE 对比可视化

请求-响应 模式 vs 服务器推送 模式 — 动态演示

HTTP 传统请求-响应

客户端主动发起请求,服务器处理后返回响应,然后连接关闭。每次数据更新都需要重新建立连接。

浏览器 / Client
服务器 / Server
GET /data
200 OK
GET /data
200 OK
请求
响应
每个请求独立连接
客户端主动拉取 (Polling)
连接随响应关闭
适合 RESTful API
SSE 服务器推送

建立一次连接后,服务器持续主动推送数据。无需轮询,延迟低,适合实时数据流、聊天、进度更新等场景。

浏览器 / Client
服务器 / Server
📡 持续推送 data →
持久连接 · 持续推送
一次连接,长期保持
服务端主动推送 (Push)
基于 HTTP/1.1 协议
适合实时通知场景
⚡ 核心差异对比
维度 HTTP / REST SSE (Server-Sent Events)
通信方向 半双工 · 客户端发起请求 单向 · 服务端→客户端推送
连接模式 请求-响应后断开 一次连接,长连接保持
数据更新 轮询 (Polling) 定期拉取 服务端按需主动推送
实时性 差 · 取决于轮询间隔 好 · 数据到达即推送
资源消耗 高 · 频繁建连/断连 低 · 单连接持续复用
协议层 HTTP/1.0, /1.1, /2, /3 基于 HTTP/1.1 长连接
浏览器兼容 ✅ 所有浏览器 ✅ IE/Edge 需要 polyfill
双向通信 需要 WebSocket 单向;双向需 + fetch
典型场景 CRUD API、数据查询 实时通知、股价推送、进度条
自动重连 每次手动处理 ✅ 浏览器内置自动重连
⏱️ 时间轴对比:3次数据更新
HTTP 轮询
Req 1
Resp 1
Req 2
Resp 2
Req 3
Resp 3
空闲等待...
SSE 推送
连接
📡 data→
📡 data→
📡 data→ ...

↓ HTTP 需要多次建连,SSE 只需一次连接持续推送 ↓