WebTransport：基于 QUIC 的客户端-服务器通信

WebTransport 是什么？

WebTransport 是一种现代网络 API，允许 Web 客户端与服务器之间通过 QUIC 协议 建立双向、多路复用的通信通道。它旨在替代或补充 WebSocket，尤其适用于需要低延迟、高吞吐量和无序可靠传输的场景，如实时游戏、流媒体和直播。

与 WebSocket 不同，WebTransport 不再依赖单一的 TCP 连接，而是充分利用 QUIC 的特性：独立的数据流、避免队头阻塞、连接迁移和更快的握手。这意味着一个连接内可以同时承载多个独立的数据流，某个流的丢包不会阻塞其他流的数据传递。

为什么需要 WebTransport？

在 WebTransport 出现之前，浏览器端实现低延迟实时通信主要依赖两种技术：

• WebSocket：基于 TCP，提供全双工的单数据流通信。TCP 的队头阻塞问题一旦发生丢包，所有后续数据必须等待重传，导致延迟抖动，严重影响实时应用。
• WebRTC：基于 UDP，支持音频、视频和 DataChannel。但 WebRTC 的连接建立过程复杂，且其 DataChannel 底层基于 SCTP，同样面临一定程度的队头阻塞，并且开发难度和维护成本较高。

WebTransport 的提出正是为了提供一种 更简洁、更高效、更灵活 的通信方式，直接利用 QUIC 的原生能力：

• 避免队头阻塞：每个数据流独立，丢包只影响该流自身。
• 多路复用：在单个连接上同时传输多个独立数据流，无需为每种数据建立新连接。
• 可靠与不可靠传输：可以按需选择流式可靠传输，或使用数据报（datagram）进行无需重传的低延迟传输。
• 连接迁移：网络切换（如从 Wi-Fi 到移动网络）时无需重新建立连接，会话保持。
• 加密与安全：QUIC 内置 TLS 1.3，所有数据默认加密和认证。

WebTransport 的核心概念

基于 QUIC 的连接

WebTransport 会话建立在 HTTP/3（底层为 QUIC）之上。客户端通过浏览器 Web API 发起连接，服务端需支持 HTTP/3 和 WebTransport 协议框架。

连接过程：

1. 客户端通过 HTTPS URL 向服务器发送一个带有 Upgrade 头的 HTTP/3 请求，要求升级到 WebTransport。
2. 服务器同意升级后，返回 200 或其它成功状态码，连接协商完成。
3. 该 QUIC 连接即成为 WebTransport 会话载体。

数据流（Bidirectional/Unidirectional Streams）

在已建立的 WebTransport 会话中，客户端和服务器都可以创建独立的数据流：

• 双向流（Bidirectional Stream）：双方均可发送和接收数据。
• 单向流（Unidirectional Stream）：只能由创建方发送数据，对端只能接收。

每个数据流都有唯一的 ID，并支持背压（back pressure）控制，防止发送方过快地淹没接收方。流上的数据是可靠有序的，适用于需要完整性和顺序的场景，如控制指令、文件片段等。

数据报（Datagrams）

WebTransport 还支持 不保证可靠传输的数据报。与流不同：

• 数据报不是面向流的，而是独立的 UDP 风格消息。
• 不保证送达，不保证顺序，无重传（可选，规范允许应用层自行决定）。
• 适合对实时性要求极高、能够容忍少量丢包的场景，例如游戏状态同步、实时位置更新、视频帧等。

一个 WebTransport 会话可以混合使用流和数据报，为应用提供最大的灵活性。

浏览器端 API 简介

WebTransport 的浏览器 API 设计得相当直观。所有交互从 WebTransport 构造函数开始：

// 连接到服务器
const transport = new WebTransport('https://example.com:4433/webtransport');
await transport.ready; // 等待连接建立

// 创建双向流
const stream = await transport.createBidirectionalStream();
const writer = stream.writable.getWriter();
await writer.write(new Uint8Array([0, 1, 2]));
writer.close();

const reader = stream.readable.getReader();
const { value, done } = await reader.read();
// 处理接收到的数据...

// 发送数据报
const writer = transport.datagrams.writable.getWriter();
writer.write(new Uint8Array([0x42]));

// 接收数据报
const reader = transport.datagrams.readable.getReader();
while (true) {
  const { value, done } = await reader.read();
  if (done) break;
  // 处理数据报...
}

// 关闭连接
transport.close();

主要接口成员：

• transport.ready：Promise，在连接可用时 resolve。
• transport.closed：Promise，在连接关闭时 resolve。
• transport.createBidirectionalStream()：创建双向流，返回 BidirectionalStream 对象（包含 readable 和 writable 属性）。
• transport.createUnidirectionalStream()：创建单向流，返回只写流。
• transport.incomingBidirectionalStreams：服务器发起的双向流的可读集合。
• transport.incomingUnidirectionalStreams：服务器发起的单向流的可读集合。
• transport.datagrams：{ readable, writable } 对象，用于收发数据报。

服务端实现要点

服务端必须支持 HTTP/3 和 WebTransport 协议。常见的实现方式包括：

• 使用支持 WebTransport 的 HTTP/3 库，如 aioquic（Python）、quiche（Rust/C）、libwebsockets 等。
• 反向代理如 Caddy、Nginx（实验性补丁）或专用网关。

