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:
- Send file directly — of any size
- Send text-message of any length
- Send data directly
- Simplest syntax ever! Same like WebSockets.
- Supports fallback to socket.io/websockets/etc.
- Auto users' presence detection
- 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()
:
- The entire data session (i.e. all peers, sockets and data ports) will be closed. (from each and every user's side)
- 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>