Auto Session Establishment using DataChannel.js

HOME © Muaz Khan . @WebRTCWeb . Github . Latest issues . What's New?

This demo does NOT works anymore. Please check this one instead:
https://www.webrtc-experiment.com/DataChannel/

Text Chat

Share Files



Getting started with WebRTC DataChannel

<script src="https://cdn.webrtc-experiment.com/DataChannel.js"></script>
<script>
    var channel = new DataChannel('default-channel');

    // to send text/data or file
    channel.send(file || data || 'text');
</script>


Features:

  1. Send file directly — of any size
  2. Send text-message of any length
  3. Send data directly
  4. Simplest syntax ever! Same like WebSockets.
  5. Supports fallback to socket.io/websockets/etc.
  6. Auto users' presence detection
  7. Allows you eject any user; or close your entire data session


Send direct messages!

In many-to-many data session; you can share direct messages or files between specific users:

channel.channels[userid].send(file || data || 'text message');

Detect users' presence

To be alerted if a user leaves your room:

channel.onleave = function(userid) {
    // remove that user's photo/image using his user-id
};


Manually eject a user or close your data session

channel.leave(userid);  // throw a user out of your room!
channel.leave();        // close your own entire data session

Following things will happen if you are a room owner and you tried to close your data session using channel.leave():

  1. The entire data session (i.e. all peers, sockets and data ports) will be closed. (from each and every user's side)
  2. All participants will be alerted about room owner's (i.e. yours) action. They'll unable to send any single message over same room because everything is closed!

Note

: DataChannel.js will never "auto" reinitiate the data session.

Additional:

<script>
    // to be alerted when data ports get open
    channel.onopen = function(userid) {
        // user.photo.id = userid; ---- see "onleave" and "leave" above ↑
        
        // direct messages!
        channel.channels[userid].send(file || data || 'text message');
    }
	
    // to be alerted when data ports get new message
    channel.onmessage = function(message, userid) {
        // send direct message to same user using his user-id
        channel.channels[userid].send('cool!');
    }
	
    // show progress bar!
    channel.onFileProgress = function (packets) {
        // packets.remaining
        // packets.sent
        // packets.received
        // packets.length
    };

    // on file successfully sent
    channel.onFileSent = function (file) {
        // file.name
        // file.size
    };

    // on file successfully received
    channel.onFileReceived = function (fileName) {};
</script>


Errors Handling

<script>
    // error to open data ports
    channel.onerror = function(event) {}
	
    // data ports suddenly dropped
    channel.onclose = function(event) {}
</script>


Use your own socket.io for signaling

<script>
    // by default socket.io is used for signaling; you can override it
    var channel = new DataChannel('default-channel', {
        openSignalingChannel: function(config) {
            var socket = io.connect('http://your-site:8888');
            socket.channel = config.channel || this.channel || 'default-channel';
            socket.on('message', config.onmessage);

            socket.send = function (data) {
                socket.emit('message', data);
            };

            if (config.onopen) setTimeout(config.onopen, 1);
            return socket;
        }
    });
</script>


Feedback

Latest Updates