by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=12112
本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。

一、比 WebSocket 更懂低延迟的开发新利器

时间如斯，一转眼，做前端开发已经十五六年了，刚开始那会儿，实时通信还是使用轮询、长轮询，后来就是 WebSocket，然后现在又出来了个WebTransport。

WebSocket虽然可以解决大部分的问题，但是并不完美，例如队头阻塞、只能单一流传输、网络切换就断连，尤其是做实时游戏、直播推流这类对延迟要求极高的场景，总觉得差点意思。

所以就有了 WebTransport API，特别使用用在高并发、低延迟的实时场景。

二、WebTransport和WebSocket的区别

WebTransport 是基于 HTTP/3 + QUIC 协议的新一代实时通信 API，主打一个“低延迟、高吞吐、高灵活”，专门解决 WebSocket 搞不定的那些场景。

我做了个简单的对比表，大家一看就明白：

这里需要补充一点：

不是说 WebSocket 不好用了，而是场景不同，选择不同。

如果你的项目只是简单的聊天功能，WebSocket 足够用，没必要强行上 WebTransport；

但如果涉及到高频数据传输（比如游戏里的玩家位置更新）、低延迟要求（比如直播弹幕实时推送），WebTransport 就是最优解。

这就像我们做布局，简单布局用 Flex 就够，复杂布局才需要 Grid，因地制宜最重要。

三、核心知识点：WebTransport 的3个关键特性

WebTransport 的核心优势，都源于它的底层协议，但我们前端不用去深究 QUIC 协议的细节，只要掌握它的3个核心特性，就能应对大部分开发场景。

1. 双重传输模式：可靠流 + 不可靠数据报

这是 WebTransport 最核心的亮点，也是和 WebSocket 最大的区别——它支持两种传输方式，可根据需求灵活选择：

• 可靠流（Stream）：和 WebSocket 类似，保证数据有序、不丢失、不重复，适合传输重要数据（比如聊天消息、协作工具的编辑操作）；
• 不可靠数据报（Datagram）：不保证数据的有序性和到达率，但延迟极低，适合传输非关键数据（比如游戏玩家的实时位置、直播的视频帧）。

比方说一个实时多人小游戏，玩家的位置更新不需要100%到达（偶尔丢一个包不影响体验），但聊天消息必须可靠到达。

如果用 WebSocket，只能用一种传输方式，要么牺牲延迟，要么牺牲可靠性。

而用 WebTransport，就能给位置更新用不可靠数据报，聊天消息用可靠流，完美兼顾。

数据传输示意图如下：

2. 多路复用：一个连接，多个流并行

WebSocket 是“单一流”传输，也就是说，一个 WebSocket 连接里，所有数据都在一条流里传输，一旦某个数据包丢失，后续所有数据都要等它重传，这就是“队头阻塞”。

而 WebTransport 支持多路复用，一个连接里可以同时创建多个独立的流，每个流互不影响。

比如你做一个直播平台，视频流、音频流、弹幕流可以用不同的流传输，就算视频流出现丢包重传，也不会影响弹幕的实时推送。

这一点，在高并发场景下，体验提升非常明显。

3. 连接迁移：网络切换不中断

这个特性可能很多同学没意识到它的重要性，但做移动端项目的同学一定懂：

用户用手机浏览网页时，经常会在 Wi-Fi 和 4G/5G 之间切换，这时候 WebSocket 连接会直接断开，需要重新握手建立连接，导致数据中断（比如直播卡顿、游戏掉线）。

WebTransport 基于 QUIC 协议，用“连接ID”来标识连接，而不是 IP 地址，所以就算网络切换，连接也能无缝迁移，数据不会中断。

四、WebTransport 核心 API 用法

下面给大家讲解 WebTransport 的核心用法，包括从连接建立，到两种传输模式的使用，每一步都有注释，供大家学习参考。

1. 第一步：建立 WebTransport 连接

建立连接很简单，用 WebTransport 构造函数，传入服务器地址，等待 ready 状态即可。这里要注意，服务器地址必须是 https 开头，并且要指定端口（比如 4433）。

// 建立 WebTransport 连接
async function createWebTransport() {
  // 服务器地址（必须是 HTTPS，端口可自定义）
  const url = 'https://example.com:4433/transport';
  
  try {
    // 创建 WebTransport 实例
    const transport = new WebTransport(url, {
      // 可选：证书指纹，用于验证服务器身份（防止中间人攻击）
      serverCertificateHashes: [
        {
          algorithm: 'sha-256',
          value: new Uint8Array([/* 服务器证书指纹 */])
        }
      ]
    });
    
    // 等待连接就绪（ready 是一个 Promise）
    await transport.ready;
    console.log('WebTransport 连接成功');
    
    // 监听连接关闭事件
    transport.closed.then(() => {
      console.log('WebTransport 连接关闭');
    }).catch((err) => {
      console.error('WebTransport 连接异常关闭：', err);
    });
    
    return transport;
  } catch (err) {
    console.error('WebTransport 连接失败：', err);
    throw err;
  }
}

