Web Transport：探讨`WebTransport`在实时通信和低延迟数据传输中的应用。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

WebTransport：实时通信与低延迟数据传输的未来

大家好！今天我们来深入探讨一项新兴的网络传输协议——WebTransport。在实时通信和低延迟数据传输领域，WebTransport正逐渐展现出其强大的潜力，成为WebSockets之外的又一个重要选择。本次讲座将深入剖析WebTransport的核心概念、优势、应用场景以及实际代码示例，帮助大家全面理解并掌握这项技术。

一、WebTransport 概述

WebTransport 是一种基于 HTTP/3 的多路复用、双向通信协议。它旨在为 Web 应用程序提供低延迟、可靠的数据传输能力，特别适用于实时游戏、音视频流媒体、远程桌面等场景。与传统的 WebSockets 相比，WebTransport 具有以下显著优势：

基于 HTTP/3： 利用 QUIC 协议的优势，提供更好的拥塞控制、抗丢包能力和连接迁移能力，从而实现更稳定的连接和更低的延迟。
多路复用： 允许在单个 WebTransport 连接上并发传输多个数据流，避免了队头阻塞问题，提高了传输效率。
双向通信： 支持服务器和客户端之间的双向数据传输，方便构建实时交互应用。
可靠和不可靠数据传输： 提供可靠的数据流和不可靠的数据报两种传输模式，满足不同应用场景的需求。
流（Streams）： 有序的、可靠的双向字节流。
数据报（Datagrams）： 无序的、不可靠的数据包。

二、WebTransport 的核心概念

要理解 WebTransport，需要掌握以下几个核心概念：

QUIC (Quick UDP Internet Connections): WebTransport 基于 QUIC 协议构建。QUIC 是一种基于 UDP 的传输层协议，提供了可靠性、安全性和拥塞控制等功能，旨在替代 TCP。
HTTP/3: QUIC 是 HTTP/3 的底层传输协议。WebTransport 利用 HTTP/3 的一些特性，例如多路复用和头部压缩。
WebTransport Session: 代表客户端和服务器之间的 WebTransport 连接。一个 Session 可以包含多个 Streams 和 Datagrams。
Streams: 提供可靠的、有序的数据传输。类似于 TCP 连接，但可以在单个 WebTransport Session 中创建多个 Streams。
Datagrams: 提供不可靠的、无序的数据传输。类似于 UDP 数据报，适用于对延迟敏感但对数据丢失不敏感的场景。

三、WebTransport 的优势与劣势

优势：

特性	描述
低延迟	基于 QUIC 协议，减少了握手延迟和拥塞控制延迟。
多路复用	允许在单个连接上并发传输多个数据流，避免了队头阻塞问题。
可靠性与不可靠性	提供可靠的数据流和不可靠的数据报两种传输模式，满足不同应用场景的需求。
连接迁移	支持客户端在网络切换时保持连接不断开。
安全性	基于 TLS 1.3 加密，提供安全的数据传输。

劣势：

劣势	描述
浏览器支持	目前 WebTransport 的浏览器支持还在发展中，并非所有浏览器都支持。
服务器支持	需要专门的 WebTransport 服务器实现，例如基于 Node.js 的 `webtransport` 库或基于 Rust 的 `quinn` 库。
复杂性	相对于 WebSockets，WebTransport 的实现和配置更加复杂。
中间件限制	由于QUIC协议使用UDP，一些传统的网络中间件（例如代理服务器和防火墙）可能不支持或限制QUIC流量，这可能导致WebTransport连接失败或性能下降。需要仔细配置网络基础设施以确保WebTransport连接的畅通。

四、WebTransport 的应用场景

WebTransport 适用于以下场景：

实时游戏： 提供低延迟、可靠的数据传输，支持多人在线游戏。
音视频流媒体： 实时传输音视频数据，支持直播和视频会议。
远程桌面： 传输屏幕图像和用户输入，实现远程控制。
数据推送： 服务器向客户端实时推送数据，例如股票行情、新闻更新等。
物联网 (IoT): 在资源受限的设备上提供高效的数据传输。

五、WebTransport 的代码示例

接下来，我们将通过代码示例来演示如何使用 WebTransport。我们将分别展示客户端和服务器端的代码。

1. 服务器端 (Node.js):

首先，我们需要安装 webtransport 库：

npm install @failsafe/webtransport

然后，我们可以创建一个简单的 WebTransport 服务器：

