浏览器客户端

浏览器通过 WebSocket 或 SockJS + STOMP.js 连接实验台。Next.js 页面在 客户端组件 里建立连接（nextjs-essentials）。

学习目标

• 使用原生 WebSocket API 与 STOMP 客户端
• 实现指数退避重连
• 在组件卸载时正确 close()

原生 WebSocket

"use client";
useEffect(() => {
  const ws = new WebSocket(`wss://${location.host}/ws/lab?sessionId=${sessionId}`);
  ws.onmessage = (e) => setMessages((m) => [...m, JSON.parse(e.data)]);
  ws.onclose = () => scheduleReconnect(sessionId);
  return () => ws.close(1000, "unmount");
}, [sessionId]);

wss:// 走 Nginx 443，与页面同源，避免混合内容拦截。

STOMP 客户端

import { Client } from "@stomp/stompjs";

const client = new Client({
  brokerURL: `wss://${location.host}/ws`,
  reconnectDelay: 5000,
  onConnect: () => {
    client.subscribe(`/topic/lab.${sessionId}`, (msg) => {
      /* ... */
    });
  },
});
client.activate();

SockJS 路径：brokerURL 换为 https://.../ws，库自动协商传输层。

重连策略

function scheduleReconnect(sessionId: string, attempt = 0) {
  const delay = Math.min(1000 * 2 ** attempt, 30000);
  setTimeout(() => connect(sessionId, attempt + 1), delay);
}

• 收到 1000 正常关闭 → 不重连
• 1006 / 网络错误 → 退避重连
• 重连后需 重新订阅 所有 topic

与 REST 配合

进入实验间：先 GET /api/lab/sessions/{id} 拉历史消息（REST），再 WS 收增量。见 next-data 的数据获取模式。

练习

• 在 DevTools 里观察断网后重连间隔
• 实现「正在输入」用 /app/chat.typing 广播
• 对比 SockJS 与纯 WS 的 Network 面板差异

小结

客户端 = 连接 + 订阅 + 可恢复。 下一课 Next.js 集成注意点。