JS `WebTransport` `Reliable Streams` 与 `Unreliable Datagrams` 的混合应用 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

好吧，大家好！今天咱们来聊聊 WebTransport 里的“双面间谍”—— Reliable Streams 和 Unreliable Datagrams 的混合应用。这俩家伙就像一对性格迥异的兄弟，一个稳重可靠，一个风风火火，凑到一块儿能玩出不少花样。

一、WebTransport 简介：咱们先来热热身

WebTransport，简单来说，就是个在浏览器和服务器之间建立双向通信通道的技术。它基于 HTTP/3，所以天生自带 QUIC 的各种优点，比如多路复用、低延迟等等。你可以把它想象成一根水管，能同时传输好几种不同的“水”（数据）。

和 WebSocket 相比，WebTransport 更强大，更灵活。WebSocket 就像一条单行道，只能传输文本或二进制数据；而 WebTransport 则像一个高速公路，可以同时跑好几条车道，而且车道类型还不一样，有可靠的，有不可靠的。

二、主角登场：Reliable Streams vs. Unreliable Datagrams

接下来，咱们隆重介绍今天的主角：

Reliable Streams (可靠流)：这家伙就像个老实巴交的快递员，保证包裹（数据）一个不落地送到，而且按照发送顺序原封不动地送达。如果包裹在路上丢了，它还会自动重发，直到对方收到为止。这就像 TCP 连接一样，可靠性是它的命根子。
Unreliable Datagrams (不可靠数据报)：这家伙则像个急性子，只管把数据一股脑地扔出去，能不能送到，什么时候送到，它可不管。就像 UDP 协议一样，速度是它的追求。如果数据在路上丢了，它也不会重发，直接放弃。

咱们用个表格来总结一下它们的区别：

特性	Reliable Streams (可靠流)	Unreliable Datagrams (不可靠数据报)
可靠性	可靠，保证数据送达	不可靠，数据可能丢失
顺序性	保证数据按发送顺序送达	不保证数据顺序
拥塞控制	有拥塞控制	没有拥塞控制
适用场景	需要保证数据完整性的场景	允许少量数据丢失的场景
像谁	TCP	UDP

三、混合应用：让它们各司其职，发挥最大价值

现在，问题来了：我们为什么要混着用这俩“兄弟”呢？答案很简单：为了在不同的场景下，获得最佳的性能和用户体验。

想象一下，你要开发一个在线游戏。

Reliable Streams 可以用来传输玩家的聊天信息、购买道具的请求等关键数据。 这些数据必须保证完整性和顺序性，否则会影响游戏体验。
Unreliable Datagrams 可以用来传输玩家的位置信息、动作信息等实时数据。 这些数据允许少量丢失，因为即使丢了一两个数据包，也不会对游戏体验造成太大影响。重要的是速度快，延迟低，才能保证游戏的流畅性。

再比如，你要开发一个视频会议应用。

Reliable Streams 可以用来传输控制指令，比如加入会议、离开会议、静音等。 这些指令必须保证可靠，否则会议就乱套了。
Unreliable Datagrams 可以用来传输视频和音频数据。 视频和音频数据允许少量丢失，因为即使丢了几帧，也不会对观看体验造成太大影响。重要的是保证实时性，才能让会议参与者流畅地交流。

总之，混合应用的原则就是：

重要的，必须保证可靠的数据，用 Reliable Streams。
不重要的，允许丢失的数据，用 Unreliable Datagrams。

四、代码示例：让咱们动手试试

光说不练假把式，咱们来点实际的。下面是一个简单的代码示例，演示了如何在 WebTransport 中同时使用 Reliable Streams 和 Unreliable Datagrams。

服务器端 (Node.js):

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

const server = createServer((req, res) => {
  fs.readFile('index.html', (err, data) => {
    if (err) {
      res.writeHead(500);
      res.end('Error loading index.html');
      return;
    }
    res.writeHead(200, { 'Content-Type': 'text/html' });
    res.end(data);
  });
});

const wtServer = new WebTransportServer({
  port: 4433,
  listenOptions: {
    cert: fs.readFileSync('cert.pem'),  // 替换为你的证书文件
    key: fs.readFileSync('key.pem'),   // 替换为你的私钥文件
  },
});

wtServer.ready.then(() => {
  console.log('WebTransport server listening on port 4433');
});

wtServer.on('session', async (session) => {
  console.log('New WebTransport session');

  // 处理 Reliable Streams
  session.on('stream', async (stream) => {
    const reader = stream.readable.getReader();
    try {
      while (true) {
        const { done, value } = await reader.read();
        if (done) {
          console.log('Reliable stream closed');
          break;
        }
        const message = new TextDecoder().decode(value);
        console.log('Received reliable message:', message);
        // 将消息回显给客户端
        stream.writable.getWriter().write(new TextEncoder().encode(`Server received: ${message}`));
      }
    } catch (error) {
      console.error('Error reading from reliable stream:', error);
    } finally {
      reader.releaseLock();
    }
  });

  // 处理 Unreliable Datagrams
  session.datagrams.readable.pipeTo(new WritableStream({
    write(chunk) {
      const message = new TextDecoder().decode(chunk);
      console.log('Received unreliable datagram:', message);
    }
  }));

  session.datagrams.writable.getWriter().write(new TextEncoder().encode("Hello from server (datagram)")); // Send a datagram
});