以 Python 的 aioquic 为例，服务端需要处理 WebTransport 的协商请求，并暴露数据流与数据报的处理回调。基本流程：

1. 监听 UDP 端口，处理 QUIC 连接。
2. 处理 HTTP/3 请求，识别 :method = CONNECT 和 :protocol = webtransport 的扩展请求。
3. 同意升级后，向客户端发送确认，并开始处理流和数据报。

由于服务端实现复杂，开发时可优先使用成熟框架，或使用 WebTransport 专项测试服务器进行本地调试。

典型应用场景

实时多人游戏

游戏需要高频、低延迟的状态同步与指令下发。使用 WebTransport：

• 不可靠数据报：角色移动、射击等实时位置/事件，容忍丢包以减少延迟。
• 可靠流：聊天消息、关键逻辑数据或部分状态快照，保证完整性。
• 多数据流：可独立传输游戏逻辑流、语音流、文件流，互不干扰。

直播与流媒体

WebTransport 可以作为低延迟媒体传输通道，替代 HTTP 自适应流（HLS/DASH）或 WebRTC：

• 将视频帧作为数据报低延迟推送到浏览器；
• 音频与视频可用不同流发送，便于同步与处理；
• 借助 QUIC 的连接迁移，观众在改变网络时不会断开直播。

实时协作工具

在线文档、白板等需要同步大量操作数据。WebTransport 的流式与无序能力可提供：

• 操作消息使用可靠流，确保完整顺序；
• 大数据块（如图片、视频片段）可用独立流传输；
• 用户在线状态、光标位置等高频信息使用数据报广播。

IoT 与设备控制

对于 Web 端控制的物联网设备，WebTransport 提供安全、低开销的通道：

• 控制指令用可靠的双向流；
• 传感器数据可采用数据报进行高频推送；
• 会话迁移支持设备在移动基站切换时保持连接。

WebTransport vs WebSocket vs WebRTC DataChannel

当前浏览器支持与局限性

截至 2025 年，WebTransport 已在 Chromium 核心浏览器（Chrome、Edge、Opera 等）中得到较好支持。Firefox 和 Safari 仍处于评估或开发阶段，尚未默认启用。

主要局限性：

• 浏览器兼容性不足：仅限 Chromium 生态，移动端 Safari 未支持。
• HTTP/3 服务端部署复杂：需要完整的 QUIC 和 HTTP/3 技术栈，证书配置、UDP 端口开放等要求较高。
• 调试工具支持有限：Chrome DevTools 尚未提供完善的 WebTransport 流和数据报监控面板。
• 标准仍在演进：部分 API 细节可能调整，需要跟踪规范更新。

对于需要普遍兼容性的项目，目前仍需以 WebSocket 作为降级方案。

快速上手：搭建一个简单的 WebTransport 应用

以下是使用 JavaScript 和开源服务器 webtransport-go 的快速实践步骤。

1. 准备服务器

下载并运行一个简单的 WebTransport 测试服务器（要求 Go 环境）：

git clone https://github.com/webtransport/webtransport-go
cd webtransport-go/example
go run server/main.go
# 服务默认监听在 https://localhost:4433

该服务器会返回回显（echo）服务，客户端发送的流数据和数据报会被原样返回。

2. 编写客户端 HTML

创建 index.html：

<!DOCTYPE html>
<script type="module">
  const url = 'https://localhost:4433/webtransport';
  const transport = new WebTransport(url);
  await transport.ready;
  console.log('WebTransport 已连接');

  // 测试双向流
  const stream = await transport.createBidirectionalStream();
  const writer = stream.writable.getWriter();
  await writer.write(new TextEncoder().encode('Hello WebTransport!'));
  writer.close();

  const reader = stream.readable.getReader();
  const { value } = await reader.read();
  const echoBack = new TextDecoder().decode(value);
  console.log('服务器回显：', echoBack); // 应显示：Hello WebTransport!

  // 测试数据报
  const datagramWriter = transport.datagrams.writable.getWriter();
  datagramWriter.write(new Uint8Array([1, 2, 3]));

  for await (const datagram of transport.datagrams.readable) {
    console.log('收到数据报：', datagram);
    break;
  }
</script>

3. 启动本地 HTTPS 环境

浏览器要求 WebTransport 连接必须通过 HTTPS 或 localhost。可以使用 mkcert 生成本地证书，或使用 localhost 启动服务。如果使用上述 Go 测试服务器，它自带 TLS 证书，只需在浏览器中信任自签名证书即可。

打开 https://localhost:4433 并加载上述 HTML，观察控制台输出。如果遇到证书问题，请确认在浏览器中导入了服务器的 CA 证书。

总结与展望

WebTransport 借助 QUIC 的力量，为 Web 带来了原生级别的低延迟、多流通信能力。它有望成为下一代实时 Web 应用的核心传输协议，尤其是在游戏、媒体和协作领域。尽管当前浏览器兼容性有限，但随着标准推进和更多服务器方案涌现，它将是每个 Web 开发者值得掌握的前沿技术。

建议开发者现在开始在实验项目中使用 WebTransport，并结合 WebSocket 做渐进式增强，为未来全面支持做好准备。