如何使用WebTransport：构建低延迟Web通信的完整指南
项目地址: https://gitcode.com/gh_mirrors/we/webtransport WebTransport是一种Web API，提供低延迟、双向的客户端-服务器通信能力。它专为需要QUIC（HTTP/3的传输层）性能的应用而设计，如高频状态同步和媒体流传输，同时保持安全的、基于源的Web模型。它支持可靠流和不可靠数据报，是现代Web应用实现高性能通信的理想选择。
🚀 什么是WebTransport？
WebTransport解决了传统Web通信方式的关键痛点：
- WebSockets：虽然易于使用，但基于TCP，存在队头阻塞问题
- WebRTC数据通道：支持不可靠传输但为P2P设计，客户端-服务器场景配置复杂
- HTTP/2和HTTP/3：请求-响应模式，不适合长期双向"推送式"数据流
WebTransport提供了一个单一的传输对象，抽象了底层协议，提供灵活的功能集，包括可靠的单向和双向流以及不可靠的数据报，非常适合需要高性能通信的Web应用。
💡 WebTransport的核心优势
1. 低延迟通信
WebTransport通过支持不可靠数据报和独立可靠流，消除了队头阻塞问题，特别适合实时应用。
2. 多路复用能力
支持在一个连接上同时进行多个数据流传输，提高资源利用率和通信效率。
3. 灵活的可靠性选项
开发者可以根据不同数据类型选择可靠或不可靠传输方式，平衡性能和数据完整性。
4. 细粒度的流量控制
提供"发送组"(Send Groups)和"原子写入"(Atomic Writes)功能，管理不同数据类型的带宽分配。
🎯 适合WebTransport的应用场景
WebTransport特别适合以下应用场景：
- 云游戏和远程桌面：发送用户输入（可靠）同时接收高频视频帧和输入状态（不可靠）
- 实时流媒体：以低开销向服务器推送媒体块
- 协作编辑：发送光标位置（不可靠）同时确保文档更改（可靠）被持久化
- 物联网设备：高效地多路复用来自数千台设备的传感器数据
- 金融行情：传递高频市场数据，其中最新数据包最有价值
更多使用场景可以参考项目中的use-cases.md文档。
🛠️ 快速开始使用WebTransport
1. 建立连接
使用WebTransport构造函数创建连接，可指定子协议和可靠性要求：
const wt = new WebTransport('https://example.com/wt', {
protocols: ['v2.chat', 'v1.chat'], // 向服务器提议的子协议
requireUnreliable: true // 如果只有H2/TCP可用则失败
});
await wt.ready;
console.log(`服务器选择了 ${wt.protocol || "无"} 协议`);
console.log(wt.reliability); // 输出: supports-unreliable
2. 使用头信息和证书哈希连接
对于开发环境或需要认证的场景：
// 替换为服务器的实际值
const token = "dev-token-123";
const certHash = new Uint8Array([
0xed, 0xb0, 0x3e, 0x3a, 0x0a, 0x5f, 0xbb, 0x4c, 0x1c, 0x8e, 0x62, 0xc8, 0xa0, 0xcf, 0x9c, 0x54,
0xc2, 0xe5, 0xa6, 0xd3, 0xb2, 0xb4, 0xa1, 0xc9, 0xd0, 0xe1, 0xf2, 0xa3, 0xb4, 0xc5, 0xd6, 0xe7,
]);
const wt = new WebTransport("https://127.0.0.1:4433/wt", {
headers: { Authorization: `Bearer ${token}` },
serverCertificateHashes: [{ algorithm: "sha-256", value: certHash }],
});
await wt.ready;
3. 发送和接收数据
单向和双向流
发送UTF-8编码流：
// 发送UTF-8编码流
const { writable, readable } = new TextEncoderStream();
const writer = writable.getWriter();
writer.write("Hello server").catch(() => {});
writer.close();
await readable.pipeTo(await wt.createUnidirectionalStream());
接收服务器发起的单向数据流（可能乱序到达）：
for await (const readable of wt.incomingUnidirectionalStreams) consumeConcurrently(readable);
async function consumeConcurrently(readable) {
try {
for await (const bytes of readable) processTheData(bytes);
} catch (e) {
console.error(e);
}
}
使用双向流作为请求/响应模式：
const { writable, readable } = new TextEncoderStream();
const writer = writable.getWriter();
writer.write("Hello server").catch(() => {});
writer.close();
for await (const message of readable
.pipeThrough(await wt.createBidirectionalStream())
.pipeThrough(new TextDecoderStream())) {
console.log(message); // "Hi client"
}
发送和接收数据报
对于高频、时间敏感的数据，数据报是理想选择：
// 向服务器发送utf-8编码的数据报
const writable = wt.datagrams.createWritable();
const writer = writable.getWriter();
const encoder = new TextEncoder();
for (const message of messages) {
const datagram = encoder.encode(message);
if (datagram.length > wt.datagrams.maxDatagramSize) throw;
await writer.ready;
writer.write(datagram).catch(() => {});
}
接收服务器发起的utf-8编码数据报：
const decoder = new TextDecoder();
for await (const datagram of wt.datagrams.readable) {
console.log(decoder.decode(datagram));
}
📊 高级用法
发送实时视频（每帧一个流）
视频帧通常超过数据报大小，常见做法是每帧或每个片段使用一个流：
let sendOrder = 0;
for await (const encodedVideoChunk of realtimeEncodedVideoChunks.readable) {
const bytes = new Uint8Array(encodedVideoChunk.byteLength);
encodedVideoChunk.copyTo(bytes);
const writable = await wt.createUnidirectionalStream({ sendOrder: sendOrder-- });
const writer = writable.getWriter();
writer.write(bytes).catch(() => {});
writer.close();
}
使用发送组管理带宽
在复杂应用中，不同组的相关数据可能会竞争带宽。发送组允许开发人员对相关流进行分组，并在该组内单独确定优先级：
sendParticipant(encodedVideoChunksParticipantA, wt.createSendGroup());
sendParticipant(encodedVideoChunksParticipantB, wt.createSendGroup());
async function sendParticipant(realtimeEncodedVideoChunks, sendGroup) {
let sendOrder = 0;
for await (const encodedVideoChunk of realtimeEncodedVideoChunks.readable) {
const bytes = new Uint8Array(encodedVideoChunk.byteLength);
encodedVideoChunk.copyTo(bytes);
const writable = await wt.createUnidirectionalStream({ sendGroup, sendOrder: sendOrder-- });
const writer = writable.getWriter();
writer.write(bytes).catch(() => {});
writer.close();
}
}
事务性写入和可靠重置
WebTransport支持事务性写入和通过atomicWrite()和commit()方法进行可靠重置：
// 要么发送所有字节，要么都不发送
const writable = await wt.createUnidirectionalStream();
const writer = writable.getWriter();
try {
await writer.atomicWrite(bytes);
} catch (e) {
if (e.name != "AbortError") throw e;
// 写入被流控制阻止。可写流保持未出错状态。
}
// 在中止前可靠地发送字节
const writable = await wt.createUnidirectionalStream();
const writer = writable.getWriter();
writer.write(bytes).then(async () => {
writer.commit();
await writer.abort(new WebTransportError("", {streamErrorCode: 42}));
});
带老化机制的不可靠数据报
对于"玩家位置"等数据，旧更新是无用的。开发人员可以为数据报设置"过期时间"，以便浏览器丢弃它们而不是发送过时数据：
const datagrams = wt.datagrams.createWritable();
datagrams.outgoingMaxAge = 500; // 如果500ms内未发送则丢弃
const writer = datagrams.getWriter();
await writer.write(new TextEncoder().encode("pos: 10,20"));
🔒 安全与隐私考虑
基于源的安全
连接遵循与fetch()相同的安全规则。服务器必须在握手期间明确允许来自客户端源的连接。
证书哈希
为了支持无法使用公共CA签名证书的本地网络开发，WebTransport允许使用serverCertificateHashes。这些证书的有效期限制为最多2周，以防止长期跟踪。
指纹识别
getStats() API提供的丰富信息（提供RTT、 packet loss和吞吐量）可能被用于指纹识别。浏览器通过使用网络分区键来缓解此问题，确保网站不能使用WebTransport统计信息跨不同顶级域跟踪用户。
更多安全问题的解答，请参阅项目中的security-questionnaire.md。
📚 深入学习资源
- 详细协议说明：explainer.md
- 子协议协商：explainers/subprotocol_negotiation.md
- 使用案例：use-cases.md
🏁 总结
WebTransport为现代Web应用提供了强大的低延迟通信能力，填补了传统Web通信方式的空白。通过支持可靠流和不可靠数据报，它为实时应用、游戏、流媒体等场景提供了理想的通信解决方案。
无论是构建云游戏平台、实时协作工具还是物联网应用，WebTransport都能帮助你实现高性能的客户端-服务器通信。现在就开始探索这个强大的API，为你的Web应用带来更快、更可靠的通信体验！
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
