使用 WebTransport 构建实时 Web 应用（取代 WebSocket？）

嘿，各位开发者！你们有没有过这样的感觉：开始阅读一项新技术时，突然意识到：等等……我怎么之前都没听说过？上周我偶然发现了 WebTransport，当时就是这种感觉。起初我以为，哦，又是一个被炒作的术语。肯定是 WebSocket 的一个新奇封装。但我大错特错了。深入了解之后，我发现 WebTransport 很有可能成为构建实时 Web 应用的下一代协议。在本文中，我们将尝试理解 WebTransport 究竟是什么，它为何如此令人兴奋，以及它与传统的 WebSocket 有何不同。我们将从像我们这样仍在学习但又渴望关注未来的开发者的角度出发，来探讨 WebTransport 的方方面面！

实时网络：快速回顾

但在深入探讨 WebTransport 之前，让我们先退一步。

如果你曾经建造过：

• 聊天应用
• 实时游戏更新
• 股票代码
• 多人游戏
• 如果你使用过协作编辑器（例如 Google Docs），你可能已经用过 WebSockets 了，对吧？

我的意思是，WebSocket 非常棒。它支持双向通信，客户端可以随时向服务器发送消息，反之亦然，而无需像 HTTP 那样经历完整的请求-响应模式。

但是……它们并不完美。

WebSocket 的常见局限性：

• 仅支持 TCP 协议，
无法优雅地处理网络切换。例如，从 Wi-Fi 切换到 5G 通常会导致连接断开，需要完全重新连接。

• 没有内置多路复用功能。
如果您需要处理多个独立的消息流，则必须构建自己的系统来管理它们。

• 难以处理大数据传输。
没有原生支持分块和重组；开发人员需要手动实现此功能。

• 与 QUIC 等现代传输协议不完全兼容。QUIC
（HTTP/3 使用）是 Web 传输的未来，但 WebSocket 无法利用其优势。

WebTransport：它是什么？

简而言之，WebTransport 是一种全新的浏览器 API，它允许您通过 QUIC 协议在客户端和服务器之间发送数据，从而实现快速、安全、实时的通信。
从概念上讲，您可以将其理解为“现代化的 WebSocket”。
以下是 WebTransport 的独特之处：

• 使用 HTTP/3 和 QUIC（基于 UDP，在许多情况下比 TCP 更快）。
• 支持双向流媒体和单向流媒体。
• 可以处理类似 UDP 的数据报（即发即弃消息）。
• 无需手动拆分不同类型的消息。您可以同时拥有多个消息流。

但 QUIC 是什么？

如果你也好奇“我一直听到的QUIC到底是什么？”，别担心，我一开始也有同样的疑问。简单来说：
• QUIC是谷歌设计的一种现代传输协议，旨在提升互联网连接的速度和可靠性。
• QUIC基于UDP协议而非TCP协议，但它依然具备传输协议应有的所有可靠性和纠错机制。
• 它也是HTTP/3的传输协议，HTTP/3正迅速成为快速安全网站加载的新标准。
• QUIC最巧妙之处在于它能够处理网络切换，例如，当你在家用手机观看视频时，走出家门，移动网络接管连接，QUIC会自动保持视频流的流畅播放，无需你重新连接。

WebTransport 与 WebSocket：快速比较

在比较 WebSocket 和 WebTransport 时，需要考虑以下几个重要方面：
底层协议

• WebSockets 运行在 TCP/IP 协议之上。
• WebTransport 使用基于 UDP 的 QUIC 协议，但提供更高的可靠性和安全性。

数据流

• WebSocket 是一个单一的连续流，如果您要处理多个任务，则需要自行进行消息顺序管理。
• 使用 WebTransport 可以同时处理多个并行流或数据报，因此更容易同时处理不同类型的数据。

表现

• WebSocket 在一般用途中性能良好。
• WebTransport 更适合大数据传输，或者当您需要并行发送和接收多个数据流时。

网络弹性

• WebSocket 在网络环境变化时非常脆弱。例如，如果用户从 Wi-Fi 切换到 5G，连接很可能会断开。
• 使用 WebTransport 就好多了。您可以实现无缝切换，并且连接始终保持畅通。

安全

• WebSocket 使用 TLS 进行安全保护。
• 目前浏览器正在通过运行时标志构建对 WebTransport 的支持，该功能尚未在任何正式版浏览器中提供。

浏览器支持

• 所有现代浏览器都支持WebSocket。
• WebTransport目前仅在Chrome和Edge浏览器中可用，未来将支持更多浏览器。

那么，WebTransport 会取代 WebSocket 吗？

也许吧……但不会一蹴而就。WebSocket 仍然被广泛支持，并且对许多应用程序来说都非常有用。
但对于需要以下功能的应用程序：

• 实时视频/音频流
• 高频游戏数据
• 同时进行大文件传输和聊天
  • 低延迟传感器数据 WebTransport 未来也可能是更好的选择。

快速代码预览

看起来和处理流很像，对吧？
那是因为它的底层原理就是处理流。

但是如何在服务器端使用它呢？
目前，服务器端的支持还比较棘手。
大多数 Node.js 服务器尚未开箱即用地支持 WebTransport。
不过，像 Node QUIC、Cloudflare Workers 和 Caddy 服务器这样的框架已经开始支持它了。

现在应该学习 WebTransport 吗？

想开发一个简单的聊天应用？
目前来说，WebSocket 就足够了。它设置起来更简单，而且对于基本的实时消息传递来说已经足够好用。
如果你正在开发游戏、VR 体验或任何交互式应用，WebSocket 也是不错的选择。如果你正在开发的应用需要实时发送大量数据，但同时工作负载又很高，或者你只是需要更便捷的体验，那么
WebRTC 就不是最佳选择，因为它一次只能发送一个数据流，而且处理大数据量的能力也有限。在这种情况下，WebTransport 绝对是你的理想之选！它代表着未来的实时网络通信，而且由于大多数浏览器都将支持它，所以拥有它也是明智之举。

说实话，我为什么对此感到兴奋
？感觉我们正处于实时 Web 应用新时代的开端。
过去，我们只能用 WebSocket、长轮询，甚至是自定义 UDP 方案来勉强实现一些功能。现在
，WebTransport 为我们提供了浏览器原生支持，无需任何变通就能实现高级实时通信。
虽然它还处于早期阶段，但在它成为主流之前，现在学习它绝对值得。