WebTransport：来自浏览器的 HTTP/3 流与数据报

一句话： WebTransport 通过 HTTP/3 在客户端与服务器之间传输数据，在单条连接上同时提供基于流的可靠传输和类似 UDP、不可靠的数据报传输——MDN 将其定位为 WebSocket 的现代化升级。

建立连接

将 HTTP/3 服务器的 URL 传给 WebTransport() 构造函数；协议必须是 https，且端口号必须显式给出。ready promise 解析后即可使用该连接。

const url = "https://example.com:4433/webtransport";
const transport = new WebTransport(url);
await transport.ready;

数据报与流

数据报 —— 只读属性 datagrams 返回一个 WebTransportDatagramDuplexStream，用于发送和接收数据报：不可靠传输，既不保证送达，也不保证到达顺序。MDN 指出这适合例如定期发送游戏状态更新这类场景——每条消息都会取代上一条，顺序无关紧要。
双向流 —— createBidirectionalStream() 异步打开一个 WebTransportBidirectionalStream，其 readable 与 writable 属性分别返回用于从服务器读取和向服务器写入的 WebTransportReceiveStream 与 WebTransportSendStream。
单向流 —— createUnidirectionalStream() 异步打开一个用于向服务器写入的 WritableStream。
服务器发起的流 —— incomingBidirectionalStreams 返回一个 ReadableStream，其中是服务器发起的 WebTransportBidirectionalStream 对象。

async function setUpBidirectional(transport) {
  const stream = await transport.createBidirectionalStream();
  const readable = stream.readable; // WebTransportReceiveStream
  const writable = stream.writable; // WebTransportSendStream
  return { readable, writable };
}

浏览器与生态支持

引擎	支持情况
Chrome（桌面端与 Android）	自 Chrome 97 起
Edge（桌面端）	与 Chrome 的支持情况一致（mirror）
Firefox（桌面端与 Android）	自 Firefox 114 起
Safari	自 Safari 26.4 起

数据来自 MDN browser-compat-data 中 WebTransport 接口的条目，其中桌面端 Edge 被记录为与 Chrome 的支持情况一致（mirror）。

特性检测

function connectTransport(url) {
  if (!("WebTransport" in window)) {
    // 此环境不支持 WebTransport——由调用方决定下一步操作
    // （例如改用 WebSocket）；本函数不会创建 WebSocket 连接。
    return null;
  }
  return new WebTransport(url);
}

实用清单

在构造 WebTransport 前，先检查 "WebTransport" in window——根据上表，较旧的引擎版本（以及 26.4 之前的 Safari）都不支持它。
使用连接前先 await ready promise。
URL 协议必须是 https，且端口必须显式指定——该构造函数面向的是 HTTP/3 服务器。
只在丢失或乱序可接受的数据上使用数据报；需要保证送达与顺序时使用流。
为不支持 WebTransport 的引擎准备好应对方案——根据上表，该能力并非普遍可用。