概述
在Web开发领域,实时通信一直是关键需求之一。从早期的 HTTP 轮询 、WebSocket ,到后来的 HTTP/2 Server Push,技术不断演进,但仍存在一些局限性,如高延迟、队头阻塞(Head-of-Line Blocking)等。
WebTransport 的出现,旨在解决这些问题。它基于 QUIC 协议 (HTTP/3 的底层协议),提供 低延迟、多路复用、支持可靠和不可靠传输 的能力,适用于游戏、视频会议、实时数据推送等场景。
# 什么是 QUIC 和 HTTP/3
在谈WebTransport 之前,我们先来了解下,啥是QUIC 协议和 HTTP/3
快速 UDP 互联网连接 (QUIC) 是一种通用传输层协议,旨在通过其灵活性、内置安全性、更少的性能问题和更快的采用率来取代传输控制协议 (TCP)。 QUIC 最初由 Google 开发,使用用户数据报协议 (UDP) 作为在客户端和服务器之间移动数据包的低级传输机制。 值得注意的是,QUIC 还将传输层安全性(TLS)作为一个整体组件,而不是像 HTTP/1.1 和 HTTP/2 那样作为附加层。
HTTP/3 基于 QUIC,是超文本传输协议 (HTTP) 的第三个主要版本,并于 2022 年被采纳为IETF 标准。 QUIC+HTTP/3 的创建是为了解决 TCP 固有的限制,这些限制限制了性能和用户体验。
HTTP1 HTTP2 HTTP3对比
大家可以看下如下这张图,HTTP/1 和HTTP/2 都是基于TCP 安全安全可靠传输协议,而HTTP/3 是基于不可靠传输协议UDP

UDP、TCP 和 TLS
UDP 是一种简单、轻量级的协议,不需要像 TCP 那样进行复杂的三次握手来建立第一个连接。 这种简单性使得 UDP 快速且无连接,但这也意味着与 TCP 相比,它缺乏可靠和安全通信所必需的功能。
QUIC 的独特之处在于它融合了 UDP 和 TCP 协议的优点。 虽然它是无连接的并且利用 UDP 作为低级传输协议来减少连接和传输延迟,但由于它重新实现了 TCP 的连接建立和丢失检测功能(从而保证数据包的传输,可以理解自行实现了类似TCP可靠传输的算法),因此它在较高层是面向连接的。 它负责识别丢失的数据并完成重新传输的任务,以确保无缝的用户体验。
QUIC 还将 TLS 作为一个整体组件,而不是像 HTTP/1.1 和 HTTP/2 那样作为附加层。 这种合并可确保消息默认被加密。
WebTransport是什么?
知道了上面的QUIC 和相关概念,引入我们本文的主角WebTransport WebTransport 是一种新的 Web API ,允许浏览器与服务器建立 低延迟、双向、多路复用 的通信通道。它基于 QUIC 协议(HTTP/3 的传输层),提供:
- 不可靠的数据报传输(类似 UDP,适用于实时性要求高的场景)。
- 可靠的流传输(类似 TCP,适用于需要数据完整性的场景)。
- 多路复用(多个独立数据流共享同一连接,避免队头阻塞)。
WebTransport 的关键优势
特性 | WebTransport | WebSocket | HTTP/2 |
---|---|---|---|
底层协议 | QUIC (UDP) | TCP | TCP |
多路复用 | ✅(无队头阻塞) | ❌ | ✅(但有队头阻塞) |
不可靠传输 | ✅(UDP风格) | ❌ | ❌ |
流控制 | ✅ | ❌ | ✅ |
典型用途 | 游戏、实时音视频 | 聊天室、通知 | 网页加载 |
为什么需要 WebTransport?
WebSocket 的局限性
WebSocket 虽然广泛用于实时通信,但仍有一些缺点:
- 基于 TCP:TCP 的队头阻塞问题会影响实时性。
- 单一数据流:无法同时传输多个独立数据流。
- 缺乏不可靠传输:所有数据必须可靠送达,不适合实时音视频等场景。
HTTP/2 的局限性
HTTP/2 虽然支持多路复用,但:
- 仍然依赖 TCP,存在队头阻塞问题。
- 主要用于请求-响应模式,不适合双向实时通信。
2.3 WebTransport 的解决方案
- 基于 QUIC(UDP) :避免 TCP 的队头阻塞,降低延迟。
- 支持混合传输模式:可靠流 + 不可靠数据报,适应不同场景。
- 多路复用:多个流并行传输,提高效率。
WebTransport 的核心特性
不可靠数据报(Datagram)
-
类似 UDP,数据可能丢失,但延迟极低。
-
适用于 实时游戏、视频会议、传感器数据 等场景。
-
API 示例:
javascriptconst transport = new WebTransport('https://example.com'); transport.datagrams.send(new Uint8Array([1, 2, 3])); // 发送数据报
可靠流(Stream)
-
类似 TCP,数据有序、可靠传输。
-
适用于 文件传输、聊天消息 等场景。
-
API 示例:
javascriptconst stream = await transport.createBidirectionalStream(); stream.writable.getWriter().write(data); // 发送数据
多路复用
- 多个流共享同一连接,互不干扰。
- 避免队头阻塞,提高传输效率。
WebTransport vs WebSocke
对比项 | WebTransport | WebSocket |
---|---|---|
底层协议 | QUIC (UDP) | TCP |
传输模式 | 可靠流 + 不可靠数据报 | 仅可靠字节流 |
多路复用 | ✅(无队头阻塞) | ❌ |
延迟 | 更低(基于UDP) | 较高(依赖TCP) |
适用场景 | 游戏、实时音视频 | 聊天室、通知 |
WebTransport 的工作原理
连接建立
- QUIC 握手:基于 UDP 建立连接,协商 TLS 加密和多路复用能力。
- HTTP/3 Upgrade:通过 HTTP/3 扩展帧确认 WebTransport 支持。
数据传输
- 不可靠数据报:直接发送,无重传机制。
- 可靠流:通过 QUIC 的流控制保证数据顺序和完整性。
连接关闭
- 客户端或服务器可主动关闭连接。
WebTransport 的适用场景
- 实时游戏(低延迟位置同步)。
- 视频会议(音视频 + 信令混合传输)。
- IoT 设备控制(双向通信 + 多路复用)。
- 金融实时数据推送(高频率更新)。
浏览器兼容性与未来展望
- 已支持:Chrome、Edge、Firefox(部分版本)。
- 实验性支持:Safari。
- 未来趋势:可能成为 WebRTC 的替代方案。 附浏览器的支持情况情况:

如何使用 WebTransport
客户端代码示例
javascript
const transport = new WebTransport('https://example.com');
// 发送数据报(UDP风格)
transport.datagrams.send(new Uint8Array([1, 2, 3]));
// 创建可靠双向流
const stream = await transport.createBidirectionalStream();
const writer = stream.writable.getWriter();
writer.write(new TextEncoder().encode("Hello WebTransport!"));
服务器端(Node.js 示例)
javascript
import { createServer } from 'node:http3';
import { WebTransport } from '@fails-components/webtransport';
const server = createServer();
server.listen(443);
server.on('session', (session) => {
const wt = new WebTransport(session);
wt.on('datagram', ({ data }) => {
console.log('Received datagram:', data);
});
});
总结
WebTransport 是 Web 实时通信的重要演进,它:
- 基于 QUIC,提供低延迟、多路复用能力。
- 支持混合传输模式(可靠流 + 不可靠数据报)。
- 适用于游戏、视频会议、IoT 等场景。
尽管目前浏览器支持仍在完善,但 WebTransport 无疑是未来 Web 实时通信的重要技术。