WebRTC Chat Room Demo using Data Channels

Build on top of Bistri WebRTC API

by bistri

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="https://api.bistri.com/bistri.conference.min.js"></script>
    <div class="pane" id="pane_0">
        <input type="text" placeholder="Nickname" id="nick_field" class="form-control">
        <br>
        <input type="button" value="Set Nickname" id="nick" class="btn btn-info btn-default btn-block">
    </div>
    
    <div class="pane" id="pane_1" style="display: none">
        <input type="text" placeholder="Chat Room Name" id="room_field" class="form-control">
        <br>
        <input type="button" value="Join Chat Room" id="join" class="btn btn-info btn-default btn-block">
    </div>
    
    <div class="pane" id="pane_2" style="display: none">
        <div id="messages_container"></div>
        <p>
            <input type="text" placeholder="Message" id="message_field" class="form-control">
        </p>
        <input type="button" value="Send Message" id="send" disabled class="btn btn-success btn-default btn-block">
        <input type="button" value="Quit Chat Room" id="quit" class="btn btn-danger btn-default btn-block">
    </div>

CSS

.pane {
    margin: 20px;
    text-align: center;
}

.message {
    text-align: left;
}

#messages_container {
    height: 200px;
    overflow-y: auto;
    border: 1px solid #dedede;
    padding: 10px;
    margin-bottom: 2px;
}

JavaScript

/*
    JS library reference:
    http://developers.bistri.com/webrtc-sdk/js-library-reference
*/

var room;
var users = {};
var dataChannels = {};

// when Bistri API client is ready, function
// "onBistriConferenceReady" is invoked
onBistriConferenceReady = function () {
    
    // test if the browser is WebRTC compatible
    if ( !bc.isCompatible() ) {
        // if the browser is not compatible, display an alert
        alert( "your browser is not WebRTC compatible !" );
        // then stop the script execution
        return;
    }

    /* Set events handler */

    // when local user is connected to the server
    bc.signaling.bind( "onConnected", function () {
        // show pane with id "pane_1"
        showPanel( "pane_1" );
    } );

    // when an error occured on the server side
    bc.signaling.bind( "onError", function ( error ) {
        // display an alert message
        alert( error.text + " (" + error.code + ")" );
    } );

    // when the user has joined a room
    bc.signaling.bind( "onJoinedRoom", function ( data ) {
        // set the current room name
        room = data.room;
        // show pane with id "pane_2"
        showPanel( "pane_2" );
        // then, for every single members present in the room
        for ( var i=0, max=data.members.length; i<max; i++ ) {
            // set a couple id/nickname to "users" object
            users[ data.members[ i ].id ] = data.members[ i ].name;
            // and open a data channel
            bc.openDataChannel( data.members[ i ].id, "chat", data.room );
        }
    } );
 
    // when an error occurred while trying to join a room
    bc.signaling.bind( "onJoinRoomError", function ( error ) {
        // display an alert message
        alert( error.text + " (" + error.code + ")" );
    } );
       
    // when the local user has quitted the room
    bc.signaling.bind( "onQuittedRoom", function( room ) {
        // show pane with id "pane_1"
        showPanel( "pane_1" ); 
        // stop...