99%前端不知道的API WebTransport

概述

在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 虽然广泛用于实时通信，但仍有一些缺点：

1. 基于 TCP：TCP 的队头阻塞问题会影响实时性。
2. 单一数据流：无法同时传输多个独立数据流。
3. 缺乏不可靠传输：所有数据必须可靠送达，不适合实时音视频等场景。

HTTP/2 的局限性

HTTP/2 虽然支持多路复用，但：

• 仍然依赖 TCP，存在队头阻塞问题。
• 主要用于请求-响应模式，不适合双向实时通信。

2.3 WebTransport 的解决方案

• 基于 QUIC（UDP） ：避免 TCP 的队头阻塞，降低延迟。
• 支持混合传输模式：可靠流 + 不可靠数据报，适应不同场景。
• 多路复用：多个流并行传输，提高效率。

---

WebTransport 的核心特性

不可靠数据报（Datagram）

• 类似 UDP，数据可能丢失，但延迟极低。

• 适用于 实时游戏、视频会议、传感器数据 等场景。

• API 示例：

  const transport = new WebTransport('https://example.com');
  transport.datagrams.send(new Uint8Array([1, 2, 3])); // 发送数据报

可靠流（Stream）

• 类似 TCP，数据有序、可靠传输。

• 适用于 文件传输、聊天消息 等场景。

• API 示例：

  const stream = await transport.createBidirectionalStream();
  stream.writable.getWriter().write(data); // 发送数据

多路复用

• 多个流共享同一连接，互不干扰。
• 避免队头阻塞，提高传输效率。

---

WebTransport vs WebSocke

对比项	WebTransport	WebSocket
底层协议	QUIC (UDP)	TCP
传输模式	可靠流 + 不可靠数据报	仅可靠字节流
多路复用	✅（无队头阻塞）	❌
延迟	更低（基于UDP）	较高（依赖TCP）
适用场景	游戏、实时音视频	聊天室、通知

---

WebTransport 的工作原理

连接建立

1. QUIC 握手：基于 UDP 建立连接，协商 TLS 加密和多路复用能力。
2. HTTP/3 Upgrade：通过 HTTP/3 扩展帧确认 WebTransport 支持。

数据传输

• 不可靠数据报：直接发送，无重传机制。
• 可靠流：通过 QUIC 的流控制保证数据顺序和完整性。

连接关闭

• 客户端或服务器可主动关闭连接。

WebTransport 的适用场景

1. 实时游戏（低延迟位置同步）。
2. 视频会议（音视频 + 信令混合传输）。
3. IoT 设备控制（双向通信 + 多路复用）。
4. 金融实时数据推送（高频率更新）。

浏览器兼容性与未来展望

• 已支持：Chrome、Edge、Firefox（部分版本）。
• 实验性支持：Safari。
• 未来趋势：可能成为 WebRTC 的替代方案。 附浏览器的支持情况情况：

如何使用 WebTransport

客户端代码示例

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 示例）

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 实时通信的重要技术。

参考资料

• W3C WebTransport Draft
• Google Developers: WebTransport
• MDN WebTransport API
• QUIC协议和HTTP/3