helloworld.html 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960
  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. $('body').append(data);
  28. c.send(' world');
  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. $('body').append(data);
  45. });
  46. });
  47. });
  48. </script>
  49. </head>
  50. <body>
  51. </body>
  52. </html>