Real-Time Streaming Systems (WebRTC + Live Data) · Lesson

Sending and Receiving Data

Implement code examples for sending and receiving various types of data (text, binary) over an established WebRTC Data Channel.

Sending and Receiving Data is a free Real-Time Streaming Systems (WebRTC + Live Data) lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Real-Time Streaming Systems (WebRTC + Live Data) learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Messaging with Data Channels

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.

Sending Data with `send()`

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.

Text Messages are Easy

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!" }));

Try Sending a Text Message

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."

const dataChannel = {
  readyState: "open",
  send: function(data) {
    if (this.readyState === "open") {
      console.log("DataChannel sending:", data);
    } else {
      console.error("DataChannel not open.");
    }
  }
};

if (dataChannel.readyState === "open") {
  dataChannel.send("Welcome to real-time data!");
  dataChannel.send("Your first message sent!");
} else {
  console.log("Data channel is not yet open.");
}

Handling Incoming Messages

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).

Sending and Receiving Text

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

const senderChannel = {
  readyState: "open",
  send: function(data) {
    if (this.readyState === "open") {
      console.log("Sender sent:", data);
      receiverChannel.onmessage({ data: data });
    }
  }
};

const receiverChannel = {
  readyState: "open",
  onmessage: function(event) {
    console.log("Receiver received:", event.data);
  }
};

senderChannel.send("Hello from sender!");

Beyond Text: Binary Data

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.

Using ArrayBuffer for Binary

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.

Binary Data in Action

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.

const senderBinaryChannel = {
  readyState: "open",
  send: function(data) {
    if (this.readyState === "open") {
      console.log("Sender sent binary data.");
      receiverBinaryChannel.onmessage({ data: data });
    }
  }
};

const receiverBinaryChannel = {
  readyState: "open",
  onmessage: function(event) {
    console.log("Receiver received binary data.");
    const receivedBuffer = event.data;
    if (receivedBuffer instanceof ArrayBuffer) {
      const view = new Uint8Array(receivedBuffer);
      let receivedChars = "";
      for (let i = 0; i < view.length; i++) {
        receivedChars += String.fromCharCode(view[i]);
      }
      console.log("Decoded binary:", receivedChars);
    }
  }
};

const buffer = new ArrayBuffer(3);
const view = new Uint8Array(buffer);
view[0] = 72; // H
view[1] = 73; // I
view[2] = 33; // !

senderBinaryChannel.send(buffer);

Data Channel Check

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

Sending & Receiving Data Recap

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!

Frequently asked questions

Is the “Sending and Receiving Data” lesson free?

Yes — the full text of “Sending and Receiving Data” is free to read here on the web, and the Real-Time Streaming Systems (WebRTC + Live Data) course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Real-Time Streaming Systems (WebRTC + Live Data) course, upgrade to CoddyKit PRO.

What will I learn in “Sending and Receiving Data”?

Implement code examples for sending and receiving various types of data (text, binary) over an established WebRTC Data Channel. You practise Real-Time Streaming Systems (WebRTC + Live Data) with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Real-Time Streaming Systems (WebRTC + Live Data)?

No prior experience is required. Real-Time Streaming Systems (WebRTC + Live Data) on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Sending and Receiving Data” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Real-Time Streaming Systems (WebRTC + Live Data) lesson?

Yes. Every Real-Time Streaming Systems (WebRTC + Live Data) lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to Real-Time Streaming Systems (WebRTC + Live Data)