index.html (1636B)
1 <!doctype html> 2 <html> 3 <head> 4 <title>NodeChat</title> 5 <style> 6 * { margin: 0; padding: 0; box-sizing: border-box; } 7 body { font: 13px Helvetica, Arial; } 8 form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; } 9 form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; } 10 form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; } 11 #messages { list-style-type: none; margin: 0; padding: 0; } 12 #messages li { padding: 5px 10px; } 13 #messages li:nth-child(odd) { background: #eee; } 14 #messages { margin-bottom: 40px } 15 </style> 16 </head> 17 <body> 18 <ul id="messages"></ul> 19 <form action=""> 20 <input id="m" autocomplete="off" /><button>Send</button> 21 </form> 22 <script src="https://cdn.socket.io/socket.io-1.2.0.js"></script> 23 <script src="https://code.jquery.com/jquery-1.11.1.js"></script> 24 <script> 25 $(function () { 26 var socket = io(); 27 $('form').submit(function(){ 28 socket.emit('chat message', $('#m').val()); 29 $('#m').val(''); 30 return false; 31 }); 32 socket.on('chat message', function(msg){ 33 $('#messages').append($('<li>').text(msg)); 34 window.scrollTo(0, document.body.scrollHeight); 35 }); 36 // append text if someone is online 37 socket.on('is_online', function(username) { 38 $('#messages').append($('<li>').html(username)); 39 }); 40 var username = prompt('Please tell me your name'); 41 socket.emit('username', username); 42 }); 43 44 </script> 45 </body> 46 </html>