|
|
@@ -0,0 +1,144 @@
|
|
|
+<!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">
|
|
|
+
|
|
|
+<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
|
|
|
+<script type="text/javascript" src="http://cdn.peerjs.com/0/peer.js"></script>
|
|
|
+<script>
|
|
|
+ // Connect to PeerJS, have server assign an ID instead of providing one
|
|
|
+ var connections = {};
|
|
|
+ var peer = new Peer({key: 'lwjd5qra8257b9', debug: true});
|
|
|
+
|
|
|
+ // Show this peer's ID.
|
|
|
+ peer.on('open', function(id){
|
|
|
+ $('#pid').text(id);
|
|
|
+ });
|
|
|
+
|
|
|
+ // Await connections from others
|
|
|
+ peer.on('connection', connect);
|
|
|
+
|
|
|
+ // Handle a connection object.
|
|
|
+ function connect(c) {
|
|
|
+ // Handle a chat connection.
|
|
|
+ if (c.label === 'chat') {
|
|
|
+ var chatbox = $('<div><b</div>').addClass('connection').attr('data-peer', c.peer);
|
|
|
+ // Select connection handler.
|
|
|
+ chatbox.on('click', function() {
|
|
|
+ if ($(this).attr('class').indexOf('active') === -1) {
|
|
|
+ $(this).addClass('active');
|
|
|
+ } else {
|
|
|
+ $(this).removeClass('active');
|
|
|
+ }
|
|
|
+ });
|
|
|
+ $('#connections').append(chatbox);
|
|
|
+
|
|
|
+ c.on('data', function(data) {
|
|
|
+ chatbox.append('<br><span class="peer">' + c.peer + '</span>: ' + data);
|
|
|
+ });
|
|
|
+ c.on('close', function(err) { alert(c.peer + ' has left the chat.'); });
|
|
|
+ } else {
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ // Save connection object appropriately.
|
|
|
+ if (!connections[c.peer]) {
|
|
|
+ connections[c.peer] = {};
|
|
|
+ }
|
|
|
+ connections[c.peer][c.label] = c;
|
|
|
+ }
|
|
|
+
|
|
|
+ $(document).ready(function() {
|
|
|
+ // Prepare file drop box.
|
|
|
+ var box = $('#box');
|
|
|
+ box.on('dragenter', doNothing);
|
|
|
+ box.on('dragover', doNothing);
|
|
|
+ box.text('Drag file to send to active connection here.');
|
|
|
+ box.on('drop', function(e){
|
|
|
+ e.originalEvent.preventDefault();
|
|
|
+ var file = e.originalEvent.dataTransfer.files[0];
|
|
|
+ for (var i = 0, ii = connections.length; i < ii; i += 1) {
|
|
|
+ var connection = connections[i];
|
|
|
+ connection.send(file);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ function doNothing (e){
|
|
|
+ e.preventDefault();
|
|
|
+ e.stopPropagation();
|
|
|
+ }
|
|
|
+
|
|
|
+ // Connect to a peer
|
|
|
+ $('#connect').click(function() {
|
|
|
+ // Create 2 connections, one labelled chat and another labelled file.
|
|
|
+ var c = peer.connect($('#rid').val(), 'chat');
|
|
|
+ var f = peer.connect($('#rid').val(), 'file');
|
|
|
+ c.on('open', function() {
|
|
|
+ connect(c);
|
|
|
+ });
|
|
|
+ f.on('open', function() {
|
|
|
+ connect(f);
|
|
|
+ });
|
|
|
+ c.on('error', function(err) { alert(err); });
|
|
|
+ f.on('error', function(err) { alert(err); });
|
|
|
+ });
|
|
|
+
|
|
|
+ // Close a connection.
|
|
|
+ $('#close').click(function() {
|
|
|
+ eachActiveConnection(function(c) {
|
|
|
+
|
|
|
+ });
|
|
|
+ });
|
|
|
+
|
|
|
+ // Send a chat message to all active connections.
|
|
|
+ $('#send').click(function() {
|
|
|
+ // For each active connection, send the message.
|
|
|
+ var msg = $('#text').val();
|
|
|
+ conn.send(msg);
|
|
|
+ $('#messages').append('<br>You:<br>' + msg);
|
|
|
+ $('#text').val('');
|
|
|
+ });
|
|
|
+
|
|
|
+ // Goes through each active peer and calls FN on its connections.
|
|
|
+ function eachActiveConnection(fn) {
|
|
|
+ var actives = $('.active');
|
|
|
+ actives.each(function() {
|
|
|
+ var peerId = $(this).attr('data-peer');
|
|
|
+ fn(connections[peerId]);
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ // Show browser version
|
|
|
+ $('#browsers').text(navigator.userAgent);
|
|
|
+ });
|
|
|
+
|
|
|
+</script>
|
|
|
+</head>
|
|
|
+
|
|
|
+<body>
|
|
|
+
|
|
|
+ Your PeerJS id is : <span id="pid"></span><br><br>
|
|
|
+ Connect to peer: <input type="text" id="rid" placeholder="Someone else's id">
|
|
|
+ <input type="button" value="Connect" id="connect"><br><br>
|
|
|
+
|
|
|
+
|
|
|
+ <div id="chat_area" style="display: none;">
|
|
|
+ <div id="messages"></div>
|
|
|
+ <input type="text" id="text" placeholder="Enter message">
|
|
|
+ <input type="button" value="Send" id="send">
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+ <div id="box" style="background: #eee; font-size: 26px; width: 400px;
|
|
|
+ height:300px;line-height: 300px; margin: 0 auto; text-align: center;">
|
|
|
+ Drag files here.
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+ <br><br><br>
|
|
|
+ <p style="font-size: 10px;">Your browser version: <span id="browsers"></span><br>
|
|
|
+ Currently <strong>Google Chrome 26.0.1403.0 or above</strong> is required (Dev or Canary channels)</strong><br><br>For more up to date compatibility information see <a href="http://peerjs.com/status">PeerJS WebRTC Status</a><br><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.</p>
|
|
|
+
|
|
|
+</body>
|
|
|
+</html>
|
Michelle Bu