[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"$fLc7oPlIXBznPkwYS70mZQOD7bKWYDmhwzunjXLk1Tf8":3},{"item":4,"related":51},{"id":5,"type":6,"title":7,"slug":8,"summary":9,"body":10,"coverUrl":11,"productScreenshots":12,"productLinks":13,"authorName":14,"authorUrl":15,"authorSubject":16,"category":17,"tags":22,"sourceLabel":39,"sourceName":40,"sourceUrl":41,"status":42,"seoTitle":43,"seoDescription":44,"canonicalUrl":45,"isFeatured":46,"sno":47,"sortOrder":48,"publishedAt":49,"updatedAt":50,"createdAt":50},"7f7b281e-b9d6-406f-8d79-9dfb33145f5e","article","WebTransport：为什么实时 AI 应用不一定应该使用 WebSocket？","webtransport-realtime-ai-apps","WebSocket 适合通用双向消息，但复杂实时 AI 应用还可能需要可靠流、双向流和可以丢弃的临时数据。本文解释 WebTransport 的 session、stream 和 datagram，比较它与 SSE、WebSocket、WebRTC 的边界，并讨论鉴权与部署。","当网页只需要把一段文字逐字显示出来，SSE 或 WebSocket 往往已经够用。但一旦应用同时传输语音、模型事件、工具结果、状态更新和临时数据，单一的有序通道就会开始暴露问题：一条消息卡住，后面的消息也可能只能排队等待。\n\nWebTransport 提供了另一种浏览器到服务器的通信模型。它建立在 HTTP\u002F3 或 HTTP\u002F2 之上，同时提供可靠流、双向流和 Datagram，让应用可以按数据的重要程度选择不同的传输方式。\n\n## 先给结论：WebTransport 是“多种可靠程度的实时通道”\n\nW3C 的 WebTransport 规范定义了浏览器和服务器之间的 ECMAScript API。一个 WebTransport session 可以创建单向流、双向流，也可以发送和接收 datagram；当前规范仍处于 Candidate Recommendation 阶段，底层协议和 API 都可能继续变化。[W3C WebTransport 规范](https:\u002F\u002Fwww.w3.org\u002FTR\u002Fwebtransport\u002F)\n\n这和 WebSocket 的重要区别是：WebSocket 更像一条持续的、有序的消息管道；WebTransport 更像一组可以并行使用的传输通道。\n\n## 为什么 AI 应用会需要不止一条通道\n\n一个语音 Agent 的一次会话里，可能同时有这些数据：\n\n- 麦克风上传的音频帧；\n- 模型返回的音频帧；\n- 文字转写的中间结果；\n- 工具调用的进度事件；\n- 最终答案和可点击的操作；\n- 心跳、取消和重连信息。\n\n这些数据的重要性和容错要求不同。最终订单金额必须可靠送达；一个过时的波形进度点丢掉了，通常没有必要重传。如果所有数据都放在同一条严格有序的管道里，低价值的数据也可能拖住高价值的数据。\n\nWebTransport 允许应用把它们拆开：\n\n```mermaid\nflowchart TD\n    A[一个 WebTransport Session] --> B[可靠双向流]\n    A --> C[服务端到客户端的单向流]\n    A --> D[Datagram 临时数据]\n    B --> E[指令、确认、工具结果]\n    C --> F[模型输出或音频流]\n    D --> G[波形、位置、进度、心跳]\n```\n\n需要强调的是：Datagram 的“可以丢”不是 WebTransport 自动替你做出的业务决定。应用必须自己判断哪些数据过期后没有价值，哪些数据即使晚到也必须补偿。\n\n## 用一个实时 AI 场景理解它\n\n假设用户在浏览器里和语音助手对话。助手正在调用天气服务，并且不断生成语音。可以这样划分：\n\n1. 用户意图、工具参数和确认结果走可靠双向流；\n2. 语音片段走可靠流，避免播放出现无法恢复的断裂；\n3. 当前音量、波形和延迟指标走 Datagram，旧数据被新数据覆盖也没关系；\n4. 取消请求可以通过控制流立即发送，而不是排在大量音频数据后面。\n\n这类划分比“所有内容都塞进 JSON 消息”更清晰，但也把更多设计责任交给应用：消息 framing、序列号、重放、取消、超时和重连都需要明确约定。\n\n## 它和 WebRTC、WebSocket、SSE 怎么选\n\n| 技术 | 强项 | 更适合的场景 |\n| --- | --- | --- |\n| SSE | 服务端向客户端推送文本事件 | 简单的模型文本流、通知 |\n| WebSocket | 双向、成熟、生态广 | 通用实时消息和协作功能 |\n| WebRTC | 媒体、点对点、低延迟 | 音视频通话和实时媒体 |\n| WebTransport | 多流、Datagram、HTTP 生态 | 复杂实时协议和高频状态同步 |\n\nWebTransport 不是“更现代所以总是更好”。如果应用只需要服务端逐字返回一段文本，SSE 更容易部署；如果需要大量浏览器之间直接传输音视频，WebRTC 仍然更贴合问题。只有当你确实需要多种流语义和可丢弃数据时，WebTransport 的复杂度才值得付出。\n\n## HTTP\u002F3 是常见底层，但不是唯一底层\n\n很多介绍会把 WebTransport 和 QUIC、HTTP\u002F3 直接画等号。更准确的说法是：WebTransport session 可以运行在 HTTP\u002F3 或 HTTP\u002F2 之上。HTTP\u002F3 通过 QUIC 提供多路传输能力，HTTP\u002F2 则提供另一条兼容路径。[规范中的 session 定义](https:\u002F\u002Fwww.w3.org\u002FTR\u002Fwebtransport\u002F#webtransport-session)\n\n因此，部署时不能只在浏览器里写好 JavaScript，还要检查：\n\n- 服务器是否支持相应的 WebTransport 协议；\n- 反向代理和负载均衡是否会正确转发；\n- 中间网络是否允许所需的连接方式；\n- 是否设计了不支持 WebTransport 时的回退路径。\n\n## 身份认证不能照搬普通 HTTP 请求\n\nWebTransport 使用 TLS 保护通信，但它并不自动替代应用层身份系统。W3C 规范的安全章节指出，WebTransport over HTTP 不会自动发送普通 HTTP 请求中的 Cookie，也不提供传统 HTTP 认证和缓存失效机制。[WebTransport 安全考虑](https:\u002F\u002Fwww.w3.org\u002FTR\u002Fwebtransport\u002F#security-and-privacy-considerations)\n\n这意味着应用需要明确设计会话绑定方式，例如在建立连接时使用一次性令牌，或者通过已认证页面获取短期连接凭证。令牌不能长期放在 URL 中，更不能把“连接已经加密”误当成“用户已经被授权”。\n\n## 现在该不该使用\n\n截至目前，WebTransport 仍是正在演进的标准。它适合需要实时交互、多个数据通道和不同可靠性等级的产品原型，也适合作为音频 Agent、多人协作或实时仿真系统的研究方向。\n\n如果业务只是普通聊天流，优先把协议、重试和鉴权做简单，往往比换成 WebTransport 更有价值。\n\n一句话总结：**WebSocket 给你一条实时管道，WebTransport 让你拥有一组可以分别管理的实时通道。**\n\n## 来源\n\n- [W3C：WebTransport](https:\u002F\u002Fwww.w3.org\u002FTR\u002Fwebtransport\u002F)\n- [WebTransport 工作组与标准进度](https:\u002F\u002Fwww.w3.org\u002Fgroups\u002Fwg\u002Fwebtransport\u002F)","\u002Fuploads\u002F2026-09-08\u002F2247cab5-87b7-4b92-8871-e6adac14dc47.jpg",[],[],"Foundit","https:\u002F\u002Ffoundit.cn","foundit-ai-editorial",{"id":18,"name":19,"slug":20,"description":21},"6179d3b6-dc34-4483-9ded-3cd9f1b37a47","科普","abbreviation","介绍各领域新兴概念",[23,27,31,35],{"id":24,"name":25,"slug":26},"a202d639-99a6-488a-a712-4d4c6ffd7e15","开发","dev",{"id":28,"name":29,"slug":30},"7c76bfc2-f80f-4ee0-a95d-27bd8708b434","技术","slug",{"id":32,"name":33,"slug":34},"82f427f8-6275-4cbb-bcac-cf1948488006","网页应用","web-app",{"id":36,"name":37,"slug":38},"88d2bc27-0e0f-468a-b907-2991cb97b87b","人工智能","ai","W3C WebTransport 官方规范","W3C：WebTransport","https:\u002F\u002Fwww.w3.org\u002FTR\u002Fwebtransport\u002F","published","WebTransport 详解：实时 AI 应用为什么需要多条传输通道","解释 WebTransport 的可靠流、双向流和 Datagram，比较它与 SSE、WebSocket、WebRTC 的适用场景和安全边界。",null,false,44,0,"2026-09-08T00:00:00.000Z","2026-09-08T03:19:19.069Z",[52,61,69],{"id":53,"type":6,"title":54,"slug":55,"summary":56,"coverUrl":57,"authorName":14,"sno":58,"publishedAt":59,"createdAt":60},"0c00fd8d-379a-4c58-a542-460bb3575b72","MCP Apps：让 AI 对话里的工具带上交互界面","mcp-apps-interactive-tool-ui","MCP Apps 通过 ui:\u002F\u002F 资源、工具元数据和沙箱 iframe，让 MCP 服务器可以向宿主提供交互式 HTML 界面。本文解释工具与 UI 的关联、权限边界、文本回退和安全模型。","\u002Fuploads\u002F2026-09-12\u002F9e795ab0-aa98-480f-ad6d-a2013530b302.jpg",48,"2026-09-12T00:00:00.000Z","2026-09-12T03:56:44.551Z",{"id":62,"type":6,"title":63,"slug":64,"summary":65,"coverUrl":66,"authorName":14,"sno":67,"publishedAt":49,"createdAt":68},"8d847c8b-6f9a-441e-8d1e-a9271a9c249d","WebMCP：网页为什么要学会给 AI Agent 提供工具？","webmcp-agent-ready-web-explained","传统浏览器 Agent 需要看截图、猜按钮、逐步点击。WebMCP 试图让网页主动声明可调用的结构化工具，把页面动作变成 Agent 能理解、能校验的接口。本文解释它与服务器端 MCP 的区别、渐进增强方式和副作用安全边界。","\u002Fuploads\u002F2026-09-08\u002F4d27db1a-7ba7-4799-a759-c04a34f76a02.jpg",53,"2026-09-08T03:18:42.780Z",{"id":70,"type":6,"title":71,"slug":72,"summary":73,"coverUrl":74,"authorName":75,"sno":76,"publishedAt":77,"createdAt":78},"0e2211d6-a9cc-4151-aec3-ea60ef2575f2","本地大模型部署：用 Ollama 与 llama.cpp 把模型搬进你自己的机器","local-llm-deployment-ollama-llama-cpp","数据敏感、要离线、想省 API 账单？本地部署值得了解。","https:\u002F\u002Foxqtewbrpuiouqqjrvdv.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fpublic-media\u002F2026-07-20\u002Fbf471546-ff4c-4fee-a01c-8a41157e5a8c.jpg","Foundit AI",76,"2026-07-19T00:00:00.000Z","2026-07-20T01:11:41.120Z"]