阐述 JavaScript 中的 WebTransport (基于 HTTP/3 和 QUIC) 如何提供可靠和不可靠的实时通信流，及其与 WebSocket 的区别。

嘿，大家好！今天咱们来聊聊 WebTransport，这玩意儿可是实时通信领域的新星，基于 HTTP/3 和 QUIC，能让你在浏览器和服务器之间玩转可靠和不可靠的通信流。别担心，咱们尽量用大白话，配上代码，保证你听得懂。

WebTransport：WebSocket 的进化版？

先来个开胃菜，很多人会问，WebTransport 和 WebSocket 有啥区别？它们都是为了解决客户端和服务器之间的实时通信问题，但底层技术和适用场景有所不同。可以把 WebTransport 看作是 WebSocket 的一个升级版，或者说，一个更灵活、更强大的替代方案。

特性	WebSocket	WebTransport
协议	基于 TCP 的自定义协议	基于 HTTP/3 和 QUIC 的标准协议
多路复用	不支持原生多路复用	支持原生多路复用
可靠性	只支持可靠传输	支持可靠和不可靠传输
拥塞控制	TCP 的拥塞控制机制	QUIC 的拥塞控制机制
加密	通过 TLS 握手实现加密	QUIC 内置加密，无需额外握手
客户端/服务器消息	面向消息，但消息边界需要应用层处理	面向流和数据报，消息边界由协议处理
适用场景	需要简单双向通信的应用，如在线聊天、实时数据更新	需要高性能、低延迟、多路复用、可靠和不可靠传输的应用，如游戏、音视频流

简单来说，WebSocket 就像一条单行道，只能让数据按照顺序，可靠地到达目的地。而 WebTransport 就像一条高速公路，支持多车道（多路复用），有些车道保证安全到达（可靠传输），有些车道则追求速度，丢点东西也无所谓（不可靠传输）。

HTTP/3 和 QUIC：WebTransport 的基石

要理解 WebTransport，就得先了解它的基石：HTTP/3 和 QUIC。

HTTP/3： 这不是你熟悉的 HTTP/1.1 或者 HTTP/2，它是 HTTP 的最新版本，但它跑在 QUIC 协议之上。这意味着它继承了 QUIC 的所有优点。
QUIC： 这才是 WebTransport 的核心。QUIC (Quick UDP Internet Connections) 是 Google 开发的一种传输协议，旨在解决 TCP 的一些问题，例如队头阻塞。

QUIC 的优点：

基于 UDP： UDP 允许更快的连接建立和更灵活的数据传输。
多路复用： 多个逻辑流可以共享一个 QUIC 连接，避免了 HTTP/2 中的队头阻塞问题。如果一个流丢包，不会影响其他流。
内置加密： QUIC 从一开始就强制加密，提高了安全性。
连接迁移： 客户端 IP 地址改变时，QUIC 可以保持连接不断开，这对于移动设备非常重要。

WebTransport 的两种通信模式：可靠流和不可靠数据报

WebTransport 提供了两种主要的通信模式：

可靠流 (Reliable Streams): 类似于 TCP 连接，保证数据按照发送顺序，完整地到达目的地。适用于需要保证数据完整性的场景，例如文件传输、控制命令等。
不可靠数据报 (Unreliable Datagrams): 类似于 UDP 数据报，不保证数据到达的顺序和完整性，但延迟更低。适用于实时性要求高的场景，例如游戏中的位置信息、音视频流等。

代码示例：WebTransport 初体验

咱们来写一些代码，让你更直观地了解 WebTransport 的使用。

服务端代码 (Node.js):

const { WebTransportServer } = require('@failsafe/webtransport'); // 注意：这个包可能需要安装，npm install @failsafe/webtransport

