WebRTC PeerJS text chat - concurrent connection to multiple peerIDs
Greetings I was working on connecting to multiple peer ids for text chat, when I connect to single peer site it works
but I am getting problem when multiple peerids are connected at the same time.
For example, to connect to a single peer, we will use this
var conn = peer.connect(peerId);
conn.on('open', function() {
connect(conn);
});
When I want to connect to multiple peer ids
For ex: var peerIDs = ['peerid 1', 'peerid 2', 'peerid 3']
I am using a loop for this
for(var i=0 ; i < peerIDs.length ; i++){
conn = peer.connect(peerIDs[i]);
conn.on('open', function() {
connect(conn);
});
}
Here's the complete code:
var userId = new Date().getTime();
//Get the ID from the server
var peer = new Peer(userId, {host: 'localhost', port: 3031, path: '/',debug: true });
var conn;
var connections = [];
//to receive id from the server
peer.on('open', function(id){
console.log('the id is' +id);
});
//in case of error
peer.on('error', function(e){
alert(e.message);
})
//Awaits for the connection
peer.on('connection', connect);
function connect(c){
conn = c;
connections[c.peer].on('data', function(data){
var mess = document.createElement('div');
mess.innerHTML = '<span class="peer">' + c.peer + '</span>: ' + data;
angular.element( document.querySelector( '.messages' ) ).append(mess);
});
connections[c.peer].on('close', function(){
alert(c.peer + 'has left the chat');
});
}
//When user clicks the chat button
$scope.chat = function(){
alert('user clicked the connect button');
var peerIDs = [ 'peerid 1', 'peerid 2', 'peerid 3']
for(var i=0 ; i < peerIDs.length ; i++){
var conn = peer.connect(peerIDs[i]);
conn.on('open', function() {
connections.push(c);
connect(conn);
});
}
}
//send message when clicked
$scope.send = function(){
// For each active connection, send the message.
var msg = angular.element( document.querySelector( '#mess' ) ).val();
//Send message to all connected peers
for(var i in connections){
connections[i].send(msg);
}
angular.element( document.querySelector( '.messages' ) ).append('<div><span class="you">You: </span>' + msg
+ '</div>');
}
Could you please make it clear how to achieve this. Your help would be much appreciated.
+3
source to share
2 answers
To be able to connect to multiple connections at the same time, you need to handle multi-connections at the same time.
// Array of remote peers ID and data channel
var remotePeerIds=[],// You need this to link with specific DOM element
connections=[]; // This is where you manage multi-connections
// create a Peer
var peer = new Peer({key: 'YOUR_KEY'}); // You can use your own peerID here
// Get your local peer id
peer.on('open', function(id) {
console.log('My peer ID is: ' + id);
});
// Start connection with other peer - and handle it
getConnect(remotePeerId){
var conn = peer.connect(remotePeerId);
handleConnection(conn);
}
// Ok now you need to handle the received connection too
peer.on('connection',function(conn){
handleConnection(conn);
});
// Handle connection - this is most important part
handleConnection(conn){
remotePeerIds.push(conn.peer); // Add remote peer to list
conn.on('open', function() {
console.log("Connected with peer: "+remotePeerId);
conn.on('data',function(data){
// You can do whatever you want with the data from this connection - this is also the main part
dataHandler(conn,data);
});
conn.on('error',function(){
// handle error
connectionError(conn);
});
conn.on('close',function(){
// Handle connection closed
connectionClose(conn);
});
connections.push(conn);
});
});
}
// So now you have multi-connections. If you want to send a message to all other peer, just using for loop with all the connections
function broadcastMessage(message){
for(var i=0;i<connections.length,i++){
connections[i].send(message);
}
}
// Or if you want to send a message to a specific peer - you need to know his peerid
function privateMessage(remotePeerId,message){
for(var i=0;i<connections.length,i++){
if(connections[i].peer==remotePeerId){
connections[i].send(message);
break;
}
}
}
This is the main part, you need to add some more code for the connection handler on error and close.
What is it!
+1
source to share
@ luongnv89 Thanks for your answer.
But I get the problem when I try to connect multiple peerIDs
For Ex:
// Start connection with other peer - and handle it
function getConnect(remotePeerId){
var conn = peer.connect(remotePeerId);
handleConnection(conn);
}
var peerIDS = ['cttgmy43jy30udi0', 'mhzqhpn8rj4f5hfr'];
for(var i=0 ; i < peerIDS.length ; i++){
getConnect(peerIDS[i]);
}
When I ran the above loop, I can only connect to the last peerid I pass in the array, in this case it is "mhzqhpn8rj4f5hfr"
Here I am writing a console thing
PeerJS: Creating RTCPeerConnection.
peer.min.js:1 PeerJS: Listening for ICE candidates.
peer.min.js:1 PeerJS: Listening for `negotiationneeded`
peer.min.js:1 PeerJS: Listening for data channel
peer.min.js:1 PeerJS: Listening for remote stream
peer.min.js:1 PeerJS: Creating RTCPeerConnection.
peer.min.js:1 PeerJS: Listening for ICE candidates.
peer.min.js:1 PeerJS: Listening for `negotiationneeded`
peer.min.js:1 PeerJS: Listening for data channel
peer.min.js:1 PeerJS: Listening for remote stream
2peer.min.js:1 PeerJS: `negotiationneeded` triggered
peer.min.js:1 PeerJS: Created offer.
peer.min.js:1 PeerJS: Set localDescription: offer for: cttgmy43jy30udi0
peer.min.js:1 PeerJS: Created offer.
peer.min.js:1 PeerJS: Received ICE candidates for: cttgmy43jy30udi0
peer.min.js:1 PeerJS: Set localDescription: offer for: mhzqhpn8rj4f5hfr
peer.min.js:1 PeerJS: Received ICE candidates for: mhzqhpn8rj4f5hfr
peer.min.js:1 PeerJS: Setting remote description RTCSessionDescription {sdp: "v=0
↵o=- 8190108536299128797 2 IN IP4 127.0.0.1
↵s…id:data
↵a=sctpmap:5000 webrtc-datachannel 1024
↵", type: "answer"}
peer.min.js:1 PeerJS: Added ICE candidate for: cttgmy43jy30udi0
peer.min.js:1 PeerJS: Set remoteDescription: ANSWER for: cttgmy43jy30udi0
2peer.min.js:1 PeerJS: Added ICE candidate for: cttgmy43jy30udi0
2peer.min.js:1 PeerJS: Received ICE candidates for: mhzqhpn8rj4f5hfr
peer.min.js:1 PeerJS: Data channel connection success
peer.min.js:1 PeerJS: Setting remote description RTCSessionDescription {sdp: "v=0
↵o=Mozilla-SIPUA-35.0.1 15417 0 IN IP4 0.0.0.0…ap:5000 webrtc-datachannel 1024
↵a=setup:active
↵", type: "answer"}
2peer.min.js:1 PeerJS: Added ICE candidate for: mhzqhpn8rj4f5hfr
peer.min.js:1 PeerJS: Set remoteDescription: ANSWER for: mhzqhpn8rj4f5hfr
peer.min.js:1 PeerJS: Added ICE candidate for: mhzqhpn8rj4f5hfr
peer.min.js:1 PeerJS: Data channel connection success
peer.min.js:1 PeerJS: Added ICE candidate for: mhzqhpn8rj4f5hfr
So what was done to get it working, I don't know if it is correct or not ...
I just set a delay between connections
var peerIDS = ['cttgmy43jy30udi0', 'mhzqhpn8rj4f5hfr'];
var arrLength = peerIDS.length;
var count = 0;
(function processConnection(){
if(arrLength <= count) return;
getConnect(peerIDS[count]);
count++;
setTimeout(function(){
processConnection()
}, 5000);
})();
And now it works correctly. Can you tell me if I am on the right track or if there is an even better way to achieve this?
+1
source to share