PageRenderTime 82ms CodeModel.GetById 40ms app.highlight 13ms RepoModel.GetById 27ms app.codeStats 0ms

/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<html>
 3  <head>
 4    <title>socket.io client test</title>
 5        
 6    <script src="/json.js"></script> <!-- for ie -->
 7    <script src="/socket.io/socket.io.js"></script>
 8  </head>
 9  <body>
10    
11    <script>
12      function message(obj){
13        var el = document.createElement('p');
14        if ('announcement' in obj) el.innerHTML = '<em>' + esc(obj.announcement) + '</em>';
15        else if ('message' in obj) el.innerHTML = '<b>' + esc(obj.message[0]) + ':</b> ' + esc(obj.message[1]);
16        
17        if( obj.message && window.console && console.log ) console.log(obj.message[0], obj.message[1]);
18        document.getElementById('chat').appendChild(el);
19        document.getElementById('chat').scrollTop = 1000000;
20      }
21      
22      function send(){
23        var val = document.getElementById('text').value;
24        socket.send(val);
25        message({ message: ['you', val] });
26        document.getElementById('text').value = '';
27      }
28      
29      function esc(msg){
30        return msg.replace(/</g, '&lt;').replace(/>/g, '&gt;');
31      };
32      
33      var socket = new io.Socket(null, {port: 8080, rememberTransport: false});
34      socket.connect();
35      socket.on('message', function(obj){
36        if ('buffer' in obj){
37          document.getElementById('form').style.display='block';
38          document.getElementById('chat').innerHTML = '';
39          
40          for (var i in obj.buffer) message(obj.buffer[i]);
41        } else message(obj);
42      });
43      
44      socket.on('connect', function(){ message({ message: ['System', 'Connected']})});
45      socket.on('disconnect', function(){ message({ message: ['System', 'Disconnected']})});
46      socket.on('reconnect', function(){ message({ message: ['System', 'Reconnected to server']})});
47      socket.on('reconnecting', function( nextRetry ){ message({ message: ['System', 'Attempting to re-connect to the server, next attempt in ' + nextRetry + 'ms']})});
48      socket.on('reconnect_failed', function(){ message({ message: ['System', 'Reconnected to server FAILED.']})});
49    </script>
50    
51    <h1>Sample chat client</h1>
52    <div id="chat"><p>Connecting...</p></div>
53    <form id="form" onSubmit="send(); return false">
54      <input type="text" autocomplete="off" id="text"><input type="submit" value="Send">
55    </form>
56    
57    <style>
58      #chat { height: 300px; overflow: auto; width: 800px; border: 1px solid #eee; font: 13px Helvetica, Arial; }
59      #chat p { padding: 8px; margin: 0; }
60      #chat p:nth-child(odd) { background: #F6F6F6; }
61      #form { width: 782px; background: #333; padding: 5px 10px; display: none; }
62      #form input[type=text] { width: 700px; padding: 5px; background: #fff; border: 1px solid #fff; }
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      #form input[type=submit]:hover { background: #A2A2A2; }
65      #form input[type=submit]:active { position: relative; top: 2px; }
66    </style>
67    
68  </body>
69</html>