在现代 web 应用中，异步交互已经成为了非常重要的一部分。传统的 ajax 和 WebSocket 技术已经提供了一些解决方案，但它们仅仅是众多实现异步交互的工具之一。而在 ECMAScript 2019 中，新的 WebTransport API 提供了一种全新的实现异步交互的方式，而且它只需要纯前端页面即可实现！本文将介绍 WebTransport 的具体用法，并提供示例代码以供参考。
WebTransport 是什么？
WebTransport 是 ECMA 公司制定的一项新的 Web API，通过该 API 开发人员可以实现基于 HTTP/3 协议的，以客户端为中心的双向通信服务。可以把 WebTransport 理解为是 WebSocket 技术的一种加强版，在同一机器上或网络环境中，它可以提供更快更安全的数据传输。WebTransport 可以将多个 IP 数据包合并为一个 IP 数据包传输，从而减少传输包的数量和传输时间。WebTransport 还提供了类似于传输控制协议（TCP）的拥塞控制和流量控制机制，以确保稳定和可靠的通信。
WebTransport 的主要特点包括：
- 支持 HTTP/3 协议
- 支持浏览器的发现和证书管理
- 支持双向通信，适用于客户端和服务器之间的通信
- 支持复用连接，提高效率
- 支持灵活的缓冲区，适用于流媒体服务
如何使用 WebTransport？
除了使用 WebSocket，我们可以使用 WebTransport 来进行异步交互。下面是一个简单的示例代码：
-- -------------------- ---- ------- --- --------- - --- ------------------------------------ ---------------- - --------------- - ------------------------- ---------- --------- -- ------------------- - --------------- - -------------------- ----------- ------------------------ -- ----------------- - --------------- - --------------------------- ---------- -------- --------------------- -- ----------------- - --------------- - ------------------------- ---------- --------- -- --- ------- - ------ -------- --- -------------- - --- ------------------------------ -------------------------------
在这段代码中，我们首先创建了一个新的 WebTransport 对象，并通过将 URL（在本例中为 ws://localhost:8080）传递给构造函数来创建该对象。然后，我们添加了一些事件处理程序，以便在连接打开、收到消息、连接错误和连接关闭时执行一些操作。最后，我们使用 transport.send() 方法将消息发送到服务器。
需要注意的是，使用 WebTransport 与使用 WebSocket 不同，我们无需手动发送消息头和消息体大小，WebTransport 很好地为我们处理了这些问题。另外，虽然此示例中使用的 URL 是 ws://localhost:8080，但是 WebTransport 实际上支持其他协议，如 wss 和 https。
结论
WebTransport 是一项非常有用的技术，它可以为我们提供更快、更安全和更可靠的异步交互方式。如果你正在开发现代的 web 应用，那么 WebTransport 绝对值得一试！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/672f2eb1eedcc8a97c8d1fe5