AI 大模型对话时，它们像“打字机一样一个字一个字往外蹦”的效果，底层几乎都是用 SSE 实现的，那么SSE到底是什么呢？

简单概括：SSE（Server-Sent Events）是一种让服务器主动向浏览器"推送"数据的技术。

1. 问题引入：传统 HTTP 是"一问一答"

我们先看看没有 SSE 时，浏览器和服务器是怎么交流的。传统的 HTTP 通信就像打电话：

浏览器：有新消息吗？
服务器：没有。

（过了 2 秒）
浏览器：有新消息吗？
服务器：没有。

（又过了 2 秒）
浏览器：有新消息吗？
服务器：有！这是你的消息。

这叫轮询（Polling）。浏览器必须不停地问，服务器才能把新数据给它。

问题很明显：

• 大部分请求都是浪费的（服务器说"没有"）
• 延迟高（两次询问之间的消息你收不到）
• 服务器压力大（一堆无意义的请求）

---

2. SSE 的解决方案：服务器主动推

SSE 的思路完全不同，它像订阅报纸：

浏览器：我要订阅消息推送。（建立一个长连接）
服务器：好的，连接已建立。

（有新消息了）
服务器：这是第 1 条消息。

（又有新消息了）
服务器：这是第 2 条消息。

（再有新消息）
服务器：这是第 3 条消息。

浏览器只需要请求一次，之后服务器有新数据就主动推过来，连接一直保持打开。

---

SSE 的核心特点：

1. 单向通道（服务器 -> 客户端）： 数据只能从服务器流向浏览器。如果浏览器想给服务器发数据，得另外发传统的 HTTP 请求。
2. 基于 HTTP 协议： 它用的就是普通的网页协议，不像 WebSocket 用的是特殊的协议。这意味着它对现有的网络架构（防火墙、代理服务器）非常友好，不需要额外配置。
3. 自动重连： 如果网络断了，浏览器会自动尝试重新连接服务器，不用你自己写重连逻辑。
4. 文本为主： SSE 传送的数据主要是纯文本（UTF-8 编码），不能直接传二进制数据（比如图片或视频流，虽然强转可以，但不推荐）。

---

3. 直观例子：ChatGPT 的打字效果

ChatGPT 回答的时候，文字是一个字一个字蹦出来的，而不是等全部生成完才一次性显示。这就是 SSE 的典型应用。

背后的过程是这样的：

你（浏览器）：请解释什么是量子力学。

服务器（通过 SSE 持续推送）：
  data: 量
  data: 子
  data: 力
  data: 学
  data: 是
  data: 一
  data: 门
  data: ...

浏览器每收到一个 data: 片段，就立刻显示在屏幕上，所以你看到了"打字机"效果。

如果没有 SSE，你就得等 AI 把整篇回答全部生成完，才能一次性看到——可能要等好几十秒。

---

4. 技术上它长什么样？

4.1 前端（浏览器端）代码简单：

在浏览器端，原生 JavaScript 就内置了 SSE 的 API，叫 EventSource。用起来极其简单：

// 不需要引入任何库，几行代码就能实现服务器推送。

// 1. 发起一次请求，建立连接
const evtSource = new EventSource("https://example.com/api/notifications");

// 2. 监听服务器推过来的消息
evtSource.onmessage = function(event) {
    const data = event.data;
    console.log("收到服务器推来的消息：", data);
    // 比如把消息显示在网页上
};

// 3. 如果不想接收了，可以主动关闭
// evtSource.close();

4.2 后端（服务器端）返回格式简单：

服务器要做的，就是保持 HTTP 请求不断开，并按照特定格式发送数据。格式非常简单，就是纯文本，每条消息以 data: 开头，以两个换行符 \n\n 结尾：

HTTP/1.1 200 OK
Content-Type: text/event-stream  // 关键：告诉浏览器这是 SSE 流
Cache-Control: no-cache
Connection: keep-alive

data: 这是第一条消息

data: 这是第二条消息

只要服务器保持这个连接不关闭，按照这个格式往外吐数据，浏览器就能实时收到。

---

5. SSE vs WebSocket

说到 SSE，经常会提到 WebSocket。它俩都能做实时通信，区别在哪？

对比项	SSE	WebSocket
通信方向	单向：服务器 → 浏览器	双向：互相发
协议	基于 HTTP	独立协议（ws://）
复杂度	非常简单	相对复杂(需要处理握手、心跳等逻辑)
自动重连	✅ 浏览器内置	❌ 需要自己实现
数据格式	纯文本	文本或二进制
防火墙友好	✅ 走普通 HTTP 端口	⚠️ 可能被拦截
典型场景	通知推送、AI 流式输出、股票行情	聊天室、在线游戏、协同编辑

怎么选？

• 如果只需要服务器推数据给浏览器（单向）→ 用 SSE，更简单
• 如果需要双方互相发消息（双向）→ 用 WebSocket

6. 常见应用场景

场景	说明
AI 对话流式输出	ChatGPT、Claude 等 AI 产品的打字效果
实时通知	网站右上角的未读消息提醒
股票/加密货币行情	价格实时跳动
构建状态	CI/CD 流水线的实时日志输出
新闻/体育比分	实时更新比分或头条
监控仪表盘	服务器 CPU、内存等指标实时刷新

---

7. 总结

SSE 就是服务器通过一个持久的 HTTP 连接，持续不断地往浏览器推送数据的技术。

可以这样类比理解：

技术	比喻
传统 HTTP	你不停打电话问"有快递吗？"
SSE	快递员到了直接按门铃通知你
WebSocket	你和快递员之间开了一条对讲机频道，随时互喊

SSE 最大的优点是简单——基于普通 HTTP，浏览器原生支持，几行代码就能用起来。这也是为什么现在几乎所有 AI 对话产品都在用它来做流式输出。