WebSockets & Realtime Systems Programming · 课时

WebTransport 与 WebRTC 数据通道

了解 WebTransport 这一现代化的 WebSockets 替代方案，以及 WebRTC 数据通道的点对点能力。

第 1 / 4 课11 个步骤

WebTransport 与 WebRTC 数据通道 是 CoddyKit 上的免费 WebSockets & Realtime Systems Programming 课时。这是第 1 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 WebSockets & Realtime Systems Programming 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 WebSockets & Realtime Systems Programming 课程共包含 4 节课。

本课时的部分内容尚未翻译，以英文显示。

Beyond WebSockets: New Horizons

You've mastered WebSockets for realtime communication. But the web evolves, and new challenges require new solutions!

Today, we'll explore two powerful, modern alternatives: WebTransport and WebRTC Data Channels. These protocols offer unique advantages for specific realtime needs.

Introducing WebTransport

WebTransport is a new API that enables sending data between a browser and a server using HTTP/3. Think of it as a next-generation WebSocket, but built on the modern QUIC protocol.

It offers both unreliable datagrams and reliable, ordered streams, giving developers more control over how data is sent.

WebTransport vs. WebSockets

While both provide bidirectional communication, WebTransport offers key advantages:

Multiplexing: Multiple independent streams can share one connection, avoiding head-of-line blocking.
Unreliable Datagrams: Send small, time-sensitive data without the overhead of guaranteed delivery.
Built on QUIC/HTTP/3: Benefits from faster connection setup and better performance over unreliable networks.

WebSockets are simpler but lack these advanced features.

WebTransport: Streams & Datagrams

WebTransport allows you to choose your communication style:

Streams: Provide reliable, ordered delivery, similar to TCP. Great for large files or critical messages.
Datagrams: Offer unreliable, unordered delivery, similar to UDP. Perfect for low-latency, loss-tolerant data like game state updates or sensor readings.

This flexibility is a major differentiator from WebSockets, which are stream-based only.

WebTransport Client (Conceptual)

Connecting to a WebTransport server in the browser looks similar to WebSockets, but with stream and datagram options. Note: WebTransport is still experimental; browser support may require flags.

async function connectWebTransport() {
  const url = 'https://example.com:4433/wt';
  try {
    const transport = new WebTransport(url);
    await transport.ready;
    console.log('WebTransport connected!');

    // Example: Sending a datagram
    const writer = transport.datagrams.writable.getWriter();
    await writer.write(new Uint8Array([1, 2, 3]));
    console.log('Datagram sent!');

    // Example: Opening a unidirectional stream
    const sendStream = await transport.createUnidirectionalStream();
    const streamWriter = sendStream.getWriter();
    await streamWriter.write(new TextEncoder().encode('Hello Stream!'));
    await streamWriter.close();

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

// To run this, call connectWebTransport() in a browser console
// with experimental WebTransport enabled and a compatible server.
// connectWebTransport();

WebRTC Data Channels

WebRTC (Web Real-Time Communication) is an open project enabling real-time communication between browsers (peer-to-peer). While famous for audio/video, it also includes Data Channels.

Data Channels allow two browsers to send arbitrary data directly to each other, without needing an intermediary server for every message.

P2P Data: Not Just Media

WebRTC Data Channels provide a secure, efficient way to exchange data peer-to-peer. This is distinct from WebSockets, which always communicate via a server.

Use cases include collaborative editing, file sharing, gaming, and any scenario where direct browser-to-browser communication is beneficial.

Data Channel Features

WebRTC Data Channels offer configurable reliability and ordering:

Reliable & Ordered: Guarantees delivery and message order (like TCP).
Unreliable & Ordered: Guarantees order but not delivery (useful for quickly changing data).
Unreliable & Unordered: No guarantees on delivery or order (like UDP), ideal for very low-latency, loss-tolerant updates.

This flexibility allows fine-tuning for different application requirements.

WebRTC Data Channel Setup (Conceptual)

Setting up a WebRTC Data Channel involves several steps (signaling, ICE negotiation) to establish the peer connection. Once connected, sending data is straightforward.

function setupDataChannel(peerConnection) {
  const dataChannel = peerConnection.createDataChannel('chat');

  dataChannel.onopen = () => {
    console.log('Data Channel is open!');
    dataChannel.send('Hello from my browser!');
  };

  dataChannel.onmessage = (event) => {
    console.log('Received message:', event.data);
  };

  dataChannel.onclose = () => {
    console.log('Data Channel closed.');
  };

  dataChannel.onerror = (error) => {
    console.error('Data Channel error:', error);
  };

  // In a real app, peerConnection would be established via signaling
  // and ICE candidates exchanged to connect two browsers.
}

// Example usage after a peerConnection is established:
// const pc = new RTCPeerConnection();
// setupDataChannel(pc);
// (Signaling and ICE would happen here to connect to another peer)

Compare & Contrast

Which statements accurately describe WebTransport or WebRTC Data Channels?

在交互式课程中回答

Recap: The Future is Flexible

We explored WebTransport, a modern alternative to WebSockets built on HTTP/3 and QUIC, offering multiplexing, reliable streams, and unreliable datagrams for more control.

We also looked at WebRTC Data Channels, enabling secure, configurable peer-to-peer data exchange directly between browsers, a powerful tool beyond just media streaming.

These technologies provide developers with a richer toolkit for building highly performant and tailored realtime web applications.

免费开始

用 AI 导师学习 WebSockets & Realtime Systems Programming — 免费

在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。

课程: 12
课程: 47

免费开始学习查看完整课程

常见问题解答

「WebTransport 与 WebRTC 数据通道」课时是免费的吗？

是的 — 「WebTransport 与 WebRTC 数据通道」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 WebSockets & Realtime Systems Programming 课程的其余内容，请升级到 CoddyKit PRO。 WebSockets & Realtime Systems Programming 课程共包含 4 节课。

「WebTransport 与 WebRTC 数据通道」这节课中我会学到什么？

了解 WebTransport 这一现代化的 WebSockets 替代方案，以及 WebRTC 数据通道的点对点能力。你通过在浏览器中直接运行的动手代码来练习 WebSockets & Realtime Systems Programming，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 WebSockets & Realtime Systems Programming 需要有经验吗？

无需任何先前经验。CoddyKit 上的 WebSockets & Realtime Systems Programming 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 1 节课，共 4 节。

「WebTransport 与 WebRTC 数据通道」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 WebSockets & Realtime Systems Programming 课中编写并运行代码吗？

能。每节 WebSockets & Realtime Systems Programming 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 WebSockets & Realtime Systems Programming