chat.html 2.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273
  1. <!DOCTYPE HTML>
  2. <html lang="en">
  3. <head>
  4. <title>PeerJS chat demo</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. var conn;
  11. // Connect to PeerJS, have server assign an ID instead of providing one
  12. var peer = new Peer({key: 'lwjd5qra8257b9', debug: true});
  13. peer.on('open', function(id){
  14. $('#pid').text(id);
  15. });
  16. // Await connections from others
  17. peer.on('connection', connect);
  18. function connect(c) {
  19. $('#chat_area').show();
  20. conn = c;
  21. $('#messages').empty().append('Now chatting with ' + conn.peer);
  22. conn.on('data', function(data){
  23. $('#messages').append('<br>' + conn.peer + ':<br>' + data);
  24. });
  25. conn.on('close', function(err){ alert(conn.peer + ' has left the chat.') });
  26. }
  27. $(document).ready(function() {
  28. // Conect to a peer
  29. $('#connect').click(function(){
  30. var c = peer.connect($('#rid').val());
  31. c.on('open', function(){
  32. connect(c);
  33. });
  34. c.on('error', function(err){ alert(err) });
  35. });
  36. // Send a chat message
  37. $('#send').click(function(){
  38. var msg = $('#text').val();
  39. conn.send(msg);
  40. $('#messages').append('<br>You:<br>' + msg);
  41. $('#text').val('');
  42. });
  43. // Show browser version
  44. $('#browsers').text(navigator.userAgent);
  45. });
  46. </script>
  47. </head>
  48. <body>
  49. Your PeerJS id is : <span id="pid"></span><br><br>
  50. Connect to peer: <input type="text" id="rid" placeholder="Someone else's id">
  51. <input type="button" value="Connect" id="connect"><br><br>
  52. <div id="chat_area" style="display: none;">
  53. <div id="messages"></div>
  54. <input type="text" id="text" placeholder="Enter message">
  55. <input type="button" value="Send" id="send">
  56. </div>
  57. <br><br><br>
  58. <p style="font-size: 10px;">Your browser version: <span id="browsers"></span><br>
  59. Currently <strong>Google Chrome 26.0.1403.0 or above</strong> is required (Dev or Canary channels)</strong><br><br>For more up to date compatibility information see <a href="http://peerjs.com/status">PeerJS WebRTC Status</a><br><br>Note that this demo may also fail if you are behind stringent firewalls or both you and the remote peer and behind symmetric NATs.</p>
  60. </body>
  61. </html>