🚀 WebTransport：让网络通信更轻更快！

WebTransport 就像是一场网络通信的革命，它以 HTTP/3 协议为基础，为我们打开了低延迟双向通信的大门。想象一下，未来的网页不再受限于传统的 TCP 连接，而是可以像 UDP 那样自由地发送数据，同时又拥有 HTTP/3 的可靠性。WebTransport 就如同网络世界的“高速公路”，让数据在客户端和服务器之间自由穿梭，为我们带来前所未有的体验。

🐢 WebTransport 的前世今生

WebTransport 的诞生并非偶然，它承袭了早期 QuicTransport 的理念，但更进一步，以 HTTP/3 协议为基础，打造了一个更加通用、更易于使用的网络通信 API。WebTransport 的核心在于它既支持数据报 API，也支持数据流 API，满足了不同应用场景的需求。

数据报 API 就像是网络世界的“快递小哥”，它可以快速地发送和接收数据，但并不保证数据传输的顺序和可靠性。这对于那些对延迟要求极高的应用场景，例如实时游戏、视频直播等，非常适用。

数据流 API 则像是网络世界的“物流公司”，它可以保证数据的可靠性、有序性，并支持多路数据流的传输。这对于那些需要可靠传输数据的应用场景，例如文件上传、下载等，非常适用。

💡 WebTransport 的应用场景

WebTransport 的应用场景非常广泛，它可以用于：

• 实时游戏：通过数据报 API，以最短延迟时间向服务器发送游戏状态，实现流畅的游戏体验。
• 媒体流：以极低的延迟接收服务器推送的媒体流，例如视频直播、音频通话等。
• 实时通知：在网页打开时接收服务器推送的通知，例如消息提醒、更新提示等。

🤝 WebTransport 与其他技术的比较

WebTransport 的出现并非要取代现有的网络通信技术，而是提供了一种新的选择，为开发者提供了更多可能性。

• WebTransport vs. WebSocket：WebTransport 的数据流 API 可以替代 WebSocket，但数据报 API 则提供了 WebSocket 不具备的低延迟特性。WebTransport 在建立连接时也比 WebSocket 更加高效。
• WebTransport vs. UDP Socket API：WebTransport 并非简单的 UDP Socket API，它在加密和拥塞控制方面进行了优化，更加安全可靠。
• WebTransport vs. WebRTC 数据通道：WebTransport 可以替代 WebRTC 数据通道，用于客户端-服务器连接，但它不支持点对点通信。WebTransport 的使用也比 WebRTC 更简单易用。

💻 如何使用 WebTransport

使用 WebTransport 非常简单，只需要创建 WebTransport 实例并连接到服务器即可。WebTransport 提供了三种不同的流量类型：数据报、单向数据流和双向数据流。

连接到服务器：

const url = 'https://example.com:4999/foo/bar';
const transport = new WebTransport(url);

// 等待连接建立
await transport.ready;

// ...

使用数据报 API：

// 发送数据报
const writer = transport.datagrams.writable.getWriter();
const data1 = new Uint8Array([65, 66, 67]);
writer.write(data1);

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

使用数据流 API：

// 创建单向数据流
const stream = await transport.createUnidirectionalStream();
const writer = stream.writable.getWriter();
const data1 = new Uint8Array([65, 66, 67]);
writer.write(data1);

// 接收单向数据流
const rs = transport.incomingUnidirectionalStreams;
const reader = rs.getReader();
while (true) {
  const { done, value } = await reader.read();
  if (done) {
    break;
  }
  // value is an instance of WebTransportReceiveStream
  await readFrom(value);
}

🚧 WebTransport 的未来

WebTransport 作为一项新兴技术，正在不断发展完善。未来，WebTransport 将会更加强大，更加易用，为开发者提供更多可能性，推动 Web 应用的发展。

📚 参考文献

1. WebTransport 说明
2. WebTransport 草稿规范
3. WebTransport GitHub 代码库
4. webtransport-ponyfill-websocket
5. Web Transport GitHub 代码库