async function main() {
  const server = new WebTransportServer({
    port: 4433, // 选择一个合适的端口
    certFile: './certs/cert.pem', // 你的证书文件路径
    keyFile: './certs/key.pem',   // 你的私钥文件路径
  });

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

  server.handleStream(async (stream) => {
    console.log('New stream received');
    const reader = stream.readable.getReader();
    const writer = stream.writable.getWriter();

    try {
      while (true) {
        const { done, value } = await reader.read();
        if (done) {
          console.log('Stream closed');
          break;
        }

        const message = new TextDecoder().decode(value);
        console.log(`Received: ${message}`);

        // Echo back the message
        await writer.write(new TextEncoder().encode(`Server received: ${message}`));
      }
    } catch (e) {
      console.error(e);
    } finally {
      reader.releaseLock();
      writer.close();
    }
  });

  server.handleUnidirectionalStream(async (stream) => {
    console.log('New unidirectional stream received');
    const reader = stream.readable.getReader();

    try {
      while (true) {
        const { done, value } = await reader.read();
        if (done) {
          console.log('Unidirectional stream closed');
          break;
        }

        const message = new TextDecoder().decode(value);
        console.log(`Received (unidirectional): ${message}`);
      }
    } catch (e) {
      console.error(e);
    } finally {
      reader.releaseLock();
    }
  });

  server.handleDatagram((datagram) => {
    const message = new TextDecoder().decode(datagram);
    console.log(`Received datagram: ${message}`);
  });
}

main().catch(err => {
  console.error("Error running server:", err);
});

客户端代码 (浏览器):

<!DOCTYPE html>
<html>
<head>
  <title>WebTransport Example</title>
