Cloudflare Computer实时输出实战用SSE把沙箱命令stdout流式推送到浏览器【免费下载链接】computerGive your agent a computer 项目地址: https://gitcode.com/GitHub_Trending/computer1/computer文章初稿内容Cloudflare Computer是让 AI Agent 拥有一台虚拟电脑的开源项目一个运行在 Cloudflare Durable Object 里的持久化虚拟文件系统加上可插拔的沙箱执行后端Linux 容器、Worker Shell、Worker JavaScript。本文演示它最实用的一招——用SSEServer-Sent Events把沙箱命令的 stdout 逐帧流式推送到浏览器实现命令还在跑输出已经可见的实时终端体验。一、Cloudflare Computer 是什么一句话概括SQLite 是权威状态沙箱只是一个执行面。Durable Object持有文件系统的权威状态SQLite通过workspace.fs提供readFile/writeFile/grep等文件 API沙箱后端如 Linux 容器把这份状态投影成真实的 FUSE 挂载命令在里面执行改动再同步回 DO执行入口只有一个workspace.runtime.exec(source, { backend })由 backend 决定执行的是 shell 命令还是 ECMAScript 模块。上图来自官方设计文档可以看到容器侧的Exec/Child Process与 DO 侧 SQLite 之间的 Sync Protocol——正是这条通道保证了命令产生的文件变更能被后续读取也让边执行边输出成为可能。设计规格见 docs/README.md。二、为什么选 SSE 做实时输出跑一个npm test或长构建时用户不想盯着加载中转圈。主流方案对比方案方向断线处理浏览器端成本轮询客户端反复拉手动重试高定时器 去重WebSocket双向手动重连中SSE服务端单向推送EventSource 自动重连极低原生对象Agent 场景里浏览器只需要看输出天然单向而 Computer 的exec返回的恰好就是事件流stdout/stderr/exit三类事件而非一次性结果转发成 SSE 几乎零摩擦——这是官方文档明确推荐的做法见 docs/README.md#L180-L218。三、三步实现exec → SSE 帧 → 浏览器第 1 步exec 拿到事件流workspace.runtime.exec()返回的 handle 同时提供两样东西result()缓冲完的结果和一个ReadableStream事件流。要实时输出消费流即可。第 2 步把每个事件转成一个 SSE 帧SSE 帧格式很简单event: 名称\ndata: JSON\n\n。用一个TransformStream逐事件转换const sse run.pipeThrough(new TransformStream({ transform(event, controller) { const frame event: ${event.name}\ndata: ${JSON.stringify(event.value)}\n\n; controller.enqueue(new TextEncoder().encode(frame)); }, }));事件只有三种stdout、stderr值是文本块和exit值是退出码转义问题由JSON.stringify全权处理多行输出也不会破坏帧结构。第 3 步以流式 Response 返回return new Response(sse, { headers: { content-type: text/event-stream, cache-control: no-cache, }, });完整可运行的参照容器示例的POST /c/name/exec接口实现在 examples/container/src/index.ts#L233官方文档中的 SSE 完整片段在 docs/README.md#L182-L208。四、浏览器端一个 EventSource 搞定const events new EventSource(/agent/run); events.addEventListener(stdout, (e) print(JSON.parse(e.data))); events.addEventListener(stderr, (e) warn(JSON.parse(e.data))); events.addEventListener(exit, (e) { done(JSON.parse(e.data)); events.close(); });三条监听器就是全部客户端代码。EventSource断线后自动重连配合 Computer 的重新附着机制见下节重连后还能继续看输出。五、进阶断线重连后如何接着看exec的每个事件都带自增序号seq运行时提供getExec重新附着接口resume: tail→ 只看新产生的输出resume: seq→ 从该序号之后恢复省略 → 重放整个执行日志。这意味着 SSE 断线重连后客户端带上断点序号即可无感续流不必重跑命令。跨 DO 边界时事件流被编码为 JSONL 字节帧每条事件一行 JSON二进制块 base64保证流式保真编解码实现在 packages/computer/src/exec-wire.ts事件类型与附着语义定义在 packages/computer/src/shell.ts。接口契约细节见 docs/05_runtime_interface.md。六、想直接跑起来仓库自带多个可运行示例按难度递增examples/container — 最小闭环write / read / exec 三个 HTTP 接口最适合作为 SSE 改造起点examples/tutorial — 单端点 Agent 示例Agent 在沙箱里写 Markdown 并用pandoc生成 PDFexamples/think-compare-runtimes — Web 看板同一 Agent 任务在容器与 Worker 运行时并排执行、实时对比输出是本模式的完整产品化形态。git clone https://gitcode.com/GitHub_Trending/computer1/computer cd computer/examples/container npm install npm run dev七、小结要点说明数据源exec返回的ReadableStreamstdout / stderr / exit 事件传输格式SSE 帧event: name\ndata: json\n\n关键头content-type: text/event-streamno-cache客户端原生EventSource自动重连续流机制事件带seqgetExec按序号重新附着核心思路就一句Computer 把命令输出设计成了流SSE 把流送进了浏览器——中间只差一个TransformStream。⚡文章已完成包含SEO 关键词布局核心词Cloudflare Computer、SSE、stdout、流式在前 100 字与 H1/H2 中自然出现、架构图仅使用一次并带关键词 alt 文本、精简的两段代码示例、模块相对路径链接、以及 clone 仓库地址。【免费下载链接】computerGive your agent a computer 项目地址: https://gitcode.com/GitHub_Trending/computer1/computer创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考