← All demos

Data channel messaging

Two SDK instances on one page exchange chat, custom JSON, and pings over WebRTC data channels. No audio or video is sent; the SDK wraps each message in VDO.Ninja's protocol for you.

  1. Connect both nodes. They share a room by default.
  2. Send a chat message from either node and watch it arrive on the other.
  3. Try custom data and targeting under "Send custom data".

Node 1

Not connected
A name sent to peers; they can target messages by it.
Publisher announces itself, Viewer connects to others, Both does each.
No messages yet
Send custom data (JSON)
Any JSON object (plain text is wrapped for you). Avoid the type values the SDK reserves: subscribe, unsubscribe, channelMessage, request, response.
Examples:
Who receives it: every peer, or only the peers that match.
Peers, stats and latency
  • No peers connected
Sent0
Received0
Avg latency-
Uses the SDK's built-in ping over the data channel.
Topic filtering (app-level)

These topics are ordinary messages this page defines: every peer receives each one and shows only the topics it subscribed to. For the SDK's built-in channels (subscribe() and publishToChannel()), see the pub/sub channels demo.

  • No subscriptions yet

Node 2

Not connected
A name sent to peers; they can target messages by it.
Publisher announces itself, Viewer connects to others, Both does each.
No messages yet
Send custom data (JSON)
Any JSON object (plain text is wrapped for you). Avoid the type values the SDK reserves: subscribe, unsubscribe, channelMessage, request, response.
Examples:
Who receives it: every peer, or only the peers that match.
Peers, stats and latency
  • No peers connected
Sent0
Received0
Avg latency-
Uses the SDK's built-in ping over the data channel.
Topic filtering (app-level)

These topics are ordinary messages this page defines: every peer receives each one and shows only the topics it subscribed to. For the SDK's built-in channels (subscribe() and publishToChannel()), see the pub/sub channels demo.

  • No subscriptions yet
Key SDK calls in this demo
const sdk = new VDONinjaSDK({ room, password: false });
await sdk.connect();
await sdk.announce({ streamID, room, label });   // Publisher or Both (joins the room)
// await sdk.joinRoom({ room });                 // Viewer only

// Viewer or Both: open a data-only connection to each stream in the room
sdk.addEventListener('videoaddedtoroom', (e) =>
    sdk.quickView({ streamID: e.detail.streamID, audio: false, video: false, label }));

sdk.addEventListener('dataReceived', (e) => console.log(e.detail.uuid, e.detail.data));
sdk.sendData({ type: 'chat', text: 'hi' });      // every connected peer
sdk.sendData(message, peerUuid);                 // one peer
sdk.sendData(message, { type: 'publisher' });    // only peers viewing me
sdk.sendPing();                                  // answered with a 'peerLatency' event