WebRTC PeerJS文本聊天 - 同时连接到多个peerID

时间:2015-06-09 16:43:04

标签: webrtc peerjs

嗨朋友我一直在努力连接到多个同伴ID进行文字聊天,当我单独连接到单个同伴时它正在工作

但我在同时连接多个peerid时遇到问题

例如,对于连接到单个对等体,我们将使用此

    var conn = peer.connect(peerId);

    conn.on('open', function() {
        connect(conn);
    });

当我想连接到多个对等ID

例如:var peerIDs = [' peerid 1',' peerid 2',' peerid 3']

我正在使用循环

for(var i=0 ; i < peerIDs.length ; i++){
    conn = peer.connect(peerIDs[i]);

    conn.on('open', function() {
        connect(conn);
    });        
}

以下是完整的代码:

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>');

}

您能否提供有关如何实现这一目标的见解。非常感谢您的帮助。

2 个答案:

答案 0 :(得分:1)

为了能够同时拥有多个连接,您只需要同时处理多个连接。

// 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;
        }
   }
}

这是主要部分,如果出现错误并关闭,您需要为连接处理程序添加更多代码。

就是这样!

答案 1 :(得分:1)

@ luongnv89感谢您的回复。

但是当我尝试连接多个peerID

时,我遇到了问题

对于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]);     
    } 

当我运行上面的循环时,我能够只连接我在数组中传递的最后一个peerid,在这种情况下它是'mhzqhpn8rj4f5hfr'

这里我发布了控制台的东西

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

那么是什么让它发挥作用我不知道它是否是正确的方法......

我只设置连接之间的延迟

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);
})();

现在它正常工作。你能告诉我我是走在正确的道路上还是有更好的方法来实现这个目标