JavaScript内核与高级编程之：`JavaScript` 的 `Web Transport`：其在 `Web` 中的新传输协议。

各位观众，大家好！ 今天咱们来聊聊 JavaScript 中的一个新秀——WebTransport。 别看它名字里带着 "Transport"，就以为它是个搬运工，其实它是个相当酷炫的协议，专门为 Web 应用设计的，让数据传输更高效、更可靠。 咱们今天就来扒一扒它的皮，看看它到底有啥能耐。

WebTransport 是个啥？

简单来说，WebTransport 是一种基于 HTTP/3 的传输协议，它提供了一系列 API，让 Web 应用能够以客户端/服务器的方式进行双向数据传输。 听起来是不是有点像 WebSocket？ 嗯，有点像，但 WebTransport 比 WebSocket 更强大、更灵活，也更适应现代 Web 应用的需求。

为什么要用 WebTransport？

WebSocket 已经用了这么多年了，为啥还要搞个 WebTransport 出来呢？ 这就得说说 WebSocket 的一些缺点了：

• 单向流： WebSocket 只能建立一个 TCP 连接，所有数据都在这个连接上双向传输。 如果你想搞多个并发的请求，就得自己管理连接，比较麻烦。
• 头部开销： WebSocket 的头部开销比较大，尤其是在传输小数据包的时候，效率比较低。
• HTTP/1.1 依赖： WebSocket 依赖 HTTP/1.1 协议，而 HTTP/1.1 有一些性能瓶颈，比如队头阻塞。

WebTransport 则解决了这些问题：

• 多路复用： WebTransport 基于 HTTP/3，天然支持多路复用，可以在一个连接上同时传输多个数据流，避免了队头阻塞。
• 更低的延迟： HTTP/3 使用 UDP 作为传输层协议，减少了握手延迟，提高了传输速度。
• 双向流和单向流： WebTransport 支持双向流和单向流，可以根据不同的场景选择合适的传输方式。

WebTransport 的主要特性

特性	描述
基于 HTTP/3	利用 HTTP/3 的 QUIC 协议，提供可靠的、有序的、无阻塞的传输。
多路复用	允许在单个 WebTransport 连接上创建多个并发流，提高效率。
双向流	允许客户端和服务器双向发送和接收数据，类似于 WebSocket。
单向流	允许客户端或服务器单方面发送数据，无需等待响应，适用于广播等场景。
可靠性	提供可靠的数据传输，保证数据按顺序到达，不会丢失。
不可靠性	也支持不可靠的数据传输，适用于对延迟敏感但可以容忍少量数据丢失的场景，例如游戏。
灵活的 API	提供了一组灵活的 JavaScript API，方便开发者使用。

WebTransport 的 API

WebTransport 的 API 主要包括以下几个部分：

• WebTransport： 用于创建和管理 WebTransport 连接。
• WebTransportDatagramDuplexStream： 用于发送和接收不可靠的数据报。
• WebTransportBidirectionalStream： 用于发送和接收双向流。
• WebTransportReceiveStream： 用于接收单向流。
• WebTransportSendStream： 用于发送单向流。

WebTransport 的代码示例

光说不练假把式，咱们来写几个简单的代码示例，感受一下 WebTransport 的魅力。

服务器端 (Node.js):

首先，我们需要一个支持 HTTP/3 的服务器。 这里我们使用 node-webtransport 这个库。

const { WebTransportServer } = require('@failsafe/webtransport');
const fs = require('node:fs');

async function main() {
  const server = new WebTransportServer({
    port: 4433, // 监听端口
    certificate: fs.readFileSync('cert.pem'), // 证书
    privateKey: fs.readFileSync('key.pem'), // 私钥
  });

  server.handleStream(async (stream) => {
    const reader = stream.readable.getReader();
    const writer = stream.writable.getWriter();

    try {
      while (true) {
        const { done, value } = await reader.read();
        if (done) {
          break;
        }
        console.log('Received:', new TextDecoder().decode(value));
        await writer.write(value); // Echo back
      }
    } catch (e) {
      console.error('Stream error:', e);
    } finally {
      reader.releaseLock();
      writer.close();
    }
  });

  server.handleSession(async (session) => {
    console.log('New session:', session.sessionId);

    session.datagrams.readable.pipeTo(new WritableStream({
      write(chunk) {
        console.log('Datagram received:', new TextDecoder().decode(chunk));
        session.datagrams.writable.write(chunk); // Echo back
      }
    }));
  });

  console.log('WebTransport server listening on port 4433');
}

main().catch(console.error);

注意: cert.pem 和 key.pem 是 TLS 证书和私钥。 你可以使用 OpenSSL 生成它们:
openssl req -x509 -newkey rsa:2048 -keyout key.pem -out cert.pem -days 365 -nodes

客户端 (浏览器):