import { WebTransportServer } from '@failsafe/webtransport';
import { createServer } from 'https';
import { readFileSync } from 'fs';

// 证书和密钥文件
const certFile = 'cert.pem';
const keyFile = 'key.pem';

const options = {
    cert: readFileSync(certFile),
    key: readFileSync(keyFile),
};

const server = createServer(options);

const wtServer = new WebTransportServer({ server });

wtServer.handleStream((stream) => {
    console.log('New stream opened');

    stream.readable.pipeTo(new WritableStream({
        write(chunk) {
            console.log(`Received: ${new TextDecoder().decode(chunk)}`);
            // Echo back the data
            stream.writable.getWriter().write(chunk);
        },
        close() {
            console.log('Stream closed');
        }
    }));
});

wtServer.handleUnidirectionalStream((stream) => {
    console.log('New unidirectional stream opened');

    stream.readable.pipeTo(new WritableStream({
        write(chunk) {
            console.log(`Received (unidirectional): ${new TextDecoder().decode(chunk)}`);
        },
        close() {
            console.log('Unidirectional stream closed');
        }
    }));
});

wtServer.handleDatagram((datagram) => {
    console.log(`Received datagram: ${new TextDecoder().decode(datagram)}`);
});

server.listen(4433, () => {
    console.log('WebTransport server listening on port 4433');
});

process.on('SIGINT', () => {
    console.log('Shutting down server');
    wtServer.close().then(() => {
        server.close(() => {
            process.exit(0);
        });
    });
});

说明:

WebTransportServer 用于创建 WebTransport 服务器。
handleStream 用于处理客户端发起的双向流。
handleUnidirectionalStream 用于处理客户端发起的单向流 (仅客户端发送数据)。
handleDatagram 用于处理客户端发送的数据报。
服务器监听在 4433 端口上，需要提供 SSL 证书和密钥。

2. 客户端 (JavaScript):

async function connectWebTransport() {
    try {
        const wt = new WebTransport('https://localhost:4433/');
        await wt.ready;
        console.log('WebTransport connected!');

        // Streams
        const stream = await wt.createUnidirectionalStream(); // 创建一个单向流
        const writer = stream.getWriter();
        await writer.write(new TextEncoder().encode('Hello from client (stream)!'));
        await writer.close();

        const bidirectionalStream = await wt.createBidirectionalStream();
        const bidirectionalWriter = bidirectionalStream.writable.getWriter();
        await bidirectionalWriter.write(new TextEncoder().encode('Hello from client (bidirectional stream)!'));
        await bidirectionalWriter.close();

        const reader = bidirectionalStream.readable.getReader();
        const { value, done } = await reader.read();
        if (!done) {
            console.log(`Received from server (bidirectional stream): ${new TextDecoder().decode(value)}`);
        }
        reader.releaseLock();

        // Datagrams
        const datagramWriter = wt.datagrams.writable.getWriter();
        await datagramWriter.write(new TextEncoder().encode('Hello from client (datagram)!'));
        await datagramWriter.close();

        wt.datagrams.readable.pipeTo(new WritableStream({
            write(chunk) {
                console.log(`Received Datagram: ${new TextDecoder().decode(chunk)}`);
            }
        }));

        wt.closed.then(() => {
            console.log('WebTransport connection closed.');
        });
    } catch (e) {
        console.error('WebTransport connection failed: ', e);
    }
}

connectWebTransport();

说明:

WebTransport 用于创建 WebTransport 客户端。
wt.ready 返回一个 Promise，在连接建立完成后 resolve。
createUnidirectionalStream() 创建一个客户端到服务器的单向流。
createBidirectionalStream() 创建一个双向流。
wt.datagrams 用于发送和接收数据报。
wt.closed 返回一个 Promise，在连接关闭后 resolve。

注意：

需要在 https://localhost:4433/ 上运行服务器。
由于使用了自签名证书，需要在浏览器中信任该证书。
这段客户端代码需要在支持 WebTransport 的浏览器环境中运行。目前支持的浏览器包括 Chrome Canary (需要启用实验性 WebTransport 功能) 和 Firefox Nightly (需要启用 network.webtransport.enabled 标志)。
请确保你的Node.js版本支持ES模块（至少是14+）。如果你的项目使用CommonJS，你需要使用require而不是import。
服务器和客户端都需要TLS证书。你可以使用mkcert工具快速生成本地可信的证书。