2. 第二步：使用可靠流（Stream）传输数据

可靠流分为“双向流”和“单向流”，双向流是客户端和服务器可以互相发送数据，单向流是只能一方发送、另一方接收。实际开发中，双向流用得最多（比如聊天）。

// 双向可靠流示例（客户端 ↔ 服务器）
async function useBidirectionalStream(transport) {
  // 创建双向流
  const stream = await transport.createBidirectionalStream();
  
  // 发送流（客户端 → 服务器）
  const writable = stream.writable;
  const writer = writable.getWriter();
  // 发送文本数据（需要先编码为 Uint8Array）
  const encoder = new TextEncoder();
  await writer.write(encoder.encode('Hello WebTransport!'));
  // 发送完成后关闭写入流
  await writer.close();
  
  // 接收流（服务器 → 客户端）
  const readable = stream.readable;
  const reader = readable.getReader();
  const decoder = new TextDecoder();
  
  while (true) {
    const { value, done } = await reader.read();
    if (done) break; // 接收完成
    console.log('收到服务器消息：', decoder.decode(value));
  }
}

3. 第三步：使用不可靠数据报（Datagram）传输数据

不可靠数据报的用法更简单，不需要创建流，直接通过 datagrams 属性发送和接收数据，适合高频、非关键数据的传输。

// 不可靠数据报示例（适合高频数据）
async function useDatagram(transport) {
  // 发送数据报（客户端 → 服务器）
  const writer = transport.datagrams.writable.getWriter();
  const encoder = new TextEncoder();
  // 模拟高频发送（比如游戏玩家位置）
  setInterval(async () => {
    const position = { x: Math.random() * 100, y: Math.random() * 100 };
    await writer.write(encoder.encode(JSON.stringify(position)));
  }, 33); // 30 FPS，和游戏帧率同步
  
  // 接收数据报（服务器 → 客户端）
  const reader = transport.datagrams.readable.getReader();
  const decoder = new TextDecoder();
  
  while (true) {
    const { value, done } = await reader.read();
    if (done) break;
    const data = JSON.parse(decoder.decode(value));
    console.log('收到位置数据：', data);
  }
}

这里提醒大家一句：不可靠数据报不保证数据到达，所以不要用它传输重要数据（比如支付信息），否则会出现数据丢失的问题。

4. 完整实战代码（整合连接、流、数据报）

// 完整实战代码
async function webTransportDemo() {
  try {
    // 1. 建立连接
    const transport = await createWebTransport();
    
    // 2. 同时使用双向流和数据报
    useBidirectionalStream(transport);
    useDatagram(transport);
    
    // 3. 关闭连接（按需调用）
    // setTimeout(() => {
    //   transport.close();
    //   console.log('主动关闭连接');
    // }, 10000);
  } catch (err) {
    console.error('WebTransport 实战失败：', err);
  }
}

// 执行 demo
webTransportDemo();

五、总结：WebTransport 该用在什么场景？

最后，再给大家做个总结，帮大家理清 WebTransport 的适用场景，避免盲目使用。

如果你遇到以下场景，强烈建议用 WebTransport：

• 实时游戏：需要低延迟、高频数据传输，允许少量数据丢失；
• 直播推流/拉流：视频帧、音频帧用不可靠数据报，控制信令用可靠流；
• 实时协作工具：多人同时编辑，需要低延迟、可靠的数据传输；
• 移动端实时应用：需要支持网络切换不中断，提升用户体验。

如果只是简单的实时聊天、消息推送，WebSocket 已经足够用，没必要强行上 WebTransport——技术选型的核心是“合适”，而不是“最新”。

另外，WebTransport 必须在 HTTPS 环境下使用（本地开发可以用 localhost），目前主流浏览器（Chrome 103+、Firefox 114+、Safari 16+）都已支持，Node.js 从 v18.0+ 开始支持，兼容性基本不用太担心。

前端技术更新很快，我们不用追求掌握所有新特性，但对于那些能解决实际痛点、提升开发效率的技术，多花点时间吃透，总能在项目中发挥作用。

希望这篇文章能帮大家快速上手 WebTransport，少踩坑、多提效。

对了，提一嘴：本文的原理示意图和代码按钮都是AI生成的，仅供参考！

😉😊😇
🥰😍😘

本文为原创文章，会经常更新知识点以及修正一些错误，因此转载请保留原出处，方便溯源，避免陈旧错误知识的误导，同时有更好的阅读体验。
本文地址：https://www.zhangxinxu.com/wordpress/?p=12112

（本篇完）