<html>
<head>
<title>SimpleWebSocketServer</title>
<style type="text/css">@import url('styles.css');</style>
<script src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">

$(document).ready(main);

// Run when document.ready fires
function main() {

	// Reference to the websocket object
	var ws;
	
	// Make sure sockets are supported
	testSocket();

	// Event handlers for buttons
	$('#btnStart').click(function() {
		startSocket();
	});

	$('#btnStop').click(function() {
		stopSocket();
	});
	
	$('#btnClear').click(function() {
		$('#results').html('');
	});	
	
}

// Make sure the browser supports sockets
function testSocket()
{
	if ("WebSocket" in window) 
	{
		$('#status').hide();
		$('#btnStart').removeAttr("disabled");
		//$('#status').css({'background-color': 'green'}).html('Websockets are supported');
	}
	else
	{
		$('#status').show();
		$('#status').css({'background-color': 'red'}).html('Websockets NOT supported');		
		$('#btnStart').attr("disabled","disabled");
	}
}

// Close the websocket
function stopSocket() 
{
	ws.close();
}

// Create the websocket
function startSocket() 
{
	if ("WebSocket" in window)
	{
		ws = new WebSocket("%%WEBSOCKET_URL%%");
		
		// Called when the websocket is opened
		ws.onopen = function()
		{
			// Web Socket is connected
			$('#status').css({'background-color': 'green'}).html('Websocket opened');	
			
			// Clear the results window
			$('#results').html('');
		
			// Disable Start Button
			$('#btnStart').attr("disabled","disabled");
			
			// Enable Stop Button
			$('#btnStop').removeAttr("disabled");

			// You can send data now
			//ws.send("Hey man, you got the time?");
		};

		// Called when the websocket receives data
		ws.onmessage = function(evt) 
		{ 
		    $('#results').append(evt.data + '<br/>');  
		};
	
		// Called when the websocket is closed
		ws.onclose = function() { 
			$('#status').css({'background-color': 'orange'}).html('Websocket closed');			
			$('#btnStart').removeAttr("disabled");
			$('#btnStop').attr("disabled", "disabled");
		};
	}
	else
	{
		alert("Browser doesn't support WebSockets!");
	}
}

</script>

<style type="text/css">

body {
	margin: 0px;
}

#status {
	height: 20px;
	width: 100%;
	color: #fff;
	background-color: orange;
	font-weight: bold;
	padding: 5px;
	text-align: center;
}

#container {
	padding: 20px;
}

</style>

</head>

<body bgcolor="#FFFFFF">

<div id="status">Testing Websocket</div>

<h1>Live Logging</h1>

<div id="container">

<input type="button" id="btnStart" value="Start Listening" disabled="disabled">
<input type="button" id="btnStop" value="Stop Listening" disabled="disabled">
<input type="button" id="btnClear" value="Clear Results">

<p><strong>Received Messages:</strong></p>
<div id="results"></div>

</div>

</body>
</html>