WebTransport 低延迟通信
以下是关于 WebTransport 低延迟通信的基本知识点总结:
一、WebTransport 核心定位
1. 与传统协议对比
维度 | WebSocket | WebTransport |
---|---|---|
协议基础 | HTTP/1.1 Upgrade | 基于HTTP/3 + QUIC |
传输模式 | 单一可靠流 | 可靠流 + 不可靠数据报 + 多路复用 |
连接建立 | TCP三次握手 | QUIC 0-RTT/1-RTT快速握手 |
拥塞控制 | 传统TCP算法 | BBR等现代算法 + 应用可定制 |
头部开销 | 较大(每个消息) | 头部压缩(QPACK) + 流式头部 |
2. 核心优势矩阵
- 低延迟:QUIC协议减少握手延迟(0-RTT最快100ms内建立)
- 高吞吐:多路复用避免队头阻塞,提升30-50%吞吐量
- 强容错:前向纠错(FEC)抵抗网络丢包
- 灵活传输:同时支持可靠流(Stream)与不可靠数据报(Datagram)
二、核心架构解析
1. 协议栈架构
graph TD应用层 --> WebTransport APIWebTransport --> HTTP/3层HTTP/3 --> QUIC传输层QUIC --> UDP/IP
2. 关键组件
组件 | 功能 | API示例 |
---|---|---|
WebTransport | 主连接对象 | new WebTransport(url) |
DatagramWriter | 不可靠数据报写入器 | transport.datagrams.writable |
BidirectionalStream | 双向可靠流 | transport.createBidirectionalStream() |
UnidirectionalStream | 单向可靠流 | transport.createUnidirectionalStream() |
三、基础开发模式
1. 连接建立
const transport = new WebTransport('https://example.com:4433/path', {serverCertificateHashes: [{algorithm: 'sha-256',value: new Uint8Array([...]) // 证书指纹}]
});await transport.ready; // 等待连接就绪
transport.closed.then(() => {console.log('连接关闭');
}).catch((err) => {console.error('异常关闭:', err);
});
2. 数据收发示例
不可靠数据报传输:
const writer = transport.datagrams.writable.getWriter();
await writer.write(new Uint8Array([1, 2, 3]));const reader = transport.datagrams.readable.getReader();
while (true) {const { value, done } = await reader.read();if (done) break;console.log('收到数据报:', value);
}
可靠流传输:
// 发送流数据