<!DOCTYPE html>
<html>
  <head>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
	<script src="http://cdn.sockjs.org/sockjs-0.3.4.min.js"></script>
	<script>
    $(function() {
		var conn = null;

		function log(msg) {
			var control = $('#log');
			control.html(control.html() + msg + '<br/>');
			control.scrollTop(control.scrollTop() + 1000);
		}

		function disconnect() {
			if (conn != null) {
				log('Disconnecting...');

				conn.close();
				conn = null;

				updateUi();
			}
		}

		function updateUi() {
			if (conn == null || conn.readyState != SockJS.OPEN) {
				$('#status').text('disconnected');
				$('#connect').text('Connect');
			} else {
				$('#status').text('connected (' + conn.protocol + ')');
				$('#connect').text('Disconnect');
			}
		}

		$('form').submit(function() {
			var text = $('#message').val();
			conn.send(text);
			$('#message').val('').focus();
			return false;
		});

		conn = new SockJS('http://' + window.location.host + '/chat');
		log('Connecting...');

		conn.onopen = function() {
			log('Connected.');
			updateUi();
		};

		conn.onmessage = function(e) {
			log(e.data);
		};

		conn.onclose = function() {
			log('Disconnected.');
			conn = null;
			updateUi();
		};

		$('#message').val('').focus();
    });
	</script>
	<title>Sockjs-go chat</title>
  </head>
  <body>
	<h1>Sockjs-go chat</h1>

	<div>
	  Status: <span id="status">disconnected</span>
	</div>
	<div id="log" style="width: 60em; height: 20em; overflow:auto; border: 1px solid black">
	</div>
	<form id="chatform">
	  <label for="message">Message:</label>
	  <input id="message" type="text" />
	  <input type="submit" value="Send" />
	</form>
  </body>
</html>