当前位置：首页 > news >正文

HTTP2推的是静态资源，SSE推的是数据 - jerry

news 2026/6/12 23:46:33

SSE 是通信“模式”，HTTP/2 是传输“协议版本”
SSE 可以跑在 HTTP/1.1 上，也可以跑在 HTTP/2 上

一、用途一句话对照（先记住）

能力	HTTP/2 服务器推送	SSE
用来做什么	提前推资源，加快加载	持续推业务数据
推送频率	一次性	连续 / 实时
数据类型	JS / CSS / 字体	JSON / 文本 / 事件
是否实时	❌	✅
当前是否推荐	❌（已弃用）	✅（仍在大量使用）

二、HTTP/2「服务器推送」——只做一件事

页面加载性能优化

典型用途

让浏览器更快拿到“马上就会用到的资源”

✅ 合适的业务例子

📌 例子 1：首屏资源预推（历史用法）

客户端请求：
GET /index.html服务器主动推送：
/main.css
/runtime.js
/vendor.js

👉 理论上减少 RTT，加快首屏

📌 例子 2：后台系统固定依赖

/dashboard.html├── dashboard.css├── chart.js└── theme.css

服务器在返回 HTML 时顺带推送这些资源。

❌ 不适合的场景

推送业务数据（订单、消息、状态）
实时更新
聊天、日志、通知

👉 这不是它的设计目标

⚠️ 现状提醒（很重要）

Chrome / Edge 默认关闭
HTTP/3 已移除
实际项目 不建议再用

三、SSE（Server-Sent Events）——真正的“服务器推数据”

服务器有新数据，就主动告诉客户端

四、SSE 的真实业务用途 + 例子（重点）

✅ 例子 1：AI / 大模型流式输出（最典型）

用户提问
服务器边生成边推送："你""你可以""你可以这样做..."

📌 为什么用 SSE？

单向输出
流式体验好
实现简单

✅ 例子 2：后台任务进度条

导入数据中...
10%
25%
60%
100%

data: {"progress": 60}

👉 比轮询优雅太多

✅ 例子 3：实时日志 / 构建日志

[10:01] compiling...
[10:02] success

CI/CD 控制台
云函数执行日志
容器日志

✅ 例子 4：订单 / 状态通知

订单已支付
订单已发货
订单已完成

📌 特点：

不需要客户端发消息
只关心服务器变化

✅ 例子 5：金融 / 行情简化推送

BTC: 43210
BTC: 43250
BTC: 43190

⚠️ 高频场景建议 WebSocket，但低频更新 SSE 很合适

五、SSE 用法最小示例（直观）

前端

const es = new EventSource('/events');es.onmessage = (e) => {console.log('收到:', e.data);
};

Node 服务端

app.get('/events', (req, res) => {res.setHeader('Content-Type', 'text/event-stream');res.setHeader('Cache-Control', 'no-cache');res.setHeader('Connection', 'keep-alive');const timer = setInterval(() => {res.write(`data: ${Date.now()}\n\n`);}, 1000);req.on('close', () => clearInterval(timer));
});