chat.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
	<head> 
		<script type="text/javascript" src="strest.js"></script> 
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
		<script type="text/javascript">
	
			function connect() {
				strest = new Strest({
							url : $('#websocket_url').val(),
							onopen : function(event) {
								$('#once_connected').fadeIn();
								$('#disconnect_button').fadeIn();
								$('#connect_button').fadeOut();
							},
							onclose : function(event) {
								$('#connect_button').fadeIn();
								$('#disconnect_button').fadeOut();
								$('#once_connected').fadeOut();
							}
						});
			}

			function disconnect() {
				strest.close();
			}

			var username = ""; //global reference to my username
			function register() {
				strest.sendRequest({
						uri : '/chat/register',
						params : {
							'username' : $('#username').val()
						}
					},
					function(response) {
						$('#once_connected').fadeOut();
						$('#logged_in').fadeIn();
						onRegister();
					}
				);
				username = $('#username').val();
			}
			/* called once the user is registered */
			function onRegister() {
				//register to recieve messages
				strest.sendRequest({uri : '/chat/notify/message'},
						function(response) {
							var res = jQuery.parseJSON(response.content);
							$('#messages').prepend('<div class="message_recieved"><span class="username">' + res.from + '</span><span class="message">' + res.message + '</span></div>');
						}
					);
				//register for disconnect events
				strest.sendRequest({uri : '/chat/notify/disconnect'},
					function(response) {
						$('#' + response.content).remove();
					}
				);
				//register for connect events.
				strest.sendRequest({uri : '/chat/notify/connect'},
						function(response) {
							$('#friends').append('<div class="friend" id="' + response.content + '" onclick="$(\'#send_to\').val(\'' + response.content + '\');">' + response.content + '</div>');
						}
					);
			}

			/**
			 * sends a message from the form
			 */
			function send() {
				strest.sendRequest({
					uri : '/chat/message',
					params : {
						'to' : $('#send_to').val(),
						'message' : $('#send_message').val()
					}
				});
				$('#messages').prepend('<div class="message_sent"><span class="username">' + username + '</span><span class="message">' + $('#send_message').val() + '</span></div>');
				$('#send_message').val("");
				$('#send_to').val("")
				
			}
		</script>
		<style>
			
			#messages, #friends, #message_form {
				height : 400px;
				overflow : auto;
			}
			.message_sent {
				padding : 5px;
				margin : 5px;
				background-color:#eeeeff;
				border:1px dashed black;
			}
			.message_recieved {
				padding : 5px;
				margin : 5px;
				background-color:#eeddff;
				border:1px dashed black;
			}
			.username {
				display : block;
				font-style:italic;
			}
			
			
			
		</style>
	</head>
	<body>
		<b>Chat Example</b><br />
		<input type="text" id="websocket_url" value="ws://localhost:8000/websocket" style="width:300px;"></input>
		
		<button onclick="connect();" id="connect_button">CONNECT</button><br />
		<button onclick="disconnect();" id="disconnect_button" style="display:none;">DISCONNECT</button><br />
		
		<br />

		<div id="once_connected" style="display:none;"> 
			<div id="login">
				USERNAME: <input type="text" id="username"></input> <button onclick="register();">REGISTER</button>
			</div>
		</div>
		
		<div id="logged_in" style="display:none;">
			<table style="width:80%">
				<tr>
					<td>
						FRIENDS: <br />
						<div id="friends">
						</div>
					</td>	
					<td  style="min-width:200px;">
						MESSAGES: <br />
						<div id="messages">
							
						
						</div>
					</td>
					<td>
						SEND A MESSAGE: <br />
						<div id="message_form">
							TO: <input type="text" id="send_to"></input> <br/>
							Message: <br /><textarea rows="5" cols="30" id="send_message">
							</textarea>
							<button onclick="send();">SEND MESSAGE</button>
						</div>
					</td>
					
				</tr>
			
			</table>
		</div>
	</body>
</html>