本文由宅小年分享，感谢原作者，下文有修订和重新排版。

1、引言     

你有没有想过，为什么 ChatGPT 能够像人类聊天一样，一个字一个字地"蹦"出来回答你的问题？为什么股票软件能够实时更新价格，而不需要你疯狂刷新页面？

答案就藏在今天我们要聊的技术里——SSE（Server-Sent Events）!

本文将带你快速认识 SSE 实时通信协议，包括它的技术原理、常见使用场景、与同类技术的对比以及简单的示例代码等。

2、AI 大模型实时通信技术专题

技术专题系列文章目录如下，本文是第 4 篇：

《全民 AI 时代，大模型客户端和服务端的实时通信到底用什么协议？》

《大模型时代多模型 AI 网关的架构设计与实现》

《通俗易懂：AI 大模型基于 SSE 的实时流式响应技术原理和实践示例》

《ChatGPT 如何实现聊天一样的实时交互？快速读懂 SSE 实时“推”技术 》（☜ 本文）

《AI 大模型时代爆火的 SSE 技术到底是什么？一文读懂 SSE 技术的方方面面（下期发布！）》

3、什么是 SSE？

我们用一个饭店的比喻来解释：

1）轮询：你点了菜之后，每隔一会儿就跑去问服务员：“我的菜好了没？”

2）SSE：你点了菜，安心坐着。饭做好了，服务员主动来告诉你：“上菜啦！”

3）WebSocket：你和服务员之间装了个对讲机，随时可以互相说话；

4）SSE（Server-Sent Events）：一种基于 HTTP 的单向通信协议，允许服务器主动向浏览器推送数据。它就像一根从服务器连到浏览器的“数据水管”，打开后服务器可以随时通过这根管子“浇水”（推送数据）。

SSE 核心技术特点：

1）单向通信：服务器 → 浏览器（像广播电台）

2）基于 HTTP：无需特殊协议

3）自动重连：网络中断会自动恢复

4）轻量级：原生浏览器支持，无需额外库

5）低延迟：数据实时到达（毫秒级）。

4、SSE 与其他实时通信技术的对比

我们来看一张直观的对比表：

场景选择指南：

1）选 SSE：当只需要服务器单向推送时（如新闻推送、监控仪表盘），SSE 是最简单省事的选择。

2）选 WebSocket：需要双向实时通信（如在线游戏），那就请 WebSocket 登场。

3）选轮询/长轮询：如果只是偶尔有数据变化，使用轮询也许更简单粗暴。

精妙比喻：

1）SSE 像收音机（只能接收信号）

2）WebSocket 像电话（双向通话）

3）轮询 像不断翻信箱查信

4）长轮询 像守在信箱旁等邮差

关于 SSE 跟其它 Web 端实时通信技术的详细介绍，可以深入学习以下文章：

Web 端即时通讯技术盘点：短轮询、Comet、Websocket、SSE

使用 WebSocket 和 SSE 技术实现 Web 端消息推送

详解 Web 端通信方式的演进：从 Ajax、JSONP 到 SSE、Websocket

使用 WebSocket 和 SSE 技术实现 Web 端消息推送

一文读懂前端技术演进：盘点 Web 前端 20 年的技术变迁史

网页端 IM 通信技术快速入门：短轮询、长轮询、SSE、WebSocket

搞懂现代 Web 端即时通讯技术一文就够：WebSocket、socket.io、SSE

5、SSE 技术原理

我们用一个图来简单描绘 SSE 的工作过程：

关键要素解析

1）HTTP 请求头：客户端发送 Accept: text/event-stream 告诉服务器"我要接收事件流"

2）响应格式：服务器返回 Content-Type: text/event-stream，然后持续发送数据

3）事件格式：每个事件以 data: 内容\n\n 结束，两个换行符表示事件结束

4）自动重连：连接断开后，浏览器会自动发起新的连接请求

6、SSE 的常见应用场景

SSE 已经在很多产品中落地，以下是几个典型场景.

ChatGPT 的回答显示机制：

ChatGPT 在回答你问题时，是一句一句“打字式”输出的，没错！就是用了 SSE 来流式传输生成的内容。

后台系统消息提醒，比如：

1）有新的订单；

2）用户提交了新评论；

