index.html

<html>
  <head>
    <title>Node.js WebSocket chat</title>
    <style type="text/css">
      #input {
        width: 200px;
      }
      #messages {
        position: fixed;
        top: 40px;
        bottom: 8px;
        left: 8px;
        right: 8px;
        border: 1px solid #EEEEEE;
        padding: 8px;
      }
    </style>
  </head>
 
  <body>
 
    Your message:
    <input type="text" id="input">
 
    <div id="messages"></div>
 
    <script src="http://localhost:4000/socket.io/socket.io.js"></script>
    <script type="text/javascript">
      var messagesElement = document.getElementById('messages');
      var lastMessageElement = null;
 
      function addMessage(message) {
        var newMessageElement = document.createElement('div');
        var newMessageText = document.createTextNode(message);
 
        newMessageElement.appendChild(newMessageText);
        messagesElement.insertBefore(newMessageElement, 
          lastMessageElement);
        lastMessageElement = newMessageElement;
      }
 
      var socket = io.connect('http://localhost:4000');
      socket.on('serverMessage', function(content) {
        addMessage(content);
      });
 
      socket.on('login', function() {
        var username = prompt('What username would you like to use?');
        socket.emit('login', username);
      });
 
      var inputElement = document.getElementById('input');
 
      inputElement.onkeydown = function(keyboardEvent) {
        if (keyboardEvent.keyCode === 13) {
          socket.emit('clientMessage', inputElement.value);
          inputElement.value = '';
          return false;
        } else {
          return true;
        }
      };
    </script>
 
  </body>
</html>