多彩编程 多彩编程MZPH · CODE BLOG
ARTICLE DETAIL

文章详情

深耕前端与后端开发技术的一线实战笔记与踩坑复盘。

Zeron 项目预览:在会话内打开本地 Dev Server(含 WebRTC 跨设备预览)完全指南

Zeron 项目预览:在会话内打开本地 Dev Server(含 WebRTC 跨设备预览)完全指南 Zeron 项目预览在会话内打开本地 Dev Server含 WebRTC 跨设备预览完全指南【免费下载链接】zeronA native control plane for Claude Code, Codex, Cursor, Devin and other coding agents.项目地址: https://gitcode.com/gh_mirrors/comet49/zeronZeron是面向 Claude Code、Codex、Cursor、Devin 等编码 Agent 的原生控制平面control plane。它内置的项目预览功能让你在会话内直接打开本地 Dev Server——无需切换浏览器、手动输入端口甚至支持通过WebRTC 跨设备预览在另一台设备上访问同一台机器上运行的开发服务器。本指南带你从零掌握这套流程。Zeron 会话内预览是什么30 秒看懂本地 Dev Server 预览能力传统的开发流程是终端里跑npm run dev然后切到浏览器输入localhost:5173。Zeron 把这条链路压缩成了一步自动发现守护进程每 2 秒扫描一次自动找到属于当前项目的 HTTP 开发服务器Vite、Next.js、Astro、Miniflare、Node 等会话内打开在会话里打开 Browser 标签页空标签会列出所有正在运行的服务点击Open即可在侧边直接浏览页面地址稳定预览 URL 采用设备名.项目名.localhost:7331的持久命名格式即使服务重启、端口变化地址也不变。 你不需要自己填端口号或复制路径——切换不同的 checkout 时服务列表会自动刷新。3 步在会话内打开本地 Dev Server最快上手步骤第 1 步启动开发服务器。在 Zeron 的终端/任务/Agent 面板中或任何终端里启动你的开发服务器例如 Vite 的npm run dev。Zeron 会自动标记由它启动的进程为 Zeron-owned。第 2 步打开 Browser 标签页。在会话工具栏点击Open Browser侧边栏菜单中也有入口标签页打开后会列出该项目下所有被发现的运行中服务并标注框架名称如 Vite和端口。第 3 步点击 Open 浏览。导航到稳定的预览地址开始使用。第一个服务保留项目主机名额外的服务如独立的 API 服务会获得描述性后缀例如设备名.项目名-api.localhost:7331。整个过程无需记住任何地址——服务列表就是导航栏。预览如何工作自动服务发现与稳定地址机制这套能力的关键在于发现与命名两个机制机制说明进程扫描Linux 上结合/proc的工作目录、进程祖先关系与 socket 描述符macOS 上使用lsof与ps获取等价信息安全过滤只探测仅回环可达、且工作目录属于已知本地项目的监听器带有login/sso/oauth等认证参数的命令在连接前就被排除避免干扰一次性浏览器回调持久身份previews.json将项目/服务 ID 与主机名标签同观察到的 PID 和端口分开存储——服务重启后身份不丢失所以你会看到这样的效果修改代码后 Vite HMR 热更新通过同一稳定 URL 生效杀掉进程后服务从列表消失换个端口重启后地址依然不变。细节可以看官方文档docs/preview-networking.md发现逻辑源码在 crates/preview/src/discovery.rs。WebRTC 跨设备预览在另一台设备打开同一个 Dev Server这是 Zeron 预览最出彩的部分开发服务器跑在你的电脑上但你可以在另一台设备上直接预览它。工作流程大致是信令协调云端 Worker 的 PreviewRoomedge/src/preview-room.ts用已验证的组织与用户身份派生房间名——客户端无法进入别人的房间服务广告宿主机每 2 秒刷新自己的服务目录通过心跳租约保持在线休眠安全P2P 直连两台设备通过 SDP/ICE 协商由字典序较小的设备发起 Offer随后建立WebRTC DataChannel直连帧级传输本地与远端使用完全相同的帧协议OPEN / DATA / WS_OPEN 等HTTP 响应体、WebSocket 消息不经过云端中继只走设备间通道。几个值得注意的设计 远端元数据永远不能授权任意外部 TCP 地址——宿主机只解析自己存活的服务 ID 当前使用主机候选 公共 STUN不提供 TURN 服务禁止 ICE 直连的网络会得到有界的连接错误提示✅ 本地预览完全独立于边缘可用性——即使没有部署 Worker本机预览也照常工作。传输层实现可参考 crates/preview/src/mux.rs 与 crates/preview/src/peer.rs信令端实现在 edge/src/preview-room.ts。跨平台支持macOS 原生浏览器与 Linux 外部浏览器回退不同平台打开预览的方式略有差异macOS14使用原生内嵌浏览器WebKit 针对预览域名配置了独立的 HTTP CONNECT 路由不改动系统 DNSLinux自动回退到外部浏览器界面会明确标注 Opens in your default browser空标签页提供 Enter an address 入口快捷键 CtrlL代理端口被占用时界面会给出内联错误而不是悄悄改变 URL。macOS 安装包长这样安装后即可体验完整预览流程预览功能源码在哪核心模块路径速查想深入阅读或贡献代码以下是预览功能的关键位置模块路径职责预览核心 cratecrates/preview/发现、目录、代理、对等连接服务发现crates/preview/src/discovery.rs进程扫描与 HTTP 探测本地代理crates/preview/src/proxy.rsloopback 代理与 Host 校验WebRTC 传输crates/preview/src/mux.rs帧协议与 DataChannel 复用云端信令edge/src/preview-room.tsPreviewRoom 协调与身份校验端到端示例crates/ui/examples/preview-fixture.rs真实 Vite 进程 原生点击 HMR 验证官方文档docs/preview-networking.md完整网络设计说明想自己跑一遍真实流程文档中提供了 fixture 构建命令与 opt-in 的 coordinator 集成测试两个认证客户端配对后通过远端主机名传输 4 MiB 响应。常见问题3 个新手最关心的点Q1关掉浏览器标签页开发服务器会停吗不会。守护进程持有监听器、发现与对等连接关闭标签页不影响服务发现地址也保持不变。Q2为什么列表里没有我的服务确认它监听在回环地址上、且工作目录属于 Zeron 已知的本地项目匹配最深的项目。非 HTTP 服务和带认证回调参数的命令会被主动排除。Q3跨设备预览需要部署什么部署带 v4 PreviewRoom 迁移的 Worker 即可只在本机使用的情况下完全不需要任何云端组件。小结Zeron 的会话内预览把跑服务 → 找地址 → 开页面变成了一次点击WebRTC 跨设备预览则让换台设备继续看成为可能。配合稳定的持久地址与 HMR 直通Agent 写代码、你在旁边实时验收的闭环就此完成。【免费下载链接】zeronA native control plane for Claude Code, Codex, Cursor, Devin and other coding agents.项目地址: https://gitcode.com/gh_mirrors/comet49/zeron创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表