Back to Webrtc Experiment

File Sharing + Text Chat using WebRTC DataChannel

DataChannel/simple.html

latest3.3 KB
Original Source

File Sharing + Text Chat using WebRTC DataChannel

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

Open Data Channel

Open

or join:

Join

|

Text Chat

|

Share Files

|

Getting started with WebRTC DataChannel

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

    // to create/open a new channel
    channel. **open** ('channel-name');

    // to send text/data or file
    channel. **send** (file || data || 'text');

    // if soemone already created a channel; to join it: use "connect" method
    channel. **connect** ('channel-name');
</script>

Remember, A-to-Z, everything is optional! You can set channel-name in constructor or in open / connect methods. It is your choice!

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

Additional:

<script>
    // to be alerted on data ports get open
    channel. **onopen** = function(userid) {}

    // to be alerted on data ports get new message
    channel. **onmessage** = function(message, userid) {}

    // by default; connection is [many-to-many]; you can use following directions
    channel. **direction** = 'one-to-one';
    channel. **direction** = 'one-to-many';
    channel. **direction** = 'many-to-many';	// --- it is default

    // 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
    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

Send Message

Latest Updates