title: Node.js & Socket.io Adding Username
body: <p>I'm new to socket.io I would like to know how do i add username in this simple chat using socket.io. Thanks in advance guys. I would like to learn socket programming.</p>
  
  <p>The code below is my server.js</p>
  
  <pre><code>//chat service
  io.sockets.on('connection', function (socket) {
      socket.on('sendMessage', function (data) {
      socket.broadcast.emit('message', data);
      socket.emit('message', { text: data.text });   
      });   
  });
  </code></pre>
  
  <p>This is my chat client index.html</p>
  
  <pre><code>&lt;!-- index.html --&gt;
  &lt;html&gt; 
    &lt;body&gt;
      &lt;script src="/socket.io/socket.io.js"&gt;&lt;/script&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script&gt;
        $(document).ready(function () {
          var socket = io.connect('http://localhost');
          socket.on('message', function (data) {
  
            $('#chat').append( '&lt;b&gt;' + data.text + '&lt;/b&gt;' + '&lt;br /&gt;');
  
          });
              $('#send').click(function () {
              socket.emit('sendMessage', { text: $('#text').val() });
              $('#text').val('');
          });
  
              $('#text').keypress(function(event) {
                if(event.keyCode == 13) {
                  $('#send').click();
                  $('#text').val('');
                }
              });
  
        });
      &lt;/script&gt;
  
      &lt;div id="chat" style="width: 500px; height: 300px; border: 1px solid black"&gt;
  
      &lt;/div&gt;    
  
      &lt;input type="text" name="text" id="text"&gt;
      &lt;input type="button" name="send" id="send" value="send"&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>