</head>
<body>
  <h1>WebTransport Example</h1>
  <button id="connectButton">Connect</button>
  <button id="sendStreamButton">Send Stream Message</button>
  <button id="sendDatagramButton">Send Datagram Message</button>
  <button id="createUnidirectionalStreamButton">Create Unidirectional Stream</button>
  <textarea id="streamMessage" rows="4" cols="50">Hello from stream!</textarea>
  <textarea id="datagramMessage" rows="4" cols="50">Hello from datagram!</textarea>
  <textarea id="unidirectionalStreamMessage" rows="4" cols="50">Hello from unidirectional stream!</textarea>

  <script>
    const connectButton = document.getElementById('connectButton');
    const sendStreamButton = document.getElementById('sendStreamButton');
    const sendDatagramButton = document.getElementById('sendDatagramButton');
    const createUnidirectionalStreamButton = document.getElementById('createUnidirectionalStreamButton');
    const streamMessageTextarea = document.getElementById('streamMessage');
    const datagramMessageTextarea = document.getElementById('datagramMessage');
    const unidirectionalStreamMessageTextarea = document.getElementById('unidirectionalStreamMessage');

    let transport;
    let streamWriter;

    connectButton.addEventListener('click', async () => {
      try {
        transport = new WebTransport('https://localhost:4433/'); // 替换为你的服务器地址
        await transport.ready;
        console.log('WebTransport connected!');

        // Create a bidirectional stream when connected
        const stream = await transport.createBidirectionalStream();
        console.log('Bidirectional stream created');
        streamWriter = stream.writable.getWriter();

        const reader = stream.readable.getReader();
        (async function read() {
          try {
            while (true) {
              const { done, value } = await reader.read();
              if (done) {
                console.log('Stream closed by server');
                break;
              }
              const message = new TextDecoder().decode(value);
              console.log(`Received from stream: ${message}`);
            }
          } catch (e) {
            console.error("Error reading from stream:", e);
          } finally {
            reader.releaseLock();
          }
        })();

        transport.datagrams.readable.pipeTo(new WritableStream({
          write(chunk) {
            const message = new TextDecoder().decode(chunk);
            console.log(`Received datagram: ${message}`);
          }
        }));

        console.log("Datagram reader started");

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

    sendStreamButton.addEventListener('click', async () => {
      if (!streamWriter) {
        console.warn('Stream writer not initialized.  Make sure the transport is connected');
        return;
      }

      const message = streamMessageTextarea.value;
      try {
        await streamWriter.write(new TextEncoder().encode(message));
        console.log(`Sent to stream: ${message}`);
      } catch (e) {
        console.error('Error writing to stream:', e);
      }
    });

    sendDatagramButton.addEventListener('click', async () => {
      if (!transport) {
        console.warn('Transport not initialized. Make sure the transport is connected.');
        return;
      }
      const message = datagramMessageTextarea.value;
      try {
        const encoder = new TextEncoder();
        const data = encoder.encode(message);
        transport.datagrams.writable.getWriter().then(writer => {
          writer.write(data);
          writer.close();
        });
        console.log(`Sent datagram: ${message}`);
      } catch (e) {
        console.error('Error sending datagram:', e);
      }
    });

    createUnidirectionalStreamButton.addEventListener('click', async () => {
      if (!transport) {
        console.warn('Transport not initialized. Make sure the transport is connected.');
        return;
      }
      const message = unidirectionalStreamMessageTextarea.value;
      try {
        const stream = await transport.createUnidirectionalStream();
        const writer = stream.writable.getWriter();
        await writer.write(new TextEncoder().encode(message));
        await writer.close();
        console.log(`Sent unidirectional stream: ${message}`);

      } catch (e) {
        console.error('Error creating unidirectional stream:', e);
      }
    });

  </script>
</body>
</html>

代码解释:

服务端:
- 使用了 @failsafe/webtransport 这个库（需要安装），初始化一个 WebTransport 服务器。
- 配置了端口、证书和私钥。注意: 你需要自己生成证书和私钥，这在生产环境中非常重要。你可以使用 openssl 等工具生成自签名证书，但浏览器默认不信任自签名证书，需要手动信任。
- handleStream 处理双向可靠流，接收客户端发送的消息，并回显。
- handleUnidirectionalStream 处理客户端创建的单向可靠流,接收客户端发送的消息。
- handleDatagram 处理不可靠数据报。
客户端:
- 创建 WebTransport 对象，连接到服务器。
- transport.ready 是一个 Promise，当连接建立成功后 resolve。
- transport.createBidirectionalStream() 创建一个双向可靠流，可以发送和接收数据。
- transport.createUnidirectionalStream() 创建一个单向可靠流，只能客户端发送数据。
- transport.datagrams.writable 和 transport.datagrams.readable 分别用于发送和接收不可靠数据报。
- 使用 TextEncoder 和 TextDecoder 在字符串和 Uint8Array 之间进行转换。
- 使用 WritableStream 和 ReadableStream API 处理流数据。

使用步骤:

生成证书和私钥: 使用 openssl 或其他工具生成 cert.pem 和 key.pem 文件。自签名证书在浏览器中需要手动信任。
安装依赖: 在服务端项目目录中运行 npm install @failsafe/webtransport。
运行服务端代码: 使用 node server.js 运行服务端代码。
在浏览器中打开客户端代码: 将客户端代码保存为 index.html 文件，并在浏览器中打开。
点击 "Connect" 按钮: 建立 WebTransport 连接。
发送消息: 在文本框中输入消息，然后点击相应的按钮发送消息。

注意事项:

证书: WebTransport 需要使用 HTTPS，因此必须配置证书。在生产环境中，应该使用受信任的证书颁发机构 (CA) 颁发的证书。
端口: WebTransport 通常使用 443 端口，但也可以使用其他端口。
兼容性: WebTransport 还在发展中，浏览器支持情况可能有所不同。目前 Chrome 和 Edge 浏览器支持较好。
错误处理: 代码中省略了一些错误处理，在实际应用中需要添加更完善的错误处理机制。
安全: 在实际应用中，需要考虑安全性问题，例如防止跨站脚本攻击 (XSS) 和跨站请求伪造 (CSRF)。

WebTransport 的优势

性能: 基于 QUIC，具有更低的延迟和更高的吞吐量。
多路复用: 多个流共享一个连接，减少了连接建立和维护的开销。
灵活性: 支持可靠和不可靠传输，可以根据不同的应用场景选择合适的模式。
安全性: 内置加密，提高了安全性。
连接迁移: 即使客户端 IP 地址改变，连接也能保持不断开。

WebTransport 的应用场景

在线游戏: 实时传输游戏状态、玩家位置等信息。不可靠数据报可以用于传输位置信息，可靠流可以用于传输游戏事件。
音视频流: 实时传输音视频数据。不可靠数据报可以用于传输音视频帧，可靠流可以用于传输控制信息。
远程桌面: 实时传输屏幕画面和用户输入。
实时协作: 多人协同编辑文档、绘图等。
物联网 (IoT): 设备与服务器之间的实时通信。

总结

WebTransport 是一种非常有前景的实时通信技术，它基于 HTTP/3 和 QUIC，具有高性能、低延迟、多路复用、可靠和不可靠传输等优点。虽然目前还在发展中，但已经开始在一些领域得到应用。

希望今天的讲解能让你对 WebTransport 有一个初步的了解。记住，技术是不断发展的，要保持学习的热情，拥抱新的技术！

如果大家还有什么问题，欢迎提问。下次有机会，咱们再深入探讨 WebTransport 的更多细节。拜拜！

发表回复 取消回复

发表回复取消回复