server.listen(8080, () => {
  console.log('HTTP server listening on port 8080');
});

客户端 (HTML + JavaScript):

<!DOCTYPE html>
<html>
<head>
  <title>WebTransport Demo</title>
</head>
<body>
  <h1>WebTransport Demo</h1>

  <button id="connectBtn">Connect</button>
  <button id="sendReliableBtn">Send Reliable Message</button>
  <button id="sendUnreliableBtn">Send Unreliable Message</button>

  <script>
    const connectBtn = document.getElementById('connectBtn');
    const sendReliableBtn = document.getElementById('sendReliableBtn');
    const sendUnreliableBtn = document.getElementById('sendUnreliableBtn');

    let transport;
    let stream;

    connectBtn.addEventListener('click', async () => {
      try {
        transport = new WebTransport('https://localhost:4433/');
        await transport.ready;
        console.log('WebTransport connection established');

        // 创建 Reliable Stream
        stream = await transport.createBidirectionalStream();
        console.log('Reliable stream created');

        // 监听 Reliable Stream 的消息
        const reader = stream.readable.getReader();
        (async function read() {
          try {
            const { done, value } = await reader.read();
            if (done) {
              console.log('Reliable stream closed');
              return;
            }
            const message = new TextDecoder().decode(value);
            console.log('Received reliable message:', message);
            read();
          } catch (error) {
            console.error('Error reading from reliable stream:', error);
          } finally {
            reader.releaseLock();
          }
        })();

        // 监听 Unreliable Datagrams
        transport.datagrams.readable.pipeTo(new WritableStream({
          write(chunk) {
            const message = new TextDecoder().decode(chunk);
            console.log('Received unreliable datagram:', message);
          }
        }));

      } catch (error) {
        console.error('Error connecting to WebTransport server:', error);
      }
    });

    sendReliableBtn.addEventListener('click', async () => {
      if (!stream) {
        console.warn('Reliable stream not created yet');
        return;
      }
      const writer = stream.writable.getWriter();
      await writer.write(new TextEncoder().encode('Hello from client (reliable)'));
      writer.releaseLock();
      console.log('Sent reliable message');
    });

    sendUnreliableBtn.addEventListener('click', async () => {
      if (!transport) {
        console.warn('WebTransport connection not established yet');
        return;
      }
      const writer = transport.datagrams.writable.getWriter();
      await writer.write(new TextEncoder().encode('Hello from client (unreliable)'));
      writer.releaseLock();
      console.log('Sent unreliable datagram');
    });
  </script>
</body>
</html>

注意事项：

你需要一个 HTTPS 服务器来运行 WebTransport。可以使用 node:http 创建一个简单的服务器，并使用自签名证书。 请务必生成你自己的证书，并替换代码中的 cert.pem 和 key.pem 文件。 可以使用 OpenSSL 生成自签名证书: openssl req -x509 -newkey rsa:2048 -keyout key.pem -out cert.pem -days 365
你需要安装 @failsafe/webtransport 库: npm install @failsafe/webtransport

运行步骤：

保存服务器端代码为 server.js，客户端代码为 index.html。
运行服务器端代码：node server.js
在浏览器中打开 http://localhost:8080。
点击 "Connect" 按钮建立 WebTransport 连接。
点击 "Send Reliable Message" 按钮发送可靠消息。
点击 "Send Unreliable Message" 按钮发送不可靠消息。

你可以在浏览器的控制台中看到收发的消息。

五、进阶话题：一些更有趣的玩法

除了上面这个简单的例子，WebTransport 的混合应用还有很多更有趣的玩法：

FEC (Forward Error Correction)：对于 Unreliable Datagrams，你可以使用 FEC 技术来提高数据的可靠性。FEC 的原理是在发送数据时，额外发送一些冗余数据。即使部分数据丢失，也可以通过冗余数据来恢复原始数据。
优先级控制：你可以为不同的数据流设置不同的优先级。例如，你可以将视频流的优先级设置为高于音频流，以保证视频的流畅性。
动态调整：你可以根据网络状况，动态地调整 Reliable Streams 和 Unreliable Datagrams 的使用比例。例如，如果网络状况良好，你可以增加 Unreliable Datagrams 的使用比例，以提高传输速度。如果网络状况较差，你可以增加 Reliable Streams 的使用比例，以保证数据的可靠性。

六、总结：WebTransport 的无限可能

WebTransport 的 Reliable Streams 和 Unreliable Datagrams 的混合应用，为我们提供了更大的灵活性和控制权。我们可以根据不同的场景，选择最适合的传输方式，从而获得最佳的性能和用户体验。

WebTransport 是一项非常有前景的技术，它在实时通信、在线游戏、视频会议等领域都有着广泛的应用前景。相信随着 WebTransport 的不断发展，它将会为我们带来更多的惊喜。

希望今天的讲解能帮助大家更好地理解 WebTransport 的混合应用。如果大家还有什么问题，欢迎随时提问。

发表回复 取消回复

发表回复取消回复