DataChannel.js » A WebRTC Library for Data Sharing & WebSync as Signaling GateWay!
Copyright © 2013 Muaz Khan<@muazkh> » @WebRTC Experiments » Google+ » What's New?
Open New DataChannel Connection
Text Chat |
Share Files |
Feedback
How to use WebSync for Signaling?
var channel = new DataChannel(); // ------------------------------------------------------------------ // start-using WebSync for signaling var channels = {}; var username = Math.round(Math.random() * 60535) + 5000; var client = new fm.websync.client('websync.ashx'); client.setAutoDisconnect({ synchronous: true }); client.connect({ onSuccess: function () { client.join({ channel: '/chat', userId: username, userNickname: username, onReceive: function (event) { var message = JSON.parse(event.getData().text); if (channels[message.channel] && channels[message.channel].onmessage) { channels[message.channel].onmessage(message.message); } } }); } }); channel.openSignalingChannel = function (config) { var channel = config.channel || this.channel; channels[channel] = config; if (config.onopen) setTimeout(config.onopen, 1000); return { send: function (message) { client.publish({ channel: '/chat', data: { username: username, text: JSON.stringify({ message: message, channel: channel }) } }); } }; }; // end-using WebSync for signaling // ------------------------------------------------------------------ // check existing sessions channel.connect('channel-name'); // open new session document.getElementById('open-new-session').onclick = function() { channel.open('channel-name'); };
DataChannel.js Features:
- Direct messages — to any user using his `user-id`
- Eject/Reject any user — using his `user-id`
- Leave any room (i.e. data session) or close entire session using `leave` method
- File size is limitless!
- Text message length is limitless!
- Size of data is also limitless!
- Fallback to firebase/socket.io/websockets/etc.
- Users' presence detection using `onleave`
- Latency detection
- Multi-longest strings/files concurrent transmission
How to use DataChannel.js?
<script src="https://www.webrtc-experiment.com/DataChannel.js"> </script> <input type="text" id="chat-input" disabled style="font-size: 2em; width: 98%;"><br /> <div id="chat-output"></div> <script> var chatOutput = document.getElementById('chat-output'); var chatInput = document.getElementById('chat-input'); chatInput.onkeypress = function(e) { if (e.keyCode != 13) return; channel.send(this.value); chatOutput.innerHTML = 'Me: ' + this.value + '<hr />' + chatOutput.innerHTML; this.value = ''; }; </script> <script> var channel = new DataChannel('Session Unique Identifier'); channel.onopen = function(userid) { chatInput.disabled = false; chatInput.value = 'Hi, ' + userid; chatInput.focus(); }; channel.onmessage = function(message, userid) { chatOutput.innerHTML = userid + ': ' + message + '<hr />' + chatOutput.innerHTML; }; channel.onleave = function(userid) { chatOutput.innerHTML = userid + ' Left.<hr />' + chatOutput.innerHTML; }; </script>