CodeRoadMap
首页路线题库资源库文章社区
CodeRoadMap

程序员的学习成长路线图。内容免费开放,登录后可同步路线图与课时进度。

由 程序员柏风 独立维护 · 关于作者

学习

  • 路线图
  • 课程
  • 面试题
  • 文章
  • 我

更多

  • 资源
  • 社区
  • 关于作者
  • 内容说明

© 2026 CodeRoadMap

津ICP备2026012044号-1·津公网安备12011002026155号·coderoadmap@126.com
WebSocket 实时通信/课时/SSE 对照
RawBlame
课时目录12 节

WebSocket 实时通信

  1. 01WebSocket 是什么
  2. 02协议与握手
  3. 03Spring WebSocket
  4. 04STOMP 消息
  5. 05浏览器客户端
  6. 06Next.js 与 WebSocket
  7. 07鉴权与安全
  8. 08水平扩展
  9. 09SSE 对照
  10. 10Nginx 反代升级
  11. 11测试与调试
  12. 12综合练习

SSE 对照

Server-Sent Events 单向推送选型。

25 分钟

SSE 对照

Server-Sent Events(SSE) 是 HTTP 长连接上的 单向 服务端推送。CodeRoadMap 通知条、进度条等「只读实时」可考虑 SSE;聊天、协作编辑仍用 WebSocket。

学习目标

  • 理解 SSE 与 WebSocket 的能力边界
  • 用 Spring SseEmitter 或 MVC 流式响应
  • 在浏览器用 EventSource 消费

对比

SSEWebSocket
方向服务端 → 客户端双向
协议普通 HTTPUpgrade
自动重连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 选型表,给「作业批改完成提示」选型

小结

SSE = 简单单向流;WS = 双向实时。 下一课 Nginx 反代 Upgrade。

加载本节练习…
← 上一课水平扩展下一课 →Nginx 反代升级