运行步骤:

安装 Node.js 和 npm。
创建 cert.pem 和 key.pem 证书文件。可以使用 openssl 命令生成自签名证书：openssl req -x509 -newkey rsa:2048 -keyout key.pem -out cert.pem -days 365 (不推荐用于生产环境)。也可以用mkcert -install和mkcert localhost 生成本地可信证书。
运行服务器端代码：node server.js。
将客户端代码保存为 HTML 文件，并在支持 WebTransport 的浏览器中打开。

六、WebTransport 与 WebSockets 的比较

WebTransport 和 WebSockets 都是用于实时通信的协议，但它们之间存在一些关键区别：

特性	WebTransport	WebSockets
传输协议	基于 HTTP/3 (QUIC)	基于 TCP
多路复用	支持多路复用	不支持多路复用 (需要额外的协议支持)
可靠性	提供可靠的数据流和不可靠的数据报两种传输模式	提供可靠的数据传输
延迟	低延迟，QUIC 协议的特性减少了握手延迟和拥塞控制延迟	相对较高延迟，TCP 协议的特性导致握手延迟和队头阻塞
连接迁移	支持连接迁移	不支持连接迁移
安全性	基于 TLS 1.3 加密	基于 TLS 加密 (需要使用 `wss://` 协议)
适用场景	实时游戏、音视频流媒体、远程桌面等对延迟敏感的应用	聊天应用、数据推送等对延迟要求不高的应用
复杂性	相对复杂，需要专门的服务器实现和配置	相对简单，易于实现和部署
浏览器支持	仍在发展中，并非所有浏览器都支持	广泛支持
协议开销	QUIC头部开销比TCP大，尤其是在小包传输场景下。	TCP头部开销较小。
拥塞控制	QUIC的拥塞控制算法通常比TCP更先进，可以更好地适应网络变化。	TCP的拥塞控制算法较为成熟，但在某些网络环境下可能不如QUIC。

总的来说，WebTransport 在低延迟、高可靠性方面具有优势，更适合对实时性要求高的应用。WebSockets 则在兼容性和易用性方面更胜一筹，适用于对延迟要求不高的场景。

七、WebTransport 的未来发展

WebTransport 是一项新兴的技术，仍在不断发展中。未来，我们可以期待以下发展趋势：

更广泛的浏览器支持： 随着 WebTransport 标准的成熟，越来越多的浏览器将支持 WebTransport。
更丰富的服务器端实现： 更多的编程语言和框架将提供 WebTransport 服务器端实现。
更多的应用场景： WebTransport 将被应用到更多的实时通信和低延迟数据传输场景中。
标准化和优化： WebTransport 协议将不断标准化和优化，提高性能和安全性。
集成WebCodecs API: WebTransport和WebCodecs API的结合将为Web上的实时音视频应用带来革命性的变化。WebCodecs API允许开发者直接访问浏览器的音视频编解码器，从而实现更高效、更灵活的音视频处理。通过WebTransport传输WebCodecs API编码后的数据，可以实现极低的延迟和高度的自定义性。

八、一些实际应用可能遇到的问题和解决方案

NAT Traversal问题：
- 问题： WebTransport 使用 UDP，因此可能受到 NAT（网络地址转换）的限制，导致客户端无法连接到服务器。
- 解决方案：
  - TURN 服务器： 使用 TURN（Traversal Using Relays around NAT）服务器中继流量。TURN 服务器充当客户端和服务器之间的中介，帮助穿越 NAT。
  - STUN 服务器： 使用 STUN（Session Traversal Utilities for NAT）服务器来发现客户端的公共 IP 地址和端口，以便服务器可以直接连接到客户端。但是，STUN 只能解决某些类型的 NAT 问题。
  - ICE 协议： 使用 ICE（Interactive Connectivity Establishment）协议来协商最佳的连接方式。ICE 结合了 STUN 和 TURN，以找到最有效的 NAT 穿越解决方案。
防火墙限制：
- 问题： 某些防火墙可能会阻止 UDP 流量，从而阻止 WebTransport 连接。
- 解决方案：
  - 配置防火墙： 配置防火墙以允许 UDP 流量通过。
  - 使用 WebSocket 回退： 如果 WebTransport 连接失败，则回退到 WebSocket 连接。这可以确保在不支持 WebTransport 的环境中，应用程序仍然可以正常工作。
  - HTTP/3 端口： 确保防火墙允许通过 HTTP/3 的默认端口 (443)。
