如何实现SSE流式推送与并行抓取TinyFish Cookbook之game-buying-guide完整深度解析【免费下载链接】tinyfish-cookbookA collection of sample apps and recipes built with the TinyFish web agent. Open-source examples for you to learn build!项目地址: https://gitcode.com/gh_mirrors/ti/tinyfish-cookbook本文带你完整拆解 TinyFish Cookbook 中的开源示例game-buying-guide它是一个 AI 游戏比价助手通过SSE 流式推送11 路并行抓取让 10 个浏览器 Agent 同时访问 Steam、Epic、GOG 等游戏商店并实时回传价格分析结果。下面从架构、并发、流式协议到客户端解析一次讲透它的代码设计。一、它是什么一个能同时逛 11 个商店的 AI 比价工具game-buying-guide 的目标很直接输入一个游戏名它立刻派出 11 个 TinyFish 浏览器 Agent并行执行10 个商店 AgentSteam、Epic Games、GOG、PlayStation、Xbox、Nintendo eShop、Humble Bundle、Green Man Gaming、Fanatical、CDKeys1 个 SteamDB Agent专门抓取该游戏的历史最低价格判断现在是买还是等每个 Agent 返回结构化 JSON现价、折扣、评分、buy_now / wait / consider建议最先完成的平台最先显示在页面上——这正是 SSE 流式推送的价值所在。二、总体架构三个 API 路由组成流水线项目结构见 game-buying-guide/README.md核心只有 3 个 API 路由路由职责是否流式discover-platforms/route.ts返回 10 个商店的搜索 URL硬编码模板无需 LLM❌ 普通 JSONanalyze-platform/route.ts单个商店的 Agent 分析✅ SSE 流式steamdb-price-history/route.tsSteamDB 历史最低价分析✅ SSE 流式设计亮点平台发现用硬编码 URL 模板route.ts#L4-L55省掉一次 LLM 调用的等待只有真正需要看网页的环节才交给浏览器 Agent。整个项目无数据库、无缓存纯内存实时抓取。三、并行抓取核心Promise.allSettled 同时发起 11 个任务客户端状态全部集中在 hooks/use-game-search.ts 这个自定义 Hook 里。search函数是并行抓取的入口// 所有平台 Agent SteamDB 并行执行 await Promise.allSettled([ ...platforms.map((platform) analyzePlatform(platform, gameTitle)), analyzeSteamDB(gameTitle), ]);见 use-game-search.ts#L186-L189。这里有两个关键选择Promise.allSettled而非Promise.all任何一个商店 Agent 超时或失败都不会拖垮其余 10 个任务失败的那张卡片单独显示错误状态。每个任务独立持有AbortController见 use-game-search.ts#L22-L23用户重新搜索或点击重置时可以精确中止某一路 SSE 连接避免旧请求污染新结果。四、SSE 服务端实现ReadableStream 四行事件头analyze-platform路由的精髓只有几十行。它用ReadableStream构造响应体把 Agent 事件逐条编码为 SSE 格式data: {JSON}\n\n写入const stream new ReadableStream({ async start(controller) { const send (payload) controller.enqueue(encoder.encode(sseData(payload))); // 把 TinyFish 事件流逐条转成 SSE 帧发送…… }, });完整实现见 route.ts#L70-L118。响应头中有 4 个保证流式体验的关键设置Content-Type: text/event-stream Cache-Control: no-cache, no-transform Connection: keep-alive X-Accel-Buffering: no ← 禁止 Nginx 类代理缓冲数据即刻下发另外注意 route.ts#L4-L5 的maxDuration 300浏览器 Agent 爬取慢必须把云函数超时时间拉长到 5 分钟否则流会在中途被掐断。三种 SSE 事件类型客户端只会收到 4 种帧全部由服务端事件映射而来SSE 帧类型来源TinyFish SDK 事件用途STREAMING_URLEventType.STREAMING_URL拿到 Agent 浏览器的实时画面地址STATUSEventType.PROGRESS更新卡片上的正在做什么文案COMPLETEEventType.COMPLETERunStatus.COMPLETED返回解析后的价格分析 JSONERROR异常分支携带错误信息前端标记卡片为失败五、最大亮点STREAMING_URL 驱动的实时浏览器预览STREAMING_URL事件是这套架构最出彩的部分TinyFish 会把 Agent 浏览器的实时画面地址流式推给前端前端直接用iframe加载用户就能亲眼看到 AI 正在哪个商店页面上翻找价格。卡片内嵌预览components/agent-card.tsx 中运行中的卡片带一块 128px 高的实时窗口点击可放大为悬浮窗components/live-browser-preview.tsx 用 Framer Motion 实现展开/收起上图是同一 Cookbook 仓库中 fast-qa 示例应用的截图——同样基于 TinyFish Agent 流式回传能看到边执行、边更新的交互质感game-buying-guide 的每张卡片都是这种体验。六、客户端 SSE 解析手写 30 行解析器前端没有用EventSource它不支持 POST而是手写了一个极简解析器核心逻辑在 use-game-search.ts#L40-L74response.body.getReader()按块读取响应体用TextDecoder解码buffer 保留最后一个不完整行SSE 帧可能被网络拆包按\n切行只处理以data:开头的帧JSON.parse后按type字段分发到对应的状态更新。解析失败直接catch跳过坏块保证流不被一条脏数据中断。所有数据结构定义在 lib/types.tsAgentStatus每路任务状态机pending → running → complete/error与PlatformAnalysis比价结果字段。七、一个容易被忽略的细节COMPLETED ≠ 任务成功服务端对结果做了双重校验见 route.ts#L85-L96状态校验RunStatus.COMPLETED只代表浏览器没崩不代表真的取到了价格内容校验Agent 可能返回带 json 围栏的字符串需先清洗再JSON.parse解析不出来时回退到兜底对象recommendation: consider前端永远不会白屏。这是所有 Agent 应用的通用经验永远校验内容而不只是状态。八、本地运行这份示例git clone https://gitcode.com/gh_mirrors/ti/tinyfish-cookbook cd tinyfish-cookbook/game-buying-guide # 需要 Node.js 22.x npm install # 创建 .env.local填入 TINYFISH_API_KEY npm run dev打开 http://localhost:3000输入任意游戏名即可看到 11 张卡片从运行中逐步变为完成实时画面、进度文案、比价结果依次流式呈现。总结这套架构最值得抄的 4 个点⚡并行用allSettledN 路任务互不牵连失败只影响单卡SSE 用ReadableStream手写POST 场景下比EventSource更灵活客户端解析器仅需 30 行️STREAMING_URL事件转发 iframe把AI 在干活变成可视过程体验远超转圈 loading✅COMPLETED 后仍校验内容Agent 结果永远需要清洗 兜底完整源码可直接参考 game-buying-guide/ 目录更多基于 TinyFish 的实战示例都在 Cookbook 仓库的 README.md 中有索引。【免费下载链接】tinyfish-cookbookA collection of sample apps and recipes built with the TinyFish web agent. Open-source examples for you to learn build!项目地址: https://gitcode.com/gh_mirrors/ti/tinyfish-cookbook创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考