<!DOCTYPE html>
<html lang="en" >
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/peerjs/0.3.14/peer.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body >
<div ng-app="app" ng-controller = "myCtrl">
<h1>Simple P2P w/ Angular</h1>
<div>The share ID is: {{shareID}}</div>
<div>Connect to another session by inputing the share ID
<label><input type="text" ng-model="connectToID"></label>
<button ng-click="connectToUser(connectToID)">Connect</button>
</div>
<div>
<p>
Start typing your below below. Are you type, your peer will
also start seeing the changes in the text box below:
<div>
<textarea ng-model="dataText"></textarea>
</div>
</p>
</div>
</div>
</body>
</html>
console.clear();
var app = angular.module("app", []);
// The goal: Setup a P2P connection between multiple (>= 2 ) peers
// for a collobrative editing of the textarea
// Any changes each peer maches to the textarea,
// all the peers will be see the changes in thier text area
app.controller("myCtrl", function($scope) {
$scope.connectToID = 'enter id here';
$scope.shareID = 'NONE';
$scope.dataText = 'TYPE HERE';
conns = []; // Track all the connections
// Keep eye on the "dataText" variable for change.
// Everytime the change occurs send the updated
// variable to all the peers.
$scope.$watch('dataText', function() {
for (i = 0; i < conns.length; i++) {
conns[i].send($scope.dataText);
}
});
// http://peerjs.com/docs/#api
peer = new Peer({
key: 'lwjd5qra8257b9'
});
// Get the share id
peer.on('open', function(id) {
console.log('Share ID is: ' + id);
$scope.$apply(function() {
$scope.shareID = id;
});
});
// Runs when slave connects to master
peer.on('connection', connect);
// When master recives connection from slave
function connect(conn) {
console.log("Master received connection from slave.");
conns.push(conn);
conn.on('open', function(){
// On frist conneciton master says hello to slave
// Send slave mater's data
conn.send("Master says hello to slave");
});
// On first connection master receives message from slave
// Get data from slave
conn.on('data', function(data) {
console.log('Master received data from slave: ' + data);
//$scope.$apply(function(){$scope.dataText = data;});
});
}
// Runs when slave request to "CONNECT" with master
$scope.connectToUser = function(id) {
console.log("Slave is requesting to connect to: " + id);
conn = peer.connect(id);
// When the connection between slave and master opens up
conn.on('open', function() {
console.log("Slave to Master connection established")
// Add the master connection to connection list
conns.push(conn);
// On first connection slave sends hello to master
conn.send("Slave says hello to master.");
// On first connection we get master's message to slave
conn.on('data', function(data) {
console.log("Slave received data from master: " + data);
//$scope.$apply(function(){$scope.dataText = data;});
});
});
}
});
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>PeerJS chat demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Language" content="en-us">
<link href="fancy.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript" src="../dist/peer.js"></script>
<script>
// Connect to PeerJS, have server assign an ID instead of providing one
// Showing off some of the configs available with PeerJS :).
var peer = new Peer({
// Set API key for cloud server (you don't need this if you're running your
// own.
key: 'x7fwx2kavpy6tj4i',
// Set highest debug level (log everything!).
debug: 3,
// Set a logging function:
logFunction: function() {
var copy = Array.prototype.slice.call(arguments).join(' ');
$('.log').append(copy + '<br>');
}
});
var connectedPeers = {};
// Show this peer's ID.
peer.on('open', function(id){
$('#pid').text(id);
});
// Await connections from others
peer.on('connection', connect);
peer.on('error', function(err) {
console.log(err);
})
// Handle a connection object.
function connect(c) {
// Handle a chat connection.
if (c.label === 'chat') {
var chatbox = $('<div></div>').addClass('connection').addClass('active').attr('id', c.peer);
var header = $('<h1></h1>').html('Chat with <strong>' + c.peer + '</strong>');
var messages = $('<div><em>Peer connected.</em></div>').addClass('messages');
chatbox.append(header);
chatbox.append(messages);
// Select connection handler.
chatbox.on('click', function() {
if ($(this).attr('class').indexOf('active') === -1) {
$(this).addClass('active');
} else {
$(this).removeClass('active');
}
});
$('.filler').hide();
$('#connections').append(chatbox);
c.on('data', function(data) {
messages.append('<div><span class="peer">' + c.peer + '</span>: ' + data +
'</div>');
});
c.on('close', function() {
alert(c.peer + ' has left the chat.');
chatbox.remove();
if ($('.connection').length === 0) {
$('.filler').show();
}
delete connectedPeers[c.peer];
});
} else if (c.label === 'file') {
c.on('data', function(data) {
// If we're getting a file, create a URL for it.
if (data.constructor === ArrayBuffer) {
var dataView = new Uint8Array(data);
var dataBlob = new Blob([dataView]);
var url = window.URL.createObjectURL(dataBlob);
$('#' + c.peer).find('.messages').append('<div><span class="file">' +
c.peer + ' has sent you a <a target="_blank" href="' + url + '">file</a>.</span></div>');
}
});
}
connectedPeers[c.peer] = 1;
}
$(document).ready(function() {
// Prepare file drop box.
var box = $('#box');
box.on('dragenter', doNothing);
box.on('dragover', doNothing);
box.on('drop', function(e){
e.originalEvent.preventDefault();
var file = e.originalEvent.dataTransfer.files[0];
eachActiveConnection(function(c, $c) {
if (c.label === 'file') {
c.send(file);
$c.find('.messages').append('<div><span class="file">You sent a file.</span></div>');
}
});
});
function doNothing(e){
e.preventDefault();
e.stopPropagation();
}
// Connect to a peer
$('#connect').click(function() {
var requestedPeer = $('#rid').val();
if (!connectedPeers[requestedPeer]) {
// Create 2 connections, one labelled chat and another labelled file.
var c = peer.connect(requestedPeer, {
label: 'chat',
serialization: 'none',
metadata: {message: 'hi i want to chat with you!'}
});
c.on('open', function() {
connect(c);
});
c.on('error', function(err) { alert(err); });
var f = peer.connect(requestedPeer, { label: 'file', reliable: true });
f.on('open', function() {
connect(f);
});
f.on('error', function(err) { alert(err); });
}
connectedPeers[requestedPeer] = 1;
});
// Close a connection.
$('#close').click(function() {
eachActiveConnection(function(c) {
c.close();
});
});
// Send a chat message to all active connections.
$('#send').submit(function(e) {
e.preventDefault();
// For each active connection, send the message.
var msg = $('#text').val();
eachActiveConnection(function(c, $c) {
if (c.label === 'chat') {
c.send(msg);
$c.find('.messages').append('<div><span class="you">You: </span>' + msg
+ '</div>');
}
});
$('#text').val('');
$('#text').focus();
});
// Goes through each active peer and calls FN on its connections.
function eachActiveConnection(fn) {
var actives = $('.active');
var checkedIds = {};
actives.each(function() {
var peerId = $(this).attr('id');
if (!checkedIds[peerId]) {
var conns = peer.connections[peerId];
for (var i = 0, ii = conns.length; i < ii; i += 1) {
var conn = conns[i];
fn(conn, $(this));
}
}
checkedIds[peerId] = 1;
});
}
// Show browser version
$('#browsers').text(navigator.userAgent);
});
// Make sure things clean up properly.
window.onunload = window.onbeforeunload = function(e) {
if (!!peer && !peer.destroyed) {
peer.destroy();
}
};
</script>
</head>
<body>
<a href="https://github.com/peers/peerjs"><img style="position: absolute; top: 0; right: 0; border: 0;"
src="https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png"
alt="Fork me on GitHub"></a>
<div id="actions">
Your PeerJS ID is <span id="pid"></span><br>
Connect to a peer: <input type="text" id="rid" placeholder="Someone else's id"><input class="button" type="button" value="Connect" id="connect"><br><br>
<form id="send">
<input type="text" id="text" placeholder="Enter message"><input class="button" type="submit" value="Send to selected peers">
</form>
<button id="close">Close selected connections</button>
</div>
<div id="wrap"><div id="connections"><span class="filler">You have not yet
made any connections.</span></div>
<div class="clear"></div></div>
<div id="box" style="background: #fff; font-size: 18px;padding:40px 30px; text-align: center;">
Drag file here to send to active connections.
</div>
<div class="warning browser">
<div class="important">Your browser version: <span id="browsers"></span><br>
Currently <strong>Firefox 22+ and Google Chrome 26.0.1403.0 or above</strong> is required.</strong></div>For more up to date compatibility
information see <a href="http://peerjs.com/status">PeerJS WebRTC
Status</a><br>Note that this demo may also fail if you are behind
stringent firewalls or both you and the remote peer and behind symmetric
NATs.
<div class="log" style="color:#FF7500;text-shadow:none;padding:15px;background:#eee"><strong>Connection status</strong>:<br></div>
</div>
</body>
</html>