helloworld.html 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115
  1. <!DOCTYPE HTML>
  2. <html lang="en">
  3. <head>
  4. <title>PeerJS Hello World Code Example</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  6. <meta http-equiv="Content-Language" content="en-us">
  7. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
  8. <script type="text/javascript" src="http://cdn.peerjs.com/0/peer.js"></script>
  9. <script>
  10. // This is a very simple code example. See chat.html for a more involved
  11. // example.
  12. $(document).ready(function() {
  13. var peer1, peer2, peerId1;
  14. // Create a new Peer with our demo API key, with debug set to true so we can
  15. // see what's going on.
  16. peer1 = new Peer({ key: 'lwjd5qra8257b9', debug: true });
  17. // Create another Peer with our demo API key to connect to.
  18. peer2 = new Peer({ key: 'lwjd5qra8257b9', debug: true });
  19. // The `open` event signifies that the Peer is ready to connect with other
  20. // Peers and, if we didn't provide the Peer with an ID, that an ID has been
  21. // assigned by the server.
  22. peer1.on('open', function(id){
  23. peerId1 = id;
  24. var c = peer2.connect(peerId1);
  25. c.on('data', function(data) {
  26. // When we receive 'Hello', send ' world'.
  27. $('#helloworld').append(data);
  28. c.send(' peer');
  29. });
  30. });
  31. // Wait for a connection from the second peer.
  32. peer1.on('connection', function(connection) {
  33. // This `connection` is a DataConnection object with which we can send
  34. // data.
  35. // The `open` event firing means that the connection is now ready to
  36. // transmit data.
  37. connection.on('open', function() {
  38. // Send 'Hello' on the connection.
  39. connection.send('Hello,');
  40. });
  41. // The `data` event is fired when data is received on the connection.
  42. connection.on('data', function(data) {
  43. // Append the data to body.
  44. $('#helloworld').append(data);
  45. });
  46. });
  47. // Show browser version
  48. $('#browsers').text(navigator.userAgent);
  49. });
  50. </script>
  51. <style>
  52. #helloworld {
  53. font-weight: 600;
  54. font-size: 30px;
  55. padding: 20px;
  56. background-color: #4dace2;
  57. border: 1px solid #0C6BA1;
  58. max-width: 600px;
  59. }
  60. #browsers {
  61. font-weight: 600;
  62. }
  63. .warning {
  64. max-width: 600px;
  65. padding: 20px;
  66. background-color: #eee;
  67. border: 1px solid #ccc;
  68. font-size: 18px;
  69. }
  70. .browserinfo {
  71. padding: 20px;
  72. border: 1px solid #ccc;
  73. background-color: #f8f8f8;
  74. }
  75. a {
  76. font-weight: 600;
  77. }
  78. </style>
  79. </head>
  80. <body>
  81. <a href="https://github.com/peers/peerjs"><img style="position: absolute; top: 0; right: 0; border: 0;"
  82. src="https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png"
  83. alt="Fork me on GitHub"></a>
  84. <div id="helloworld"></div>
  85. <div class="warning browser"><div class="important">
  86. Good news! If you can see the text in the blue box above, your Chrome is up to
  87. date (version 26) and you can now use WebRTC P2P
  88. DataChannels.
  89. <br>
  90. Open up your Chrome inspector to see what's going on under the hood.
  91. <br><br>
  92. Not cool enough? Try out <a
  93. href="http://cdn.peerjs.com/demo/chat.html">a chat demo</a>
  94. with a friend.
  95. <br>
  96. This demo was built with <a href="http://peerjs.com">PeerJS.</a><br><br>
  97. <div class="browserinfo">
  98. Your browser version: <span id="browsers"></span><br>
  99. Currently <strong>Google Chrome 26.0.1403.0 or above</strong> is
  100. required.</strong></div><br>For more up to date compatibility
  101. information see <a href="http://peerjs.com/status">PeerJS WebRTC
  102. Status</a><br>Note that this demo may also fail if you are behind
  103. stringent firewalls.</div></div>
  104. </body>
  105. </html>