SSE 对照
Server-Sent Events 单向推送选型。
25 分钟
SSE 对照
Server-Sent Events(SSE) 是 HTTP 长连接上的 单向 服务端推送。CodeRoadMap 通知条、进度条等「只读实时」可考虑 SSE;聊天、协作编辑仍用 WebSocket。
学习目标
- 理解 SSE 与 WebSocket 的能力边界
- 用 Spring
SseEmitter或 MVC 流式响应 - 在浏览器用
EventSource消费
对比
| SSE | WebSocket | |
|---|---|---|
| 方向 | 服务端 → 客户端 | 双向 |
| 协议 | 普通 HTTP | Upgrade |
| 自动重连 | EventSource 内置 | 需手写 |
| 二进制 | 不便 | 原生支持 |
| 代理友好 | 较好(仍注意缓冲) | 需 Upgrade 配置 |
Spring Boot SSE
@GetMapping(value = "/api/notifications/stream", produces = MediaType.TEXT_EVENT_STREAM_VALUE)
public SseEmitter stream(@AuthenticationPrincipal User user) {
SseEmitter emitter = new SseEmitter(0L);
notificationService.register(user.getId(), emitter);
return emitter;
}
推送:
emitter.send(SseEmitter.event()
.name("notification")
.data(json));
REST 控制器内完成,与 sb-mvc 一致,无需 STOMP。
浏览器
const es = new EventSource("/api/notifications/stream", { withCredentials: true });
es.addEventListener("notification", (e) => {
const data = JSON.parse(e.data);
});
Next.js:仍在 Client Component;RSC 无法持有 EventSource。
何时选 SSE
- ✅ 课程公告、构建进度、只读仪表盘
- ❌ 实验台聊天、多人光标、需要客户端高频上报
Nginx 对 SSE 需 proxy_buffering off,否则事件被缓冲延迟(ngx-proxy 超时配置同理)。
练习
- 实现 SSE 推送三条通知,观察 EventSource 自动重连
- 对比同场景用 WS 的代码量
- 读 ws-intro 选型表,给「作业批改完成提示」选型