由 pnpm docs:lessons 生成。教学脚本在 src/data/network-state.json，合同补充在 scripts/generate-network-state.mjs。本页含教师参考答案。
理解 WebSocket、SSE 与消息状态。先修按 完整目录 的章节关系；基础操作、原理关系随本课讲解。
连接、事件类型、消息解析与界面更新是独立环节。
SSE 是服务端到客户端事件流，event 字段决定事件类型
WebSocket 是双向消息；握手 101 只证明升级成功
检查 Messages / EventStream 中实际 payload，再检查处理分支
对比轮询和持续连接时间线。模型不改变真实浏览器设置，不计为实战完成。
- 先预测一个条件变化的结果。
- 只改变一个条件，比较输入与输出。
- 将模型中的关系对应到真实 DevTools。
症状：库存消息持续到达，页面仍显示旧值。
正常结果：SSE 或 WebSocket 消息中的 stock=3 更新到页面。
真实机制：SSE 自定义 inventory 事件；WebSocket 握手 101 与两条 JSON 消息。
- 从本课准备并打开独立商城；先打开 DevTools，再运行故障。
- 在 Network 分别筛选 EventStream 或 WS，查看连接状态和逐条消息。
- 本课两种配置分别使用真实 SSE 与 WebSocket；比较事件名、字段和页面值。
- 等待完整消息后再检查，关闭连接并重跑，区分连接故障和处理故障。
- 先保存证据，再应用针对性的对照；错误对照不会通过页面检查。
- 回到教程选择真实证据，完成独立挑战后写下排查与恢复步骤。
区分连接、消息、解析和界面错误。新会话改变输入与故障配置，可能再次抽到同一类型；按实际证据判断。
| 配置 | 原因 | 证据 | 修复/验证 |
|---|---|---|---|
| 配置1 | SSE 客户端监听了错误的事件类型 | EventStream 中 event=inventory，onmessage 没有处理它 | 监听 inventory 自定义事件并解析 data |
| 配置2 | WebSocket 客户端读取了错误字段 | Messages 有 stock，处理函数却读取 inventory | 读取真实 stock 字段并更新页面 |
| 干扰项 | 只凭界面颜色判断 | 没有对应请求或存储证据 | 同时改变全部条件且不复测 |
- 先区分实际请求、浏览器策略、存储与界面处理，记录第一次偏离的环节。
- 在 Network 分别筛选 EventStream 或 WS，查看连接状态和逐条消息。
- 比较两个候选解释：SSE 客户端监听了错误的事件类型；WebSocket 客户端读取了错误字段。保持其他输入一致再验证。
流连接在两条消息或上限等待后关闭，pagehide 也清理；不把连接成功当成处理成功。
清理与会话约定见 共同合同。请在复盘写下条件、观察对象、实际值、根因、最小修改与恢复设置；将 HTTP 缓存、Cache Storage、内存状态分开。