index.html

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-json/2.6.0/jquery.json.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/datejs/1.0/date.min.js'></script>
<script src="/socket.io/socket.io.js"></script>
<script>
$(document).ready(function(){

	// show join box
	$('#ask').show();
	$('#ask input').focus();

	// join on enter
	$('#ask input').keydown(function(event) {
		if (event.keyCode == 13) {
			$('#ask a').click();
		}
	})

	// join on click
	$('#ask a').click(function() {
		join($('#ask input').val());
		$('#ask').hide();
		$('#channel').show();
		$('input#message').focus();
	});

	function join(name) {
		var host = window.location.host.split(':')[0];
    var socket = io();
		
		// send join message
		socket.emit('join', $.toJSON({ user: name }));
		
		var container = $('div#msgs');
		
		// handler for callback
		socket.on('chat', function (msg) {
			var message = $.evalJSON(msg);
			
			var action = message.action;
			var struct = container.find('li.' + action + ':first');
			
			if (struct.length < 1) {
				console.log("Could not handle: " + message);
				return;
			}
			
			// get a new message view from struct template
			var messageView = struct.clone();
			
			// set time
			messageView.find('.time').text((new Date()).toString("HH:mm:ss"));
			
			switch (action) {
				case 'message': var matches;
								// someone starts chat with /me ... 
								if (matches = message.msg.match(/^\s*[\/\\]me\s(.*)/)) {
									messageView.find('.user').text(message.user + ' ' + matches[1]);
									messageView.find('.user').css('font-weight', 'bold');
								// normal chat message								
								} else {
									messageView.find('.user').text(message.user);
									messageView.find('.message').text(': ' + message.msg);									
								}
								break;
				case 'control': messageView.find('.user').text(message.user);
								messageView.find('.message').text(message.msg);
								messageView.addClass('control');
								break;
			}
			
			// color own user:
			if (message.user == name) messageView.find('.user').addClass('self');
			
			// append to container and scroll
			container.find('ul').append(messageView.show());
			container.scrollTop(container.find('ul').innerHeight());
		});

    // new message is send in the input box
    $('#channel form').submit(function(event) {
      event.preventDefault();
      var input = $(this).find(':input');
      var msg = input.val();
      socket.emit('chat', $.toJSON({action: 'message', user: name, msg: msg}));
      input.val('');
    }); 

	}
});
</script>
<style type="text/css" media="screen">
  * {
    font-family: Georgia;
  }
  a {
    color: #000;
    text-decoration: none;
  }
  a:hover {
    text-decoration: underline;
  }
  div.bordered {
    margin: 0 auto;
    margin-top: 100px;
    width: 600px;
    padding: 20px;
    text-align: center;
    border: 10px solid #ddd;
    -webkit-border-radius: 20px;
  }
  #error {
    background-color: #BA0000;
    color: #fff;
    font-weight: bold;
  }
  #ask {
    font-size: 20pt;
  }
  #ask input {
    font-size: 20pt;
    padding: 10px;
    margin: 0 10px;
  }
  #ask span.join {
    padding: 10px;
    background-color: #ddd;
    -webkit-border-radius: 10px;
  }
  #channel {
    margin-top: 100px;
    height: 480
    px;
    position: relative;
  }
  #channel div#descr {
    position: absolute;
    left: -10px;
    top: -190px;
    font-size: 13px;
    text-align: left;
    line-height: 20px;
    padding: 5px;
    width: 630px;
  }
  div#msgs {
    overflow-y: scroll;
    height: 400px;
  }
  div#msgs ul {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
  }
  div#msgs li {
    line-height: 20px;
  }
  div#msgs li span.user {
    color: #ff9900;
  }
  div#msgs li span.user.self {
    color: #aa2211;
  }
  div#msgs li span.time {
    float: right;
    margin-right: 5px;
    color: #aaa;
    font-family: "Courier New";
    font-size: 12px;
  }
  div#msgs li.control {
    text-align: center;
  }
  div#msgs li.control span.message {
    color: #aaa;
  }
  div#input {
    text-align: left;
    margin-top: 20px;
  }
  div#input #message {
    width: 600px;
    border: 5px solid #bbb;
    -webkit-border-radius: 3px;
    font-size: 30pt;
  }
</style>
</head>
<body>
  <div id="ask" class="bordered" style="display: none;">
    Name: <input type="text" id="name" /> <a href="#"><span class="join">Join!</span></a>
  </div>
  <div id="channel" class="bordered" style="display: none;">
    <div id="descr" class="bordered">
      <strong>Note:</strong> your messages make a round-trip up and down the stack (including Redis)
      before being displayed here.<br/>
      <strong>Tip:</strong> open up another browser window
      to see how quickly your messages are distributed.
    </div>
    <div id="msgs">
      <ul>
        <li class="message" style="display: none">
          <span class="user"></span><span class="message"></span>
          <span class="time"></span>
        </li>
        <li class="control" style="display: none">
          <span class="user"></span>&nbsp;<span class="message"></span>
          <span class="time"></span>
        </li>
      </ul>
    </div>
    <div id="input">
      <form><input type="text" id="message" /></form>
    </div>
  </div>
</body>
</html>