什么是 WebTransport？
WebTransport 是一种基于 HTTP/3 和 QUIC 协议的新型网络传输协议，旨在提供更高效、更安全的数据传输方式。它支持可靠和不可靠的数据流传输，并且可以在同一连接中处理多个数据流，从而避免了队头阻塞问题。WebTransport 的主要优势包括：
低延迟和高吞吐量：WebTransport 使用 QUIC 协议，相较于传统的 TCP 协议，它减少了连接建立的时间，提高了数据传输的效率和速度。
双向通信：WebTransport 支持服务器与应用之间的双向通信，使得实时应用如实时聊天、流媒体传输等更加高效。
灵活的数据传输方式：WebTransport 支持可靠和不可靠的数据传输，可以根据具体需求选择适合的传输方式。例如，在需要高可靠性的场景下可以选择可靠传输，在对延迟敏感但可以容忍少量数据丢失的场景下可以选择不可靠传输。
多流复用：WebTransport 允许在同一连接上复用多个数据流，这不仅提高了资源利用率，还减少了因多次建立连接而导致的开销。
广泛的应用场景：WebTransport 适用于多种应用场景，包括实时网页应用、流媒体传输、物联网数据通信等
与 WebSocket 不同，WebTransport 支持多路复用、流控制，并提供了端到端的加密。
使用案例
1. 云游戏
案例：云游戏需要快速传输游戏指令和视频流，以确保游戏的流畅性和响应性。
代码：
// 假设服务器支持 WebTransport
const transport = new WebTransport('wss://example.com/game');
// 打开一个双向流
const stream = await transport.createBidirectionalStream();
// 发送游戏指令
const writer = stream.writable.getWriter();
await writer.write(new TextEncoder().encode('Game command'));
// 接收游戏状态更新
const reader = stream.readable.getReader();
while (true) {
const { value, done } = await reader.read();
if (done) break;
const message = new TextDecoder().decode(value);
console.log('Game state update:', message);
}
2. 低延迟实时直播
案例：实时直播需要低延迟的视频流传输。
代码：
// 连接到直播服务器
const transport = new WebTransport('wss://example.com/live');
// 创建一个单向流用于接收视频流
const stream = await transport.createUnidirectionalStream();
// 接收视频数据
const reader = stream.readable.getReader();
while (true) {
const { value, done } = await reader.read();
if (done) break;
// 处理视频数据，例如解码并显示
handleVideoData(value);
}
作者：朦胧之
链接：https://juejin.cn/post/7435221192476770367
