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>