データの送受信

WebRTC's RTCDataChannel isn't just for connection; it's also for sending messages! This lets peers exchange arbitrary data directly.

Think of it like a super-fast, secure chat line between two browsers, but for any kind of information you want to share.

To send data, you use the send() method of an RTCDataChannel object. It's straightforward and can handle various data types.

• Syntax: dataChannel.send(data);
• The data can be a String, Blob, ArrayBuffer, or ArrayBufferView.

The channel must be in an 'open' state to send messages.

The simplest data to send is plain text. This is perfect for chat messages, commands, or small bits of structured data like JSON strings.

When you pass a JavaScript String to send(), it's sent as text data.

// Assuming 'dataChannel' is an open RTCDataChannel
dataChannel.send("Hello from CoddyKit!");
dataChannel.send(JSON.stringify({ type: "chat", message: "Hi!" }));

Let's simulate sending a simple text message. In a real scenario, this would go to a connected peer. Here, we log what we're "sending."

To receive data, you listen for the message event on your RTCDataChannel object. This event fires whenever a peer sends data.

• The event handler is typically set via dataChannel.onmessage.
• The event object (MessageEvent) has a data property, which contains the received message.

The type of event.data depends on what was sent (String or Blob/ArrayBuffer).

Here's a combined example. One "peer" sends a message, and another "peer" (simulated here) receives it using onmessage.

While strings are great for text, RTCDataChannel also supports sending binary data efficiently. This is crucial for things like file sharing, game state updates, or image data.

You can send:

• Blob: Represents raw immutable data. Good for files.
• ArrayBuffer: A fixed-length raw binary data buffer.
• ArrayBufferView: A view into an ArrayBuffer (e.g., Uint8Array).

When binary data is received, event.data will be an ArrayBuffer or Blob, depending on the channel's binaryType property.

ArrayBuffer is a common way to handle raw binary data in JavaScript. You can create views (like Uint8Array) to manipulate its contents.

// Create an ArrayBuffer
const buffer = new ArrayBuffer(4); // 4 bytes
const view = new Uint8Array(buffer);

// Put some data into the view
view[0] = 65; // ASCII 'A'
view[1] = 66; // ASCII 'B'
view[2] = 67; // ASCII 'C'
view[3] = 68; // ASCII 'D'

// Send the ArrayBuffer
dataChannel.send(buffer);

The receiver will get this ArrayBuffer and can then interpret it.

Let's simulate sending an ArrayBuffer and then interpreting it on the receiving end. We'll convert the received bytes back to characters for display.

You've learned how to send and receive different types of data. Let's test your understanding!

Great job! You've mastered the basics of sending and receiving data over WebRTC Data Channels.

• We use dataChannel.send(data) to transmit information.
• The onmessage event listener handles incoming data from peers.
• Data Channels support both text (String) and various binary types (Blob, ArrayBuffer).

This capability opens up a world of possibilities for real-time collaboration and direct data exchange!