datachannel-client/index.html

Reliable signaling implementation for DataChannel.js

<hr>
/room-id/<input type="text" id="room-id" placeholder="room-id" style="width: 100px;">/
<button id="open">Open</button>
<button id="join">Join</button>
<hr>
<div id="chat-container">
    <input type="text" id="input-text-chat" placeholder="Enter Text Chat" disabled><br>
    <div class="chat-output"></div>
</div>

<link rel="stylesheet" href="style.css">

<script src="/socket.io/socket.io.js"></script>
<script src="/reliable-signaler/signaler.js"></script>
<script src="/DataChannel.js"></script>
<script>
// initializing DataChannel.js constructor.
var channel = new DataChannel();

// using reliable-signaler
var signaler = initReliableSignaler(channel, '/');

channel.ondatachannel = function() {};

document.getElementById('open').onclick = function() {
    var roomid = document.getElementById('room-id').value;
    if (roomid.replace(/^\s+|\s+$/g, '').length <= 0) {
        alert('Please enter room-id');
        document.getElementById('room-id').focus();
        return;
    }
    
    signaler.createNewRoomOnServer(roomid, function() {
        document.getElementById('open').disabled = true;
        
        channel.userid = roomid;
        channel.transmitRoomOnce = true;
        channel.open(roomid);
    });
};

document.getElementById('join').onclick = function() {
    var roomid = document.getElementById('room-id').value;
    if (roomid.replace(/^\s+|\s+$/g, '').length <= 0) {
        alert('Please enter room-id');
        document.getElementById('room-id').focus();
        return;
    }
    
    this.disabled = true;
    signaler.getRoomFromServer(roomid, function(roomid) {
        channel.connect(roomid); // setting 'channel' & connecting socket
        
        // setting 'roomToken' and 'broadcaster' and joining
        channel.join({
            id: roomid,
            owner: roomid
        });
    });
};

channel.onopen = function() {
    document.getElementById('input-text-chat').disabled = false;
};

document.getElementById('input-text-chat').onkeyup = function(e) {
    if(e.keyCode != 13) return;
    
    // removing trailing/leading whitespace
    this.value = this.value.replace(/^\s+|\s+$/g, '');

    if (!this.value.length) return;
    
    channel.send(this.value);
    appendDIV(this.value);
    this.value =  '';
};

channel.onmessage = appendDIV;

var chatContainer = document.querySelector('.chat-output');

// a custom method used to append a new DIV into DOM
function appendDIV(event) {
    var div = document.createElement('div');
    div.innerHTML = event.data || event;
    chatContainer.insertBefore(div, chatContainer.firstChild);
    div.tabIndex = 0; div.focus();
    
    document.getElementById('input-text-chat').focus();
}
</script>