async function connect() {
  try {
    const transport = new WebTransport('https://localhost:4433/'); // 服务器地址
    await transport.ready;
    console.log('WebTransport connected!');

    // 双向流示例
    const stream = await transport.createBidirectionalStream();
    const writer = stream.writable.getWriter();
    const reader = stream.readable.getReader();

    const encoder = new TextEncoder();
    const decoder = new TextDecoder();

    await writer.write(encoder.encode('Hello, WebTransport!'));
    console.log('Sent: Hello, WebTransport!');

    const { value, done } = await reader.read();
    if (!done) {
      console.log('Received:', decoder.decode(value));
    }

    writer.close();
    reader.cancel();

    // Datagram 示例
    const datagramWriter = transport.datagrams.writable.getWriter();
    datagramWriter.write(encoder.encode('Hello Datagram!'));
    console.log('Sent Datagram: Hello Datagram!');

    transport.datagrams.readable.pipeTo(new WritableStream({
      write(chunk) {
        console.log('Datagram received:', decoder.decode(chunk));
      }
    }));

  } catch (e) {
    console.error('WebTransport connection failed:', e);
  }
}

connect();

代码解释:

• 服务器端:
  • 创建 WebTransportServer 实例，监听 4433 端口。
  • handleStream 处理双向流，接收客户端发送的数据，并将其原样返回 (Echo)。
  • handleSession 处理新的 WebTransport 会话，并处理数据报，将其原样返回。
• 客户端:
  • 创建 WebTransport 实例，连接到服务器。
  • createBidirectionalStream 创建一个双向流，发送 "Hello, WebTransport!" 消息，并接收服务器返回的消息。
  • 使用 transport.datagrams.writable 发送一个数据报 "Hello Datagram!"，并监听 transport.datagrams.readable 接收服务器返回的数据报。

运行代码:

1. 确保你安装了 Node.js 和 npm。
2. 安装 @failsafe/webtransport 库：npm install @failsafe/webtransport
3. 将服务器端代码保存为 server.js，客户端代码保存为 client.html。
4. 生成 TLS 证书和私钥 (如上所述)。
5. 运行服务器端代码：node server.js
6. 在浏览器中打开 client.html。 (你需要通过 HTTPS 提供该 HTML 文件，比如使用 npx serve 启动一个简单的 HTTP 服务器。)

你应该能在控制台中看到客户端和服务器端之间的消息交互。

WebTransport 的应用场景

WebTransport 适用于以下场景：

• 实时游戏： WebTransport 的低延迟和不可靠传输特性非常适合实时游戏，可以减少延迟，提高游戏的流畅度。
• 实时通信： WebTransport 可以用于构建实时的音视频通话应用，比如视频会议、在线直播等。
• 数据推送： WebTransport 的单向流特性可以用于服务器向客户端推送数据，比如实时新闻、股票行情等。
• 文件传输： WebTransport 的多路复用特性可以提高文件传输的效率，尤其是在传输大文件的时候。

WebTransport 的未来

WebTransport 还是一个比较新的技术，目前还在不断发展完善中。 随着 WebTransport 的普及，相信它会在 Web 应用开发中发挥越来越重要的作用。

一些需要注意的点

• 安全性： WebTransport 基于 HTTPS/3，因此具有很高的安全性。 但开发者仍然需要注意一些安全问题，比如防止跨站脚本攻击 (XSS)、跨站请求伪造 (CSRF) 等。
• 兼容性： 目前 WebTransport 的兼容性还不是很好，只有部分浏览器支持。 在实际应用中，需要进行兼容性处理。 可以在客户端代码中检查浏览器是否支持 WebTransport：

if ('WebTransport' in window) {
  // 支持 WebTransport
  console.log('WebTransport is supported!');
} else {
  // 不支持 WebTransport
  console.log('WebTransport is not supported!');
}

• 服务器配置： WebTransport 需要服务器支持 HTTP/3。 你需要在服务器上安装和配置 HTTP/3 相关的软件，比如 quiche, ngtcp2, 或者使用支持 HTTP/3 的 CDN 服务。

总结

WebTransport 是一种很有前景的 Web 传输协议，它解决了 WebSocket 的一些缺点，提供了更高效、更可靠、更灵活的数据传输方式。 随着 WebTransport 的普及，相信它会在 Web 应用开发中发挥越来越重要的作用。

好了，今天的 WebTransport 讲座就到这里了。 希望大家通过今天的学习，对 WebTransport 有了更深入的了解。 以后有机会，我们再来聊聊 WebTransport 的更多细节。 谢谢大家！

补充说明 (一些高级话题)

• WebTransport 和 QUIC: WebTransport 实际上是建立在 QUIC 协议之上的。 QUIC 是一种基于 UDP 的传输协议，由 Google 开发，旨在解决 TCP 的一些性能问题。 HTTP/3 就是基于 QUIC 的。 理解 QUIC 的工作原理有助于更好地理解 WebTransport。
• 拥塞控制: WebTransport 使用 QUIC 的拥塞控制机制来避免网络拥塞，保证数据传输的可靠性。
• 流控制: WebTransport 使用流控制机制来防止客户端或服务器端被大量数据淹没。
• 错误处理: WebTransport 提供了一系列错误处理机制，可以帮助开发者更好地处理网络错误。
• 与 WebSocket 的比较: 虽然 WebTransport 在很多方面优于 WebSocket，但 WebSocket 仍然有其优势。 例如，WebSocket 的兼容性更好，而且使用起来更简单。 在实际应用中，需要根据具体的场景选择合适的传输协议。 可以考虑使用 WebTransport 作为首选，并在不支持 WebTransport 的浏览器中使用 WebSocket 作为备选方案。

希望这些补充说明能让你对 WebTransport 有更全面的了解。 祝大家学习愉快！