123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115 |
- <!DOCTYPE HTML>
- <html lang="en">
- <head>
- <title>PeerJS Hello World Code Example</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>
- // This is a very simple code example. See chat.html for a more involved
- // example.
- $(document).ready(function() {
- var peer1, peer2, peerId1;
- // Create a new Peer with our demo API key, with debug set to true so we can
- // see what's going on.
- peer1 = new Peer({ key: 'lwjd5qra8257b9', debug: true });
- // Create another Peer with our demo API key to connect to.
- peer2 = new Peer({ key: 'lwjd5qra8257b9', debug: true });
- // The `open` event signifies that the Peer is ready to connect with other
- // Peers and, if we didn't provide the Peer with an ID, that an ID has been
- // assigned by the server.
- peer1.on('open', function(id){
- peerId1 = id;
- var c = peer2.connect(peerId1);
- c.on('data', function(data) {
- // When we receive 'Hello', send ' world'.
- $('#helloworld').append(data);
- c.send(' peer');
- });
- });
- // Wait for a connection from the second peer.
- peer1.on('connection', function(connection) {
- // This `connection` is a DataConnection object with which we can send
- // data.
- // The `open` event firing means that the connection is now ready to
- // transmit data.
- connection.on('open', function() {
- // Send 'Hello' on the connection.
- connection.send('Hello,');
- });
- // The `data` event is fired when data is received on the connection.
- connection.on('data', function(data) {
- // Append the data to body.
- $('#helloworld').append(data);
- });
- });
- // Show browser version
- $('#browsers').text(navigator.userAgent);
- });
- </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>
-
- <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>
- </html>
|