|
@@ -29,8 +29,8 @@
|
|
|
var c = peer2.connect(peerId1);
|
|
var c = peer2.connect(peerId1);
|
|
|
c.on('data', function(data) {
|
|
c.on('data', function(data) {
|
|
|
// When we receive 'Hello', send ' world'.
|
|
// When we receive 'Hello', send ' world'.
|
|
|
- $('body').append(data);
|
|
|
|
|
- c.send(' world');
|
|
|
|
|
|
|
+ $('#helloworld').append(data);
|
|
|
|
|
+ c.send(' peer');
|
|
|
});
|
|
});
|
|
|
});
|
|
});
|
|
|
|
|
|
|
@@ -42,19 +42,74 @@
|
|
|
// transmit data.
|
|
// transmit data.
|
|
|
connection.on('open', function() {
|
|
connection.on('open', function() {
|
|
|
// Send 'Hello' on the connection.
|
|
// Send 'Hello' on the connection.
|
|
|
- connection.send('Hello');
|
|
|
|
|
|
|
+ connection.send('Hello,');
|
|
|
});
|
|
});
|
|
|
// The `data` event is fired when data is received on the connection.
|
|
// The `data` event is fired when data is received on the connection.
|
|
|
connection.on('data', function(data) {
|
|
connection.on('data', function(data) {
|
|
|
// Append the data to body.
|
|
// Append the data to body.
|
|
|
- $('body').append(data);
|
|
|
|
|
|
|
+ $('#helloworld').append(data);
|
|
|
});
|
|
});
|
|
|
});
|
|
});
|
|
|
|
|
+
|
|
|
|
|
+ // Show browser version
|
|
|
|
|
+ $('#browsers').text(navigator.userAgent);
|
|
|
});
|
|
});
|
|
|
|
|
|
|
|
|
|
+
|
|
|
</script>
|
|
</script>
|
|
|
|
|
+<style>
|
|
|
|
|
+ #helloworld {
|
|
|
|
|
+ font-weight: 600;
|
|
|
|
|
+ font-size: 30px;
|
|
|
|
|
+ padding: 20px;
|
|
|
|
|
+ background-color: #4dace2;
|
|
|
|
|
+ border: 1px solid #0C6BA1;
|
|
|
|
|
+ max-width: 600px;
|
|
|
|
|
+ }
|
|
|
|
|
+ #browsers {
|
|
|
|
|
+ font-weight: 600;
|
|
|
|
|
+ }
|
|
|
|
|
+ .warning {
|
|
|
|
|
+ max-width: 600px;
|
|
|
|
|
+ padding: 20px;
|
|
|
|
|
+ background-color: #eee;
|
|
|
|
|
+ border: 1px solid #ccc;
|
|
|
|
|
+ font-size: 18px;
|
|
|
|
|
+ }
|
|
|
|
|
+ .browserinfo {
|
|
|
|
|
+ padding: 20px;
|
|
|
|
|
+ border: 1px solid #ccc;
|
|
|
|
|
+ background-color: #f8f8f8;
|
|
|
|
|
+ }
|
|
|
|
|
+ a {
|
|
|
|
|
+ font-weight: 600;
|
|
|
|
|
+ }
|
|
|
|
|
+</style>
|
|
|
</head>
|
|
</head>
|
|
|
|
|
|
|
|
<body>
|
|
<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="helloworld"></div>
|
|
|
|
|
+ <div class="warning browser"><div class="important">
|
|
|
|
|
+ Good news! If you can see the text in the blue box above, your Chrome is up to
|
|
|
|
|
+ date (version 26) and you can now use WebRTC P2P
|
|
|
|
|
+ DataChannels.
|
|
|
|
|
+ <br>
|
|
|
|
|
+ Open up your Chrome inspector to see what's going on under the hood.
|
|
|
|
|
+ <br><br>
|
|
|
|
|
+ Not cool enough? Try out <a
|
|
|
|
|
+ href="http://cdn.peerjs.com/demo/chat.html">a chat demo</a>
|
|
|
|
|
+ with a friend.
|
|
|
|
|
+ <br>
|
|
|
|
|
+ This demo was built with <a href="http://peerjs.com">PeerJS.</a><br><br>
|
|
|
|
|
+ <div class="browserinfo">
|
|
|
|
|
+ Your browser version: <span id="browsers"></span><br>
|
|
|
|
|
+ Currently <strong>Google Chrome 26.0.1403.0 or above</strong> is
|
|
|
|
|
+ required.</strong></div><br>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.</div></div>
|
|
|
</body>
|
|
</body>
|
|
|
</html>
|
|
</html>
|
Michelle Bu