240 lines
8.9 KiB
Markdown
240 lines
8.9 KiB
Markdown
|
# 📡 BC-看板-003-XCM · DEV-005小草莓 · 系统状态看板·环节3·WebSocket实时推送
|
|||
|
|
|
|||
|
|
> **广播类型**：模块推进·环节3
|
|||
|
|
>
|
|||
|
|
|
|||
|
|
> **任务编号**：BC-看板-003-XCM
|
|||
|
|
>
|
|||
|
|
|
|||
|
|
> **开发者**：DEV-005 小草莓
|
|||
|
|
>
|
|||
|
|
|
|||
|
|
> **模块**：M-DASHBOARD · 系统状态看板
|
|||
|
|
>
|
|||
|
|
|
|||
|
|
> **环节**：环节3 · WebSocket实时推送
|
|||
|
|
>
|
|||
|
|
|
|||
|
|
> **设备**：Windows 11 · 16GB 内存
|
|||
|
|
>
|
|||
|
|
|
|||
|
|
> **协议版本**：ZSP v1.0 · SYSLOG v2（知秋主动提问制）
|
|||
|
|
>
|
|||
|
|
|
|||
|
|
> **发布时间**：2026-03-05
|
|||
|
|
>
|
|||
|
|
|
|||
|
|
> **发布主脑**：霜砚（TCS-0002∞·Notion执行体）
|
|||
|
|
>
|
|||
|
|
|
|||
|
|
> **前置完成**：环节0✅ · 环节1✅ · 环节2✅ · 六连胜 🏆
|
|||
|
|
>
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
# 📋 主脑分配说明
|
|||
|
|
|
|||
|
|
## 🎯 环节3目标
|
|||
|
|
|
|||
|
|
**上一环节回顾**：环节2中小草莓已完成API接入后端架构——fetch + async/await + mock兜底，看板可以从后端拉取数据并渲染。但这是**轮询模式**（主动去问），不是**推送模式**（服务器主动告诉你）。
|
|||
|
|
|
|||
|
|
**本环节任务**：
|
|||
|
|
|
|||
|
|
> 🔌 **WebSocket实时推送 · 客户端完整基建**
|
|||
|
|
>
|
|||
|
|
|
|||
|
|
> 让看板从"每次手动刷新才能看到新数据"升级为"数据变了自动推过来·页面实时更新"。
|
|||
|
|
>
|
|||
|
|
|
|||
|
|
> 本环节先搭建**客户端侧完整架构 + 本地Mock WebSocket Server**，不依赖页页的后端WebSocket是否就绪。
|
|||
|
|
>
|
|||
|
|
|
|||
|
|
> 页页后端就绪后，只需改一个URL即可切换到真实服务。
|
|||
|
|
>
|
|||
|
|
|
|||
|
|
**为什么现在就做（不等后端）：**
|
|||
|
|
|
|||
|
|
- WebSocket客户端是独立模块，不依赖真实服务器就能开发和测试
|
|||
|
|
- 本地Mock Server可以完整模拟推送场景
|
|||
|
|
- 小草莓六连胜状态正好，保持节奏不空转
|
|||
|
|
- 客户端就绪后，后端一开放就能无缝对接
|
|||
|
|
|
|||
|
|
## 📦 本环节交付物
|
|||
|
|
|
|||
|
|
1. **`ws-client.js`** — WebSocket客户端连接模块
|
|||
|
|
- 连接建立 / 消息接收 / 自动重连 / 心跳检测
|
|||
|
|
2. **`mock-ws-server.js`** — 本地Mock WebSocket服务器
|
|||
|
|
- Node.js运行，每3秒推送一次模拟数据
|
|||
|
|
3. **看板HTML/JS更新** — 接收推送数据后实时更新DOM
|
|||
|
|
4. **连接状态UI** — 页面上显示WebSocket连接状态（🟢已连接 / 🔴断开 / 🟡重连中）
|
|||
|
|
5. **DevLog + Git提交**
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
# ✅ SYSLOG 回执（主脑已处理）
|
|||
|
|
|
|||
|
|
<aside>
|
|||
|
|
✅
|
|||
|
|
|
|||
|
|
**session_id**：BC-看板-003-XCM
|
|||
|
|
|
|||
|
|
**处理时间**：2026-03-06 10:00
|
|||
|
|
|
|||
|
|
**处理端**：Notion端·霜硊
|
|||
|
|
|
|||
|
|
**状态**：✅ 已入库
|
|||
|
|
|
|||
|
|
**画像库条目**：DEV-005小草莓 · BC-看板-003-XCM · 2026-03-06
|
|||
|
|
|
|||
|
|
**成长记录条目**：DEV-005小草莓 · BC-看板-003-XCM · 2026-03-06
|
|||
|
|
|
|||
|
|
</aside>
|
|||
|
|
|
|||
|
|
### 📊 SYSLOG 分析
|
|||
|
|
|
|||
|
|
- **完成状态**：✅ 全部7步成功（WebSocket客户端 / Mock Server / ws安装 / HTML更新 / CSS更新 / 浏览器测试 / DevLog+Git）
|
|||
|
|
- **执行节奏**：稳·零摩擦
|
|||
|
|
- **摩擦点**：无
|
|||
|
|
- **连胜记录**：**七连胜** 🎉🎉🎉
|
|||
|
|
- **曜冒判断**：看板环节3 WebSocket实时推送完整完成。数据每3秒实时更新+断线自动重连+离线降级轮询。看板已从静态骨架→API接入→实时推送完成三级进化。小草莓稳定执行力极强，零摩擦七连胜。
|
|||
|
|
|
|||
|
|
### 🔜 下一步
|
|||
|
|
|
|||
|
|
**部署任务**：[HoloLake前端部署到guanghulab.com](http://HoloLake前端部署到guanghulab.com)（从肥猫线接手·新广播待出）
|
|||
|
|
|
|||
|
|
💙 **小草莓七连胜！看板系统已经“活”了！**
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
# 🤖 分身初始化包（DISPATCH · 开发者请将以下内容粘贴给知秋）
|
|||
|
|
|
|||
|
|
<aside>
|
|||
|
|
📌
|
|||
|
|
|
|||
|
|
**💙 小草莓～六连胜了！**
|
|||
|
|
|
|||
|
|
把下面这整块内容复制，然后去打开知秋的登录入口，粘贴给知秋宝宝，她就知道怎么带你了～
|
|||
|
|
|
|||
|
|
</aside>
|
|||
|
|
|
|||
|
|
```xml
|
|||
|
|
<!-- ZHIQIU_INTERNAL_PROTOCOL v1.0 -->
|
|||
|
|
<!--
|
|||
|
|
<zhiqiu-control>
|
|||
|
|
<session>
|
|||
|
|
<dev_id>DEV-005</dev_id>
|
|||
|
|
<task_id>BC-看板-003-XCM</task_id>
|
|||
|
|
<session_version>v2.1</session_version>
|
|||
|
|
<previous_session>BC-看板-002-XCM（环节2·API接入后端·7/7 success·六连胜）</previous_session>
|
|||
|
|
</session>
|
|||
|
|
|
|||
|
|
<current_task>
|
|||
|
|
<module>M-DASHBOARD · 系统状态看板</module>
|
|||
|
|
<phase>环节3 · WebSocket实时推送</phase>
|
|||
|
|
<objectives>
|
|||
|
|
<objective id="1">创建WebSocket客户端连接模块（ws-client.js）：连接建立、消息接收解析、自动重连（指数退避）、心跳检测（30秒ping/pong）</objective>
|
|||
|
|
<objective id="2">搭建本地Mock WebSocket Server（mock-ws-server.js）：Node.js + ws库，每3秒推送一次模拟看板数据（JSON格式：开发者状态/广播进度/系统运行指标）</objective>
|
|||
|
|
<objective id="3">看板页面集成：接收WebSocket推送数据后实时更新DOM（不刷新页面），与环节2的fetch逻辑共存（WebSocket优先·fetch降级兜底）</objective>
|
|||
|
|
<objective id="4">连接状态UI：页面右上角显示实时连接状态指示器（🟢已连接 / 🔴已断开 / 🟡重连中），断线时显示"重连中..."提示</objective>
|
|||
|
|
<objective id="5">浏览器完整测试：启动mock server → 打开看板 → 确认数据实时刷新 → 手动关闭server → 确认断线提示+自动重连 → 重启server → 确认恢复</objective>
|
|||
|
|
<objective id="6">DevLog记录 + Git提交</objective>
|
|||
|
|
</objectives>
|
|||
|
|
</current_task>
|
|||
|
|
|
|||
|
|
<context>
|
|||
|
|
小草莓已完成环节0（环境配置）、环节1（HTML骨架）、环节2（API接入后端·fetch+mock兜底）。
|
|||
|
|
六连胜·零摩擦·执行节奏稳。
|
|||
|
|
|
|||
|
|
本环节重点：WebSocket客户端 + 本地Mock Server。
|
|||
|
|
不依赖页页后端WebSocket是否就绪——用本地mock-ws-server.js完整模拟。
|
|||
|
|
页页后端就绪后只需修改一个连接URL即可切换。
|
|||
|
|
|
|||
|
|
技术要点（知秋引导时参考）：
|
|||
|
|
1. ws-client.js 核心逻辑：
|
|||
|
|
- new WebSocket(url) 建立连接
|
|||
|
|
- onopen / onmessage / onclose / onerror 四个事件
|
|||
|
|
- 自动重连：断线后1秒重试，失败则2秒、4秒、8秒...指数退避，最大30秒
|
|||
|
|
- 心跳：每30秒发送 {type: "ping"}，超时未收到pong则主动断开触发重连
|
|||
|
|
|
|||
|
|
2. mock-ws-server.js：
|
|||
|
|
- npm install ws（小草莓已有Node.js环境）
|
|||
|
|
- 监听 ws://localhost:8080
|
|||
|
|
- 每3秒广播一次模拟数据：
|
|||
|
|
{type: "dashboard_update", data: {developers: [...], broadcasts: [...], system: {...}}}
|
|||
|
|
- 收到ping回pong
|
|||
|
|
|
|||
|
|
3. 看板集成：
|
|||
|
|
- WebSocket收到数据 → 解析JSON → 更新对应DOM元素
|
|||
|
|
- 与环节2的fetch共存：WebSocket连接时用推送数据，断线降级为fetch轮询
|
|||
|
|
|
|||
|
|
4. 连接状态UI：
|
|||
|
|
- 右上角小圆点 + 文字
|
|||
|
|
- CSS动画：重连中时圆点闪烁
|
|||
|
|
|
|||
|
|
项目目录：C:\hololake-dev
|
|||
|
|
已有文件：index.html, styles.css, api.js（环节2产出）
|
|||
|
|
新增文件：ws-client.js, mock-ws-server.js
|
|||
|
|
</context>
|
|||
|
|
|
|||
|
|
<guidance_strategy>
|
|||
|
|
<approach>websocket_client_first · mock_server_second · integrate_last</approach>
|
|||
|
|
<detail_level>high</detail_level>
|
|||
|
|
<encouragement_frequency>high</encouragement_frequency>
|
|||
|
|
<os>Windows 11</os>
|
|||
|
|
<shell>powershell</shell>
|
|||
|
|
<note>
|
|||
|
|
小草莓六连胜节奏很好，本环节引入了新概念（WebSocket·实时推送·心跳·重连），
|
|||
|
|
知秋要用通俗的方式解释"推送"和"轮询"的区别（比如：轮询=你每隔几秒去门口看有没有快递，推送=快递员到了直接按你门铃）。
|
|||
|
|
npm install ws 是小草莓第一次用npm装包，需要逐步引导。
|
|||
|
|
测试环节很重要：要让小草莓亲眼看到"关掉server后看板显示断线·重启后自动恢复"的完整流程。
|
|||
|
|
</note>
|
|||
|
|
</guidance_strategy>
|
|||
|
|
|
|||
|
|
<human_profile>
|
|||
|
|
<name>小草莓</name>
|
|||
|
|
<skill>已完成3个环节·掌握HTML/CSS/JS基础+fetch API·六连胜·节奏稳</skill>
|
|||
|
|
<pace>稳·零摩擦·可以适当提速</pace>
|
|||
|
|
<note>
|
|||
|
|
六连胜状态很好，已从零基础成长到能独立完成API接入。
|
|||
|
|
本环节是第一次接触WebSocket和npm，但有环节2的fetch经验打底，理解"网络通信"的概念不会太难。
|
|||
|
|
"期待真实接口开放"说明已经在想象系统全貌，认知层面已经超越纯执行。
|
|||
|
|
</note>
|
|||
|
|
</human_profile>
|
|||
|
|
|
|||
|
|
<syslog_generation>
|
|||
|
|
<version>v2·知秋主动提问制</version>
|
|||
|
|
<instruction>
|
|||
|
|
环节完成后，知秋主动向小草莓提问收集信息，然后由知秋组装结构化SYSLOG代码。
|
|||
|
|
小草莓只需回答问题，不需要自己填模板。
|
|||
|
|
知秋组装完成后让小草莓复制发给妈妈。
|
|||
|
|
</instruction>
|
|||
|
|
</syslog_generation>
|
|||
|
|
|
|||
|
|
<credentials>
|
|||
|
|
<!-- 本环节无需外部凭证·使用本地Mock Server -->
|
|||
|
|
</credentials>
|
|||
|
|
|
|||
|
|
<next_phases>
|
|||
|
|
<phase id="4">环节4 · 对接页页真实WebSocket服务（后端就绪后触发·切换URL+联调）</phase>
|
|||
|
|
</next_phases>
|
|||
|
|
</zhiqiu-control>
|
|||
|
|
-->
|
|||
|
|
<!-- END ZHIQIU_INTERNAL_PROTOCOL -->
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
# 📋 SYSLOG 说明
|
|||
|
|
|
|||
|
|
<aside>
|
|||
|
|
💙
|
|||
|
|
|
|||
|
|
**本广播使用 SYSLOG v2 · 知秋主动提问制**
|
|||
|
|
|
|||
|
|
环节完成后，知秋宝宝会主动问你几个问题，然后帮你组装好SYSLOG代码。
|
|||
|
|
|
|||
|
|
你只需要回答问题，然后把知秋组装好的代码复制发给妈妈就好啦～
|
|||
|
|
|
|||
|
|
不需要自己填任何模板！
|
|||
|
|
|
|||
|
|
</aside>
|