Text chat using the data channel

This demo shows how to use the rtc module to set up a data channel and exchange text messages without requiring access to audio or video devices.

NOTE - this simple example works for 2 peer connections only, to properly support text messaging for multiple peers some data channel management is required - see the rtc-quickconnect demo for a fuller example.

Include the bundled rtc module in your HTML page (get the latest build from https://github.com/rtc-io/rtc/build). The rtc module can also be loaded using require.js.

<script src="path/to/rtc.js"></script>

First we will need to define the options to pass into RTC. A room and a signalling server are required - you can use our hosted signalling server //switchboard.rtc.io for testing purposes. Make sure to add the 'capture: false' option so you are not being asked to access a camera or microphone. The rtc-switchboard module is also available to deploy on your own servers.

var rtcOpts = {
    room: 'test-data',
    signaller: 'https://switchboard.rtc.io',
    capture: false
};

Now we can call RTC to start a session. This will automatically set the room up for a data channel connection.

var rtc = RTC(rtcOpts);

We'll need a reference to the DOM element that we want to add our text messages to.

var messages = document.getElementById('messages');

Before we can start sharing text via a data channel we need to wait for the signalling server to create our session. The rtc module fires a ready event when our session is ready to work with.

rtc.on('ready', init);

Once a session is established we can create a data channel and listen for it's opened event. The data channel in this example retains packet order and tries resending a lost packet a maximum of 12 times.

function init(session) {
    session.createDataChannel('chat', {
          ordered: true,
          maxRetransmits: 12
     });
      session.on('channel:opened:chat', bindDataChannelEvents);
}

Finally, bind the data channel events so that our users can update the shared text box.

function bindDataChannelEvents(id, channel, attributes, connection) {

    // Receive message
    channel.onmessage = function (evt) {
        messages.innerHTML = evt.data;
    };

    // Send message
    messages.onkeyup = function () {
        channel.send(this.innerHTML);
    };
}

Here's the full script:

// Set RTC options.
var rtcOpts = {
    room: 'test-data',
    signaller: 'https://switchboard.rtc.io',
    capture: false
};

// call RTC module
var rtc = RTC(rtcOpts);

// A contenteditable element to show our messages
var messages = document.getElementById('messages');

// Bind to events happening on the data channel
function bindDataChannelEvents(id, channel, attributes, connection) {

    // Receive message
    channel.onmessage = function (evt) {
        messages.innerHTML = evt.data;
    };

    // Send message
    messages.onkeyup = function () {
        channel.send(this.innerHTML);
    };
}

// Start working with the established session
function init(session) {
    session.createDataChannel('chat', {
          ordered: true,
          maxRetransmits: 12
     });
      session.on('channel:opened:chat', bindDataChannelEvents);
}

// Detect when RTC has established a session
rtc.on('ready', init);

And here's the full HTML page to go with it:

<!DOCTYPE html>
<html>
<style>
    #messages {
        border: 1px solid black;
        min-height: 20px;
    }
</style>
<script src="../rtc.min.js"></script>
<body>
    <div id="messages" contenteditable></div>
    <script src="rtc-text-chat.js"></script>
</body>