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

参考资料

相关推荐
一斤代码2 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子2 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年2 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子3 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina3 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路4 小时前
React--Fiber 架构
前端·react.js·架构
coderlin_4 小时前
BI布局拖拽 (1) 深入react-gird-layout源码
android·javascript·react.js
伍哥的传说4 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409194 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding4 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js