stevenchan
1/22/2010 - 8:43 AM

gistfile1.htm

<html>
	<head>
		<script type="text/javascript" src="jquery.js"></script>
		<script type="text/javascript" src="form.js"></script>
		<script type="text/javascript">
		function receiveMessage(event){
			if(event.origin !== "http://127.0.0.1:8000"){ return; }
			if(event.data === "connected"){ return; }
			if(event.data === "disconnected"){ return; }

			$("#msg_textarea").get(0).value += event.data + "\n";
			//scroll to the bottom
			$("#msg_textarea").scrollTop(999999);
		}
		$(document).ready(function(){
			window.addEventListener("message", receiveMessage, false);
			
			$("#msg_form").ajaxForm(function(){
				//clear the message input field after sending a message
				$("#msg_form input[name='message']").attr("value", "");
				//focus to the message input field again
				$("#msg_form input[name='message']").focus();
			});
		});
		</script>
		<title>Chatroom</title>
	</head>
	<body>
		<textarea id="msg_textarea" 
		          rows="10"
		          cols="10" 
		          readonly="readyonly" 
		          style="width:500px;height:400px;"></textarea>
		<form id="msg_form" method="post" action="send.php">
			<input type="text" name="message" style="width:500px"/>
		</form>
		<iframe style="position:absolute;top:-500px;left:-500px;" src="http://127.0.0.1:8000/iframe?channel=chat"></iframe>
	</body>
</html>