helloworld.html 4.1 KB

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