3）后台工单更新了状态。

4）这些提醒都可以用 SSE 来实时推送。

实时数据面板：

1）股票价格变动

2）区块链交易动态

3）设备温湿度更新

4）只需要后端每隔几秒推送一次，前端就能不断展示最新数据。

7、示例代码（前端+后端）前端代码（浏览器 JS）：

<script>

const eventSource = new EventSource('/sse/stream');

eventSource.onmessage = function(event) {

console.log('收到消息：', event.data);
// 可更新到页面上

};

eventSource.onerror = function(err) {

console.error('连接出错', err);
// 可以展示连接断开的提示

};

</script>

后端代码示例（Java，使用 Spring Boot 示例）：

@RestController

publicclass SseController {

privatestaticfinal Map<string, sseemitter=""> emitters = new ConcurrentHashMap<>();


// 浏览器连接入口
@GetMapping("/sse-connect")
public SseEmitter connect(@RequestParam String userId) {
    SseEmitter emitter = new SseEmitter(30 * 60 * 1000L); // 30分钟超时
    emitters.put(userId, emitter);


    // 发送欢迎消息
    try {
        emitter.send(SseEmitter.event()
                .name("welcome")
                .data("&#127881; 连接成功！欢迎使用 SSE 服务"));
    } catch (IOException e) {
        System.err.println("发送欢迎消息失败: " + e.getMessage());
    }


    emitter.onCompletion(() -> emitters.remove(userId));
    emitter.onTimeout(() -> emitters.remove(userId));


    return emitter;
}


// 模拟推送服务
@Scheduled(fixedRate = 2000)
public void pushData() {
    emitters.forEach((userId, emitter) -> {
        try {
            String json = String.format(
                    "{\"time\": \"%s\", \"value\": %.2f}",
                    LocalTime.now(), Math.random() * 100
            );


            // 构建符合SSE格式的消息
            emitter.send(SseEmitter.event()
                    .id(UUID.randomUUID().toString())
                    .name("system-metrics")
                    .data(json));
        } catch (IOException e) {
            emitters.remove(userId);
        }
    });
}

}

curl --location 'localhost:18500/sse-connect?userId=1' \

--header 'Key: Accept' \

--header 'Value: text/event-stream'

8、本文小结

SSE 就像一个贴心的"消息推送员"，让服务器能够主动把最新消息送到你面前，而不需要你频繁地去"敲门询问"。它简单易用，特别适合那些需要服务器主动推送数据的场景。

虽然 SSE 没有 WebSocket 那么"全能"（不能双向通信），但正是这种专一性让它在特定场景下变得格外实用。就像专门的快递员虽然只负责送货，但在送货这件事上做得特别专业一样。

如果你正在开发一个需要实时推送但通信不需要太复杂的应用，SSE 是一个轻量又可靠的选择，特别适合现代网页、后台系统、数据展示等场景。（本文已同步发布于：http://www.52im.net/thread-4872-1-1.html）

写在最后：Web 开发永远不止一种解决方案。选择最合适的技术，而不是最“酷”的技术，才是工程师的智慧体现。

9、参考资料

[1] Web 端即时通讯技术盘点：短轮询、Comet、Websocket、SSE

[2] SSE 技术详解：一种全新的 HTML5 服务器推送事件技术

[3] 使用 WebSocket 和 SSE 技术实现 Web 端消息推送

[4] 详解 Web 端通信方式的演进：从 Ajax、JSONP 到 SSE、Websocket

[5] 使用 WebSocket 和 SSE 技术实现 Web 端消息推送

[6] 一文读懂前端技术演进：盘点 Web 前端 20 年的技术变迁史

[7] WebSocket 从入门到精通，半小时就够！

[8] 网页端 IM 通信技术快速入门：短轮询、长轮询、SSE、WebSocket

[9] 搞懂现代 Web 端即时通讯技术一文就够：WebSocket、socket.io、SSE

[10] 大模型时代多模型 AI 网关的架构设计与实现

[11] 全民 AI 时代，大模型客户端和服务端的实时通信到底用什么协议？

[12] 通俗易懂：AI 大模型基于 SSE 的实时流式响应技术原理和实践示例

[13] Web 端实时通信技术 SSE 在携程机票业务中的实践应用