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/1HTTP/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 示例

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

可靠流(Stream)

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

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

  • API 示例

    javascript 复制代码
    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

客户端代码示例

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

参考资料

相关推荐
慧一居士19 分钟前
flex 布局完整功能介绍和示例演示
前端
DoraBigHead21 分钟前
小哆啦解题记——两数失踪事件
前端·算法·面试
一斤代码6 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子6 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年6 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子6 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina6 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路7 小时前
React--Fiber 架构
前端·react.js·架构
coderlin_7 小时前
BI布局拖拽 (1) 深入react-gird-layout源码
android·javascript·react.js
伍哥的传说8 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js