QoderWake 实现静态页面自动刷新需配置实时同步服务，包括：一、VSCode+Live Server插件本地托管并关联QoderWake任务；二、QoderWake沙盒内嵌live-server服务；三、反向代理将Live Server事件接入QoderWake事件总线。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
如果您在使用 QoderWake 进行静态页面开发时，期望实现 HTML、CSS、JS 文件修改后浏览器自动刷新预览，但当前仍需手动刷新，则可能是未正确集成或启用 Live Server 类型的实时同步服务。以下是为 QoderWake 环境配置静态页面实时同步的多种可行路径：
一、通过 VSCode + Live Server 插件本地托管并关联 QoderWake 任务
该方式适用于 QoderWake 作为自动化执行体参与前端开发流程的场景，将 Live Server 作为独立本地服务运行，QoderWake 仅负责触发构建、校验或部署动作，不直接提供 HTTP 服务。此方案复用成熟前端工具链，避免重复造轮子。
1、确保 VSCode 已安装官方 Live Server 插件（作者 Ritwick Dey）。
2、在包含 index.html 的项目根目录下，右键点击该文件，选择Open with Live Server。
3、确认浏览器已打开 http://127.0.0.1:5500/（或自定义端口），且修改保存任意 .html/.css/.js 文件后页面自动刷新。
4、在 QoderWake 控制台中新建一个 Skill，类型设为“Shell 命令”，内容为：curl -s http://127.0.0.1:5500/__live_reload__ 2>/dev/null（若插件支持该内部端点）或留空——此时 QoderWake 仅需监听文件变更事件并调用该 Skill 即可间接触发动态响应。
二、在 QoderWake 工作区中嵌入轻量级 Live Server 服务
该方式适用于需将实时预览能力封装进 QoderWake 数字员工工作流的场景，利用其沙盒内建的 Node.js 运行时启动微型服务器，使预览地址与 QoderWake 任务上下文同域可调用。
1、进入 QoderWake CLI 环境，执行：qoderwake sandbox --enable-nodejs-runtime。
2、在工作区根目录创建 package.json，运行 npm init -y && npm install live-server --save-dev。
3、在 .qoder/config.yaml 中添加 service 块：
service:
name: static-preview
代码编辑 CLI 工具集合：Cursor CLI（agent）和 Qoder CLI（qodercli），用于代码修改、重构、Code Review 及自动化代码任务。
type: node
command: npx live-server --port=8081 --no-browser --open=.
watch: ["*.html", "*.css", "*.js"]
4、提交配置后，执行 qoderwake submit --event-type=start-service --target-context="static-preview" 启动服务。
5、服务启动成功后，QoderWake 日志将输出：Preview server running at http://localhost:8081。
三、配置反向代理将 Live Server 流量注入 QoderWake 事件总线
该方式适用于企业级混合架构，其中 QoderWake 作为中央事件协调者，Live Server 作为边缘预览节点；所有文件变更事件经由 WebSocket 或 HTTP 回调上报至 QoderWake，触发记忆归档或质量门禁检查。
1、在 VSCode 项目中启用 Live Server 并自定义端口为 5501，同时开启事件回调模式（需 patch 或使用 fork 版本支持 POST /notify）。
2、在 QoderWake「事件总线」中新建消息源，协议选 HTTP Webhook，URL 设为：https://wake.qoder.ai/v1/event/static-change。
3、配置签名密钥与 JSON Schema，要求回调体必须含字段：{"file_path":"src/index.html","event":"saved","timestamp":1747810620}。
4、在 QoderWake 技能市场启用「静态资源变更分析」Skill，并将其绑定至该事件源。
5、当 Live Server 检测到保存动作后，自动向上述 URL 发送结构化通知，QoderWake 接收后立即执行代码规范扫描与 DOM 快照比对。
