Simple shared text box

The essential part of any WebRTC application is a connection between peers. We will use the rtc-quickconnect module to allow us to easily create a connection and share data.

First, we need to include the rtc-quickconnect module:

var quickConnectMod = require('rtc-quickconnect');

Next, call the quickconnect module with the location of your signalling server and your connection options - this will return a reference to our connection object. For now we will use the rtc.io signalling server at http://rtc.io/switchboard/ (for testing purposes only). The rtc-switchboard module can be deployed on your own servers.

In our options object we will include a room name to tell the siganlling server which peers should be connected to each other.

var quickConnectObj = quickConnectMod('//switchboard.rtc.io', { room: 'rtcio-text-demo' });

We'll also need to create and reference a contenteditable DOM element where our users will type text to share.

var messageWindow = document.createElement('textarea');
messageWindow.rows = 20;
messageWindow.cols = 80;

var bodyElement = document.getElementsByTagName('body')[0];
bodyElement.appendChild(messageWindow);

Now that we have a reference to our connection object we use it to create a data channel to send our text over.

quickConnectObj.createDataChannel('shared-text');

Once our channel is created we can listen on our connection object for it's events. For a full list of the events available, see the documentation for the rtc-quickconnect module.

quickConnectObj.on('channel:opened:shared-text', function (id, dataChannel) {
      bindDataEvents(dataChannel);
});

Now that our peers are connected in a named room and have a data channel open we can start sending and receiving data over the connection.

function bindDataEvents(channel) {
    // Receive message
    channel.onmessage = function (evt) {
        messageWindow.value = evt.data;
    };

    // Send message
    messageWindow.onkeyup = function (evt) {
        channel.send(this.value);
    };
}

This creates a basic shared text box.

// rtc-quickconnect requires a signalling server location and a room name.
var quickConnectMod = require('rtc-quickconnect');
var quickConnectObj = quickConnectMod('//switchboard.rtc.io', { room: 'rtcio-text-demo' });

// Create the text area for chatting
var messageWindow = document.createElement('textarea');
messageWindow.rows = 20;
messageWindow.cols = 80;

var bodyElement = document.getElementsByTagName('body')[0];
bodyElement.appendChild(messageWindow);

// Create a data channel and bind to it's events
quickConnectObj.createDataChannel('shared-text');
quickConnectObj.on('channel:opened:shared-text', function (id, dataChannel) {
      bindDataEvents(dataChannel);
});

function bindDataEvents(channel) {
    // Receive message
    channel.onmessage = function (evt) {
        messageWindow.value = evt.data;
    };

    // Send message
    messageWindow.onkeyup = function (evt) {
        channel.send(this.value);
    };
}