丢包和拥塞：
- 问题： 在网络拥塞或不稳定的情况下，UDP 数据包可能会丢失或延迟，从而影响 WebTransport 连接的质量。
- 解决方案：
  - 前向纠错 (FEC)： 使用 FEC 技术在数据包中添加冗余信息，以便在数据包丢失时可以恢复数据。
  - 拥塞控制： 使用 QUIC 协议提供的拥塞控制机制来调整发送速率，以避免网络拥塞。
  - 重传机制： 对于可靠的 WebTransport 流，使用重传机制来确保数据包按顺序可靠地到达。
安全问题：
- 问题： WebTransport 连接可能会受到中间人攻击或其他安全威胁。
- 解决方案：
  - TLS 加密： 始终使用 TLS 加密来保护 WebTransport 连接。
  - 身份验证： 实施身份验证机制来验证客户端和服务器的身份。
  - 授权： 实施授权机制来控制客户端可以访问的资源。
  - 安全审计： 定期进行安全审计，以识别和修复潜在的安全漏洞。
性能优化：
- 问题： 在某些情况下，WebTransport 连接的性能可能不佳。
- 解决方案：
  - 调整 QUIC 参数： 调整 QUIC 协议的参数，例如拥塞窗口大小和最大传输单元 (MTU)，以优化性能。
  - 数据压缩： 使用数据压缩技术来减少数据传输量。
  - 连接复用： 尽可能复用现有的 WebTransport 连接，而不是为每个请求创建一个新的连接。
  - 避免小数据包： 尽量避免发送小数据包，因为每个数据包都有头部开销。可以将多个小数据包组合成一个大数据包来提高效率。
  - 选择合适的编解码器： 对于音视频流，选择合适的编解码器可以显著提高性能。例如，使用 VP9 或 AV1 等现代编解码器可以提供更好的压缩率和质量。
版本兼容性：
- 问题： WebTransport 协议仍在发展中，不同的浏览器和服务器实现可能使用不同的版本。
- 解决方案：
  - 版本协商： 实施版本协商机制，以便客户端和服务器可以协商使用兼容的 WebTransport 版本。
  - 向后兼容性： 尽量保持向后兼容性，以便旧的客户端仍然可以连接到新的服务器。
  - 定期更新： 定期更新浏览器和服务器实现，以获取最新的 WebTransport 功能和安全修复。

关于WebTransport与CDN的集成

WebTransport与CDN的集成是一个复杂但非常有前景的领域，能够显著提升实时通信和低延迟数据传输的性能和可扩展性。

挑战：

UDP支持： 传统的CDN主要针对HTTP流量设计，通常基于TCP。WebTransport基于HTTP/3，而HTTP/3基于UDP，因此CDN需要支持UDP协议。
QUIC连接迁移： QUIC的连接迁移特性允许客户端在网络切换时保持连接，但CDN需要正确处理这些迁移，以确保会话的连续性。
动态内容缓存： WebTransport主要用于实时动态内容，这与CDN通常缓存静态内容不同。因此，需要设计新的缓存策略，或者绕过CDN的缓存机制。
会话保持： 对于需要会话保持的应用，CDN需要确保客户端始终连接到同一台服务器，或者在服务器之间同步会话状态。
安全： 保护WebTransport连接的安全至关重要，CDN需要提供TLS加密和其他安全措施。

可能的集成方式：

UDP加速： CDN提供UDP加速服务，将客户端的UDP流量路由到最近的CDN节点，然后通过CDN的骨干网络传输到服务器。这可以减少延迟和丢包。
边缘计算： 将WebTransport服务器部署在CDN的边缘节点上，直接在边缘节点处理客户端的请求。这可以显著减少延迟，并提高可扩展性。
协议转换： CDN将WebTransport协议转换为其他协议（例如WebSocket），以便更好地与现有的基础设施集成。但这可能会引入额外的延迟。
智能路由： CDN根据客户端的网络状况和服务器的负载情况，智能地将客户端路由到最佳的WebTransport服务器。
CDN支持QUIC协议: 一些CDN提供商正在积极开发和部署对QUIC协议的支持。这意味着CDN节点可以直接处理WebTransport连接，而无需进行协议转换。这将带来更低的延迟和更高的效率。例如，Fastly和Cloudflare等CDN提供商已经开始提供QUIC支持。