DataChannel.js is a JavaScript library useful to write many-to-many i.e. group file/data sharing or text chat applications. Its syntax is easier to use and understand. It highly simplifies complex tasks like any or all user rejection/ejection; direct messages delivery; and more.
Home Page: https://www.webrtc-experiment.com/#DataChannel
First of all, congratulations for this wonderful project! It is ideal for implementing a public and/or private chat.
BUT, what I miss is the ability to send some local user metadata on connection and/or with the messages.
That will permit to have the ability to display some shiny list of user on-line, or message.
I made an implementation sending (back) JSON messages, resulting something like in the folowing screenshot, BUT it complicate a bit the logic.
So, I need to do something like:
channel.onopen = function (userid) {
console.debug(userid, 'is connected with you.');
setTimeout(function() {
sendUserInfo(userid);
// Enable the input.
chatInput.attr("disabled", false);
chatButton.attr("disabled", false);
chatInput.focus();
}, 5000);
};
channel.onmessage = function(message, userid, latency) {
console.log('Latency:', latency, 'milliseconds');
console.debug('Message from', userid, ':', message);
var data = JSON.parse(message);
if (data.type == 'message') {
addChatMessage(data.message, data.realname, data.picture, 'left');
}
// Further, we will handle only the INFO messages.
else if (data.type != 'info') {
return;
}
if (! chatUsers[userid]) {
chatUsers[userid] = data;
addOnlineUser(userid, data);
//
var text = sprintf("<?= __d('chat', '%s (%s) joined the chat.'); ?>", data.realname, data.username);
addLogMessage(text, 'success');
}
};
function sendUserInfo(userid) {
var value = JSON.stringify({
type: 'info',
username: userInfo.username,
realname: userInfo.realname,
roles: userInfo.roles,
picture: userInfo.picture,
});
console.debug('Sending User info to', userid);
channel.channels[userid].send(value);
}
function sendMessage() {
var message = chatInput.val();
var value = JSON.stringify({
type: 'message',
username: userInfo.username,
realname: userInfo.realname,
picture: userInfo.picture,
message: message
});
channel.send(value);
//
addChatMessage(message, userInfo.realname, userInfo.picture, 'right');
chatInput.val('');
}IF there would be the ability to specify some metadata for the local User, the code would be greatly simplified and would not be a need to encode in the JSON the messages. For example:
channel.onopen = function (userid, data) {
console.debug(userid, 'is connected with you.');
if (! chatUsers[userid]) {
chatUsers[userid] = data;
addOnlineUser(userid, data);
//
var text = sprintf("<?= __d('chat', '%s (%s) joined the chat.'); ?>", data.realname, data.username);
addLogMessage(text, 'success');
}
// Enable the input.
chatInput.attr("disabled", false);
chatButton.attr("disabled", false);
chatInput.focus();
};
channel.onmessage = function(message, userid, latency, data) {
console.log('Latency:', latency, 'milliseconds');
console.debug('Message from', userid, ':', message);
addChatMessage(data.message, data.realname, data.picture, 'left');
};
function sendMessage() {
var message = chatInput.val();
channel.send(value);
//
addChatMessage(message, userInfo.realname, userInfo.picture, 'right');
chatInput.val('');
}Where to add that User Medata? I think at beginning, something like:
var channel = new DataChannel();
channel.metadata = {
userid: '<?= $user->id; ?>',
username: '<?= $user->username; ?>',
realname: '<?= $user->realname; ?>',
picture: '<?= $user->picture(); ?>'
};BTW, in the previous snippet, I used a piece from a PHP application.
I tried to send data array buffer but I couldn't, I tried sending simple array and it works fine.
What should I do to send array buffer using this DataChannel
`
function setChannel() {
console.log("setChannel is working fine");
channel.open();
}
var channel = new DataChannel();
channel.onopen = function (userid) {
console.log("channel opened successfully.")
// channel.send("Every thing is ready for sending data, are you get this message?");
};
channel.onmessage = function (message, userid) {
//console.log("Sender: " + message);
console.log(" A message received from sender.")
console.log(message);
};
channel.onleave = function (userid) {
console.log(" Sender have leave the channel!")
};
// search for existing data channels
channel.connect();
`
And for sending through the channel I used this code:
channel.send(myArrayBuffer)
This library doesn't allow disconnect channel. I can't leave channel and enter again under the same user name, because i don't see users who where in the room when i left. When i do this and new user come i can see him with no problems. Could you tell me what i do wrong, or fix this?
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.