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>