/js/lib/Socket.IO-node/example/chat.html

http://github.com/onedayitwillmake/RealtimeMultiplayerNodeJs · HTML · 69 lines · 58 code · 11 blank · 0 comment · 0 complexity · c28dbcc9f169d9621ef31bb99eba5c1d MD5 · raw file 

    

  1. <!doctype html>
    2. 

  2. <html>
    3. 

  3.   <head>
    4. 

  4.     <title>socket.io client test</title>
    5. 

  5.         
    6. 

  6.     <script src="/json.js"></script> <!-- for ie -->
    7. 

  7.     <script src="/socket.io/socket.io.js"></script>
    8. 

  8.   </head>
    9. 

  9.   <body>
    10. 

  10.     
    11. 

  11.     <script>
    12. 

  12.       function message(obj){
    13. 

  13.         var el = document.createElement('p');
    14. 

  14.         if ('announcement' in obj) el.innerHTML = '<em>' + esc(obj.announcement) + '</em>';
    15. 

  15.         else if ('message' in obj) el.innerHTML = '<b>' + esc(obj.message[0]) + ':</b> ' + esc(obj.message[1]);
    16. 

  16.         
    17. 

  17.         if( obj.message && window.console && console.log ) console.log(obj.message[0], obj.message[1]);
    18. 

  18.         document.getElementById('chat').appendChild(el);
    19. 

  19.         document.getElementById('chat').scrollTop = 1000000;
    20. 

  20.       }
    21. 

  21.       
    22. 

  22.       function send(){
    23. 

  23.         var val = document.getElementById('text').value;
    24. 

  24.         socket.send(val);
    25. 

  25.         message({ message: ['you', val] });
    26. 

  26.         document.getElementById('text').value = '';
    27. 

  27.       }
    28. 

  28.       
    29. 

  29.       function esc(msg){
    30. 

  30.         return msg.replace(/</g, '&lt;').replace(/>/g, '&gt;');
    31. 

  31.       };
    32. 

  32.       
    33. 

  33.       var socket = new io.Socket(null, {port: 8080, rememberTransport: false});
    34. 

  34.       socket.connect();
    35. 

  35.       socket.on('message', function(obj){
    36. 

  36.         if ('buffer' in obj){
    37. 

  37.           document.getElementById('form').style.display='block';
    38. 

  38.           document.getElementById('chat').innerHTML = '';
    39. 

  39.           
    40. 

  40.           for (var i in obj.buffer) message(obj.buffer[i]);
    41. 

  41.         } else message(obj);
    42. 

  42.       });
    43. 

  43.       
    44. 

  44.       socket.on('connect', function(){ message({ message: ['System', 'Connected']})});
    45. 

  45.       socket.on('disconnect', function(){ message({ message: ['System', 'Disconnected']})});
    46. 

  46.       socket.on('reconnect', function(){ message({ message: ['System', 'Reconnected to server']})});
    47. 

  47.       socket.on('reconnecting', function( nextRetry ){ message({ message: ['System', 'Attempting to re-connect to the server, next attempt in ' + nextRetry + 'ms']})});
    48. 

  48.       socket.on('reconnect_failed', function(){ message({ message: ['System', 'Reconnected to server FAILED.']})});
    49. 

  49.     </script>
    50. 

  50.     
    51. 

  51.     <h1>Sample chat client</h1>
    52. 

  52.     <div id="chat"><p>Connecting...</p></div>
    53. 

  53.     <form id="form" onSubmit="send(); return false">
    54. 

  54.       <input type="text" autocomplete="off" id="text"><input type="submit" value="Send">
    55. 

  55.     </form>
    56. 

  56.     
    57. 

  57.     <style>
    58. 

  58.       #chat { height: 300px; overflow: auto; width: 800px; border: 1px solid #eee; font: 13px Helvetica, Arial; }
    59. 

  59.       #chat p { padding: 8px; margin: 0; }
    60. 

  60.       #chat p:nth-child(odd) { background: #F6F6F6; }
    61. 

  61.       #form { width: 782px; background: #333; padding: 5px 10px; display: none; }
    62. 

  62.       #form input[type=text] { width: 700px; padding: 5px; background: #fff; border: 1px solid #fff; }
    63. 

  63.       #form input[type=submit] { cursor: pointer; background: #999; border: none; padding: 6px 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; margin-left: 5px; text-shadow: 0 1px 0 #fff; }
    64. 

  64.       #form input[type=submit]:hover { background: #A2A2A2; }
    65. 

  65.       #form input[type=submit]:active { position: relative; top: 2px; }
    66. 

  66.     </style>
    67. 

  67.     
    68. 

  68.   </body>
    69. 

  69. </html>
    70.