A little bit more accurate data channel example

[nnseva]

The data channel example shown in the tutorial http://rtc.io/tutorial-rtc-text-chat.html has some inaccurate code which causes wrong example behaviour in case of 3 or more nodes in the chat. Particularly, when the second channel is created, the message.onkeyup function which was initialized before, is reinitialized by the just created function:

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

Such a bug in the tutorial makes imaging of your RTC package worse.

I suggest the following a little bit more precise code to replace a tutorial code. This code creates a channel registry which is updated by two different session channel-related events, and allows to create as many nodes in the chat, as simultaneous channels allowed in the RTC implementation.

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

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

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

    // Channels registry
    var channels = {};

    // Send message to every registered channel
    messages.onkeyup = function () {
        for(var i in channels) {
            channel = channels[i];
            channel.send(messages.innerHTML);
        }
    };

    // Bind to events happening on the data channel
    // and fill the channel registry
    function bindDataChannelEvents(id, channel, attributes, connection) {
        channels[id] = channel;

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

    // Clean channel registry for closed channels
    function unbindDataChannelEvents(id, channel, name) {
        delete channels[id];
    }

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

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

[DamonOehlman]

@nnseva Thanks for reporting, agreed the current example doesn't properly cater for multiple participants. I believe it was designed though to be something that people could get started with very simply.

My thinking is that this example should remain without the channel registry (limited to a single channel) and we bring in a second example that shows how to work with multiple participants and we also include a NOTE on this example exampling the limitation of the example.

I'd also suggest we remove the additional data channel creation args (orderd, maxRetransmits) as introducing those concepts here are probably not helpful for communicating a "My First Data Channel" example...

Interested in @cathylill and @silviapfeiffer's thoughts here also...

[silviapfeiffer]

Sounds good! Thanks for the feedback!

[nnseva]

and we also include a NOTE on this example exampling the limitation of the example.

Yes, it should be done as minimum to avoid example misunderstanding by newbies.

[DamonOehlman]

@nnseva I'm thinking about moving the majority of examples for this top level RTC package to using something like jsbin. I've converted the example you implemented into the following jsbin sample which I will include in the rtc README:

http://jsbin.com/rimexe/edit?html,js,output

[meepeek]

I don't understand the example at all. The result was just a blank textarea and nothing else. Where should I get start ?

[sabbir-hossain]

@meepeek just open this into two different browser, type into that textarea, see the output