<!DOCTYPE html>
<meta charset="utf-8" />
<title>WebSocket Test</title>
<style type="text/css">
	body {
		font-size: 16pt;
	}
	#screen {
		background-color: #fda;
		position: absolute;
		top: 0px;
		left: 0px;
		width: 1280px;
		height: 800px;
		opacity: 0.5;
	}
	.user {
		border: 3px solid #0af;
		text-align: right;
		position: absolute;
		opacity: 0.5;
	}
	.user .name {
		padding: 4px;
		background-color: #0af;
	}
</style>
<script language="javascript" type="text/javascript">
	var websocket;
	var the_screen;

	function init() {
		the_screen = document.getElementById("screen");
		testWebSocket();
	}
	function testWebSocket() {
		websocket = new WebSocket("ws://127.0.0.1:7681", "observer");
		websocket.onopen = function (evt) { onOpen(evt) };
		websocket.onclose = function (evt) { onClose(evt) };
		websocket.onmessage = function (evt) { onMessage(evt) };
		websocket.onerror = function (evt) { onError(evt) };
	}
	function onOpen(evt) {
		document.getElementById("status").innerHTML = "CONNECTED";
		// needs to be non-empty
		websocket.send("a");
	}
	function onMessage(evt) {
		var people = JSON.parse(evt.data);

		the_screen.innerHTML = '';
		for (var i = people.length - 1; i >= 0; i--) {
			var name = document.createElement('span')
			name.className = "name";
			name.innerText = people[i].name;

			var user = document.createElement('div');
			user.className = 'user';
			user.appendChild(name);
			user.style.width = people[i].width + "px";
			user.style.height = people[i].height + "px";

			the_screen.appendChild(user);
		};

		setTimeout(function(){
			websocket.send("a");
		}, 500);
	}
	function onError(evt) {
		document.getElementById("status").innerHTML = 'ERROR: ' + evt.data;
	}
	function onClose(evt) {
		document.getElementById("status").innerHTML = "DISCONNECTED";
	}

	window.addEventListener("load", init, false);
</script>

<p>Response of server: <span id="people"></span>
<p>Status: <span id="status">unknown</span>

<div id="screen">
</div>

</html>