flowersinthesand/test.html

## test.html
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=medium-dpi" />
		<title>jQuery Socket Chat</title>
		<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
		<script type="text/javascript" src="jquery.socket-1.0a1.js"></script>
		<script type="text/javascript">
		$(function() {
			var content = $("#content")[0],
				chat = {username: null, lastUsername: null};

			$("#editor input").keyup(function(event) {
				var self = this;

				if (event.which === 13 && $.trim(self.value)) {
					if (!chat.username) {
						chat.username = self.value;
						$("#editor p").addClass("user").removeClass("guide").text(chat.username);

						$.socket("chat" + "?" + $.param({username: chat.username}), {transports: "longpoll"})
						.open(function() {
							$(self).removeAttr("disabled");
						})
						.message(function(data) {
							if (chat.lastUsername !== data.username) {
								chat.lastUsername = data.username;
								$('<p class="user"/>').text(data.username).appendTo(content);
							}

							if (/^test\d+/.test(data.message)) {
								var number = data.message.substring(4);
								$('<span class="message"/>').text(number).appendTo(content)
								.css({
									display: "inline-block",
									margin: "1px",
									padding: "1px",
									background: number % 2 ? "#444" : "#bbb",
									color: number % 2 ? "#bbb" : "#444"
								});
							} else {
								$('<p class="message"/>').text(data.message).appendTo(content);
							}
							content.scrollTop = content.scrollHeight;
						})
						.close(function() {
							$(self).attr("disabled", "disabled");
						})
						.on("entrance", function(username) {
							$('<p class="message notice"/>').text(username + " is logged in").appendTo(content);
							content.scrollTop = content.scrollHeight;
						})
						.on("exit", function(username) {
							$('<p class="message notice"/>').text(username + " is logged out").appendTo(content);
							content.scrollTop = content.scrollHeight;
						});
					} else {
						$.socket().send({username: chat.username, message: self.value});
					}

					if (self.value === "test") {
						for (var i = 0; i < 100; i++) {
							i = i < 10 ? "0" + i : i;
							$.socket().send({username: chat.username, message: "test" + i});
						}
					}

					self.value = "";
				}
			})
			.focus();

			$(window).resize(function() {
				$(content).height($(window).height() - $("#editor").outerHeight(true) - 15).scrollTop(content.scrollHeight);
			})
			.resize();
		});
		</script>
		<style>
		body {padding: 0; margin: 0; font-family: 'Trebuchet MS','Malgun Gothic',Verdana,Helvetica,Arial,sans-serif; font-size: 62.5%; color: #333333}
		#content {height: 100%; overflow-y: auto; padding: 14px 15px 0 25px;}
		#content p {margin: 0; padding: 0;}
		#content .user {font-size: 1.5em; color: #3e3e3e; font-weight: bold; letter-spacing: -1px; margin-top: 0.5em;}
		#content .message {font-size: 1.3em; color: #444444; line-height: 1.7em; word-wrap: break-word;}
		#content .notice {font-size: 1.3em; color: #999;}
		#editor {margin: 0 25px 15px 25px;}
		#editor p {font-size: 1.5em; display: inline-block; margin: 1em;}
		#editor .guide {color: #999;}
		#editor .user {font-weight: bold;}
		#editor form {position: relative;}
		#editor input {font-family: 'Trebuchet MS','Malgun Gothic'; width: 100%; height: 28px; line-height: 28px; border: medium none; border-color: #E5E5E5 #DBDBDB #D2D2D2; border-style: solid; border-width: 1px;}
		</style>
	</head>
	<body>
		<div id="content">
			<p class="user"><span>Donghwan Kim</span></p>
			<p class="message">Welcome to jQuery Socket!</p>
		</div>
		<div id="editor">
			<p class="guide">Enter your username and type 'test'</p>
			<form action="#" onsubmit="return false;">
				<input type="text" />
			</form>
		</div>
	</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=medium-dpi" />
	<title>jQuery Socket Chat</title>
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
	<script type="text/javascript" src="jquery.socket-1.0a1.js"></script>
	<script type="text/javascript">
	$(function() {
	var content = $("#content")[0],
	chat = {username: null, lastUsername: null};

	$("#editor input").keyup(function(event) {
	var self = this;

	if (event.which === 13 && $.trim(self.value)) {
	if (!chat.username) {
	chat.username = self.value;
	$("#editor p").addClass("user").removeClass("guide").text(chat.username);

	$.socket("chat" + "?" + $.param({username: chat.username}), {transports: "longpoll"})
	.open(function() {
	$(self).removeAttr("disabled");
	})
	.message(function(data) {
	if (chat.lastUsername !== data.username) {
	chat.lastUsername = data.username;
	$('<p class="user"/>').text(data.username).appendTo(content);
	}

	if (/^test\d+/.test(data.message)) {
	var number = data.message.substring(4);
	$('<span class="message"/>').text(number).appendTo(content)
	.css({
	display: "inline-block",
	margin: "1px",
	padding: "1px",
	background: number % 2 ? "#444" : "#bbb",
	color: number % 2 ? "#bbb" : "#444"
	});
	} else {
	$('<p class="message"/>').text(data.message).appendTo(content);
	}
	content.scrollTop = content.scrollHeight;
	})
	.close(function() {
	$(self).attr("disabled", "disabled");
	})
	.on("entrance", function(username) {
	$('<p class="message notice"/>').text(username + " is logged in").appendTo(content);
	content.scrollTop = content.scrollHeight;
	})
	.on("exit", function(username) {
	$('<p class="message notice"/>').text(username + " is logged out").appendTo(content);
	content.scrollTop = content.scrollHeight;
	});
	} else {
	$.socket().send({username: chat.username, message: self.value});
	}

	if (self.value === "test") {
	for (var i = 0; i < 100; i++) {
	i = i < 10 ? "0" + i : i;
	$.socket().send({username: chat.username, message: "test" + i});
	}
	}

	self.value = "";
	}
	})
	.focus();

	$(window).resize(function() {
	$(content).height($(window).height() - $("#editor").outerHeight(true) - 15).scrollTop(content.scrollHeight);
	})
	.resize();
	});
	</script>
	<style>
	body {padding: 0; margin: 0; font-family: 'Trebuchet MS','Malgun Gothic',Verdana,Helvetica,Arial,sans-serif; font-size: 62.5%; color: #333333}
	#content {height: 100%; overflow-y: auto; padding: 14px 15px 0 25px;}
	#content p {margin: 0; padding: 0;}
	#content .user {font-size: 1.5em; color: #3e3e3e; font-weight: bold; letter-spacing: -1px; margin-top: 0.5em;}
	#content .message {font-size: 1.3em; color: #444444; line-height: 1.7em; word-wrap: break-word;}
	#content .notice {font-size: 1.3em; color: #999;}
	#editor {margin: 0 25px 15px 25px;}
	#editor p {font-size: 1.5em; display: inline-block; margin: 1em;}
	#editor .guide {color: #999;}
	#editor .user {font-weight: bold;}
	#editor form {position: relative;}
	#editor input {font-family: 'Trebuchet MS','Malgun Gothic'; width: 100%; height: 28px; line-height: 28px; border: medium none; border-color: #E5E5E5 #DBDBDB #D2D2D2; border-style: solid; border-width: 1px;}
	</style>
	</head>
	<body>
	<div id="content">
	<p class="user"><span>Donghwan Kim</span></p>
	<p class="message">Welcome to jQuery Socket!</p>
	</div>
	<div id="editor">
	<p class="guide">Enter your username and type 'test'</p>
	<form action="#" onsubmit="return false;">
	<input type="text" />
	</form>
	</div>
	</body>
	</html>