综合练习

搭建 实验台简易聊天室：REST 创建会话 + STOMP 实时消息 + Next.js 客户端 + Nginx 反代。整合本 track 与 spring-boot-essentials、nextjs-essentials、nginx-essentials。

学习目标

• 端到端打通 CodeRoadMap 风格实时实验台
• 区分持久化（REST/MySQL）与在线推送（WS）
• 可选：Redis 在线人数（redis-pubsub）

任务清单

1. Backend（Spring Boot）

• POST /api/lab/sessions 创建实验间，返回 sessionId
• GET /api/lab/sessions/{id}/messages 历史消息（分页）
• STOMP：/app/chat.send → @SendTo("/topic/lab.{sessionId}")（ws-stomp）
• ws-auth：HandshakeInterceptor 写入 userId

// 消息入库仍走 Service，WS 只触发 save + 广播
@MessageMapping("/chat.send")
@SendTo("/topic/lab.{sessionId}")
public ChatMessage send(ChatMessage msg) {
    return labChatService.saveAndReturn(msg);
}

2. Platform（Next.js）

• Server Component 拉 session + 历史（next-data）
• Client Component LabChat：@stomp/stompjs 订阅 + 发送（ws-client）
• 断线重连与「连接中」状态 UI

3. Nginx

• /api/ → backend REST；/ws → backend WS（ws-nginx）
• proxy_read_timeout ≥ 3600s

4. 验收

• 两个浏览器窗口同 sessionId 互发消息实时可见
• 刷新后 REST 拉取历史，WS 收新消息
• 未登录握手 403；错误 Origin 被拒绝

扩展（可选）

• Redis 记录在线人数，REST GET .../presence 展示
• 双 backend 实例 + ip_hash 或 StompBrokerRelay（ws-scale）
• 通知条用 SSE（ws-sse）与聊天 WS 并存

小结

REST 存、WS 推、Nginx 通、Next 展示 = CodeRoadMap 实时实验台闭环。 websockets-essentials 完结；深入安全见 sb-security，缓存见 redis-essentials。