peerjs example

by techsin

HTML

<script src="http://cdn.peerjs.com/0.3/peer.js"></script>
var c = p1.connect('b123'); c.on('open', function (data) { console.log('connected to peer'); c.send({x:x,y:y}); }); p2.on('open', function (id) { if (!ur) { ur = p2; } }); p2.on('connection', function (connection) { connection.on('data',function(data){console.log('p2->.got from p1: '+data.a);}); });
<button class="btn">Show connected peers</button>
<button class="ax">send</button>

JavaScript

var ids = ['a123', 'b123', 'c123'],
    peersConnected = [],
    ur;

var n = 0;
getId();
kickClosedPeers();

function getId() {
    var x;
    x = new Peer(ids[n], {key: '0of84d1q9f0cc8fr'});

    x.on('open', function (id) {
        console.log('your id: ' + id);
        ur = x; //if is not taken then ur ==x 
        connectToPeers(); //once have id connect to peers
    });
    x.on('error', function (err) {
        if (err.type != "unavailable-id") return;
        if (n < ids.length - 1) {
            n++;
            getId();
        } else { console.log('out of connections'); }
    });
}

function connectToPeers() { //try to connect to all who are already there
    ur.on('connection', function (x) {
        x.on('open',addPeer);
    }); //also add later peers
    ids.forEach(function (x) {
        if (ur.id == x) return; //dont try to connect to urself
        var con = ur.connect(x);
        con.on('open', addPeer);
    });
    
    function addPeer(){
        this.ele = $('<p>peer</p>');
        $(document.body).append(this.ele);
        peersConnected.push(this);
        console.log('connected');
        this.on('data',function(data){
            this.ele.css({top:data.y,left:data.x});
            console.log(this.peer + ": " + data.x,data.y);
        });
    }
}





function kickClosedPeers() { //loop and drop dead peers
    peersConnected.forEach(function (x, i) {
        if (!x.open) {
            x.ele.remove();
            peersConnected.splice(i, 1);
            console.log('dropped');
        }
    });

    requestAnimationFrame(function () {
        setTimeout(kickClosedPeers, 100)
    });
}

function sendToPeers(x,y) {
    peersConnected.forEach(function(e,i){
        e.send( {x:x,y:y});
    });
}




$('.ax').click(function(){ sendToPeers(1,3); });

$('.btn').click(function () {
    peersConnected.forEach(function (x) {
        console.log(x);
    });
});