📡 HTTP-Native Server Push Technology

什么是 SSE（服务器发送事件）？

为什么 ChatGPT 吐字打字机效果、股票行情盯盘都不用复杂的 WebSocket，而全选 SSE？用“单向广播收音机”看懂最优雅、最轻量的标准 HTTP 服务端流式推送！

传统轮询 (Polling)

🚪👦 疯狂敲门熊孩子

每隔 1 秒敲一次门问：“好了没？好了没？好了没？”。99% 的网络请求都是白跑一趟（空载），不仅巨消耗服务器带宽与电池，延迟还奇高。

SSE (Server-Sent Events)

📻📡 单向广播收音机

浏览器只要听，服务端一直播！ 客户端只发送一次普通 HTTP 请求，连接保持打开，服务端像水龙头一样源源不断单向推送文本流。

WebSocket (全双工双向)

📞🔄 24小时双向实时通话

专门升级为独立的 TCP 全双工通道。双方可以随时同时互相通话。非常强大，但在只需要服务器单向推送的场景下显得杀鸡用牛刀。

5岁核心顿悟：为什么大模型时代所有 AI 问答都钦定 SSE？

• 像老师给学生听写课文 👨‍🏫✍️：
• 当你向 ChatGPT 提问时，你的问题在第一秒钟就已经完整发送完毕了。在接下来的几十秒里，你根本不需要再往服务端发任何东西，你只需要坐在屏幕前，看着 AI 像打字机一样一个词一个词地往你的屏幕上“吐”！
• 这种“客户端问一次，服务端单向连续吐几百次”的模式，简直就是为 SSE（Server-Sent Events）量身定做的！SSE 走的是最朴素标准的 HTTP 协议，完美穿透公司防火墙、天然走 CDN 缓存、浏览器自带断线重连，开发只要几行代码！

SSE 傲视群雄的三大核心绝技

极简主义哲学如何在大模型时代大放异彩

🌐

1. 纯正 HTTP 基因，零网络阻碍

不需要像 WebSocket 一样进行复杂的 Protocol Upgrade（协议升级握手）。它就是一条标准的 HTTP/1.1 或 HTTP/2 请求！企业内网防火墙、反向代理（Nginx、Cloudflare）100% 顺畅放行。

🔌

2. 浏览器原生内置，自带断线重连

JavaScript 提供了原生的 EventSource API。如果网络突然晃动闪退断开，浏览器会在后台默默自动发起重新连接，并带上上次接收到的 Last-Event-ID 自动续接，无需手写心跳重试逻辑！

🪶

3. 极简可读纯文本协议

数据格式极其通俗透明：仅仅是多行 data: xxx\n\n 纯文本。任何后端语言（Python、Go、Node.js）只需要往响应体里 print() 几行文字并刷新缓冲区（flush），开发成本几乎为零！

🔬 SSE 报文与浏览器调用实战解剖

仅需标准的 Content-Type 与极简的换行语法，即可驱动实时流式传输：

服务端发送的 HTTP 响应体 (Wire Format)
HTTP/1.1 200 OK
Content-Type:text/event-stream
Cache-Control:no-cache
Connection:keep-alive

# 事件 1: 发送消息与 ID
id: 1
data:{"token": "人"}

# 事件 2: 紧接着吐出下一个词
id: 2
data:{"token": "工"}

# 双换行 \n\n 代表一个事件推送结束！

前端原生 JavaScript 消费极简代码
// 1. 建立 SSE 连接通道
const source = new EventSource('/api/chat-stream');

// 2. 每当服务端吐出新 Token 时触发

          source.onmessage = (event) => {
const payload = JSON.parse(event.data);

            renderToScreen(payload.token);

          };

// 3. 监听错误或关闭

          source.onerror = () => {

            console.log("流式输出结束或网络重连中...");

          };

🎮 交互模拟器：亲身体验 SSE 实时流式打字过程

点击下方按钮，观察服务器如何通过 text/event-stream 数据块一个一个向前端推进文字：

[系统空闲] 点击上方“启动 SSE 流式模拟传输”开始监听服务器数据包...