zeekay/gist:1221762

## gistfile1.html
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">

  <title>Chat</title>

  <link rel="stylesheet" href="/static/style.css">

  <script type="text/javascript" src="/static/web-socket-js/swfobject.js"></script>
  <script type="text/javascript" src="/static/web-socket-js/web_socket.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

  <script type="text/javascript">

    WEB_SOCKET_SWF_LOCATION = "/static/web-socket-js/WebSocketMain.swf";
    nickname = 'user';

    function time() {
      var d = new Date();
      var hours = d.getHours();
      var minutes = d.getMinutes();
      if (hours < 10) hours = '0' + hours;
      if (minutes < 10) minutes = '0' + minutes;
      return hours + ":" + minutes + ' ';
    }

    function message (user, text) {
      $('#lines').append($('<p>').append(time() + '<b>' + user + '</b>' + text));
      $('#lines').get(0).scrollTop = 10000000;
    }

    function status (text) {
      $('#lines').append($('<p>').append(time() + text));
      $('#lines').get(0).scrollTop = 10000000;
    }

    function ws_init (channel, nickname) {
        window.nickname = nickname;
        var url = 'ws://127.0.0.1:8080/chat/' + channel + '/' + nickname;
        ws = new WebSocket(url);

        ws.onopen = function() {
          $('#connecting').hide();
          status("connection established");
          $('input#message').val('').focus();
        }
        ws.onmessage = function(e) {
          var data = JSON.parse(e.data);
          switch(data.type) {
            case "msg":
              message(data.user, data.text)
              break
            case "status":
              status(data.text)
              break
            case "buffer":
              $.each(data.messages, function (i, v) {
                messaage(v.user, v.text)
              });
              break
            case "join":
              status(data.user + ' has joined the channel')
              break
            case "part":
              status(data.user + ' has left the channel')
              break
            case "error":
              status(data.error)
              break
          }
        }
        ws.onclose = function() {
          status("connection closed.");
        }
    }

    function ws_send(msg) {
        message(nickname, msg);
        ws.send(msg);
    }

    function ws_close() {
        message("closing connection..");
        ws.close();
    }


  // dom manipulation
  $(document).ready(function() {
    $('#nickname').focus();

    $('#join').submit(function (ev) {
      $('#join-chat').hide();
      ws_init('smth', $('#nickname').val());
      return false;
    });

    $('#send-message').submit(function () {
      ws_send($('#message').val());
      $('input#message').val('').focus();
      $('#lines').get(0).scrollTop = 10000000;
      return false;
    });

  });
  </script>

</head>

<body>

    <div id="chat">

      <div id="join-chat">
        <form id="join" class="wrap">
            <p>Nickname: <input name="nickname" id="nickname"></p>
        </form>
      </div>

      <div id="connecting">
        <div class="wrap">Connecting to chat</div>
      </div>

      <div id="messages">
        <div id="nicknames"></div>
        <div id="lines"></div>
      </div>
      <form id="send-message"><input id="message"><button>Send</button></form>
    </div>

</body>
</html>
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="utf-8">

	<title>Chat</title>

	<link rel="stylesheet" href="/static/style.css">

	<script type="text/javascript" src="/static/web-socket-js/swfobject.js"></script>
	<script type="text/javascript" src="/static/web-socket-js/web_socket.js"></script>
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

	<script type="text/javascript">

	WEB_SOCKET_SWF_LOCATION = "/static/web-socket-js/WebSocketMain.swf";
	nickname = 'user';

	function time() {
	var d = new Date();
	var hours = d.getHours();
	var minutes = d.getMinutes();
	if (hours < 10) hours = '0' + hours;
	if (minutes < 10) minutes = '0' + minutes;
	return hours + ":" + minutes + ' ';
	}

	function message (user, text) {
	$('#lines').append($('<p>').append(time() + '<b>' + user + '</b>' + text));
	$('#lines').get(0).scrollTop = 10000000;
	}

	function status (text) {
	$('#lines').append($('<p>').append(time() + text));
	$('#lines').get(0).scrollTop = 10000000;
	}

	function ws_init (channel, nickname) {
	window.nickname = nickname;
	var url = 'ws://127.0.0.1:8080/chat/' + channel + '/' + nickname;
	ws = new WebSocket(url);

	ws.onopen = function() {
	$('#connecting').hide();
	status("connection established");
	$('input#message').val('').focus();
	}
	ws.onmessage = function(e) {
	var data = JSON.parse(e.data);
	switch(data.type) {
	case "msg":
	message(data.user, data.text)
	break
	case "status":
	status(data.text)
	break
	case "buffer":
	$.each(data.messages, function (i, v) {
	messaage(v.user, v.text)
	});
	break
	case "join":
	status(data.user + ' has joined the channel')
	break
	case "part":
	status(data.user + ' has left the channel')
	break
	case "error":
	status(data.error)
	break
	}
	}
	ws.onclose = function() {
	status("connection closed.");
	}
	}

	function ws_send(msg) {
	message(nickname, msg);
	ws.send(msg);
	}

	function ws_close() {
	message("closing connection..");
	ws.close();
	}


	// dom manipulation
	$(document).ready(function() {
	$('#nickname').focus();

	$('#join').submit(function (ev) {
	$('#join-chat').hide();
	ws_init('smth', $('#nickname').val());
	return false;
	});

	$('#send-message').submit(function () {
	ws_send($('#message').val());
	$('input#message').val('').focus();
	$('#lines').get(0).scrollTop = 10000000;
	return false;
	});

	});
	</script>

	</head>

	<body>

	<div id="chat">

	<div id="join-chat">
	<form id="join" class="wrap">
	<p>Nickname: <input name="nickname" id="nickname"></p>
	</form>
	</div>

	<div id="connecting">
	<div class="wrap">Connecting to chat</div>
	</div>

	<div id="messages">
	<div id="nicknames"></div>
	<div id="lines"></div>
	</div>
	<form id="send-message"><input id="message"><button>Send</button></form>
	</div>

	</body>
	</html>