applideveloper/client.html

## client.html
<!doctype html>
<html lang='ja'>
	<head>
		<meta charset='utf-8' />
		<title>socket.io client test</title>
		<script src="/json.js"></script> <!-- for ie -->
		<script src="/socket.io/socket.io.js"></script>
		<script src='http://www.google.com/jsapi'></script>
		<script>
			google.load('jquery', '1');
		</script>
		<script src="/common.js"></script>
		<link rel="stylesheet" href="/common.css" />
	</head>
	<body>
		<div class='clearfix'>
			<canvas id='canvas' width='500' height='500'></canvas>

			<div id="howto">
				<p>移動：←→</p>
				<p>ジャンプ：↑</p>
				<p>撃つ：↓</p>
				<p>三回撃たれると負けです。</p>
				<br />
				<p>Chrome推奨</p>
				<br />
				<p>だいたい10人以上で遅延します</p>
				<p>時折画像がおかしくなります</p>
				<br />
				<a href='#start' id='start'>開始する</a>
			</div>
		</div>

		<div id="client">
			閲覧者： <span id='clientCount'>0</span>人
			(<span id='clientTwitter'></span>)
		</div>

		<div id="message">
			<div id="users"></div>
			<form id="messageForm">
				<input type="text" size='50' id='messageInput' />
				<input type="submit" value='送信' />
			</form>
			<ul id="messages"></ul>
		</div>
	</body>
</html>

## common.css
.clearfix {
	/zoom : 1;
}
.clearfix:after {
	content: '';
	display: block;
	clear: both;
}

#canvas {
	float: left;
	border: 5px solid #000;
}

#howto {
	width: 250px;
	padding: 0 0 0 20px;
	float: left;
}

#client {
	padding: 10px 0 0 0;
}

#message {
	padding: 10px 0 0 0;
}
	#messages {
		max-height:100px;
		overflow:auto;
	}

## common.js
$(function() {
	// canvas
	var ctx = $('#canvas').get(0).getContext('2d');

	// socket
	var socket = new io.Socket(null, {rememberTransport: false});
	socket.connect();

	// キー操作
	jQuery(document).keydown(function (e) {
		socket.send({
			keyCode: e.keyCode,
			onPress: true
		});
	});
	jQuery(document).keyup(function (e) {
		socket.send({
			keyCode: e.keyCode,
			onPress: false
		});
	});

	// チャット
	var sayMessage = function(message) {
		jQuery('<li />').text(message).prependTo('#messages');
	};
	jQuery('#messageForm').submit(function(e) {
		e.preventDefault();
		socket.send({
			message: jQuery('#messageInput').val()
		});
		jQuery('#messageInput').val('');
	});

	// 参加者更新
	var reloadClient = function(data) {
		$('#clientCount').text(data.length);
		$('#clientTwitter').text(data.twitter);
	};

	// 描画
	var drawObjects = function(objects) {
		ctx.clearRect(0, 0, 500, 500);

		for (var i=0,l=objects.length;i<l;i++) {
			var object = objects[i];

			if (object.twitter) {
				var id = object.twitter;
				var image = images[id];
				if (image === undefined) {
					images[id] = false;

					var img = new Image();
					img.src = 'http://api.dan.co.jp/twicon/'+id+'/normal';
					img.onload = function() {
						images[id] = img;
					};
				} else {
					if (image) {
						ctx.drawImage(image, object.x, object.y, 48, 48);
					} else {
						ctx.fillStyle = 'black';
						ctx.fillRect(object.x, object.y, 48, 48);
						ctx.stroke();
					}
					ctx.fillStyle = 'red';
					ctx.fillRect(object.x, object.y + 48 - 10,
						48 * object.life / 3, 10);
					ctx.stroke();
				}
			} else {
				ctx.fillStyle = object.color || 'black';
				ctx.fillRect(object.x, object.y, object.sizeX, object.sizeY);
				ctx.stroke();
			}
		}
	};

	var images = {};
	socket.on('message', function(data){
		switch (data.type) {
			case 'objects':
				drawObjects(data.object);
				break;
			case 'messages':
				var messages = data.messages;
				for (var i=0,l=messages.length;i<l;i++) {
					sayMessage(messages[i]);
				}
				break;
			case 'message':
				sayMessage(data.message);
				break;
			case 'clients':
				reloadClient(data);
				break;
			case 'killed':
				alert('撃たれて倒されました。');
				$('#start').show();
				break;
		}
	});

	socket.on('connect', function(){
		$('#start').click(function() {
			var twitterID = window.prompt('twitterIDを入れてね');
			if (twitterID) {
				socket.send({
					twitter: twitterID
				});
				$(this).hide();
			}

			return false;
		});
	});
	socket.on('disconnect', function(){
		alert('サーバーとの接続が切れました。更新してください');
	});
});

## json.js
if(!this.JSON){JSON=function(){function f(n){return n<10?'0'+n:n;}
Date.prototype.toJSON=function(){return this.getUTCFullYear()+'-'+
f(this.getUTCMonth()+1)+'-'+
f(this.getUTCDate())+'T'+
f(this.getUTCHours())+':'+
f(this.getUTCMinutes())+':'+
f(this.getUTCSeconds())+'Z';};var m={'\b':'\\b','\t':'\\t','\n':'\\n','\f':'\\f','\r':'\\r','"':'\\"','\\':'\\\\'};function stringify(value,whitelist){var a,i,k,l,r=/["\\\x00-\x1f\x7f-\x9f]/g,v;switch(typeof value){case'string':return r.test(value)?'"'+value.replace(r,function(a){var c=m[a];if(c){return c;}
c=a.charCodeAt();return'\\u00'+Math.floor(c/16).toString(16)+
(c%16).toString(16);})+'"':'"'+value+'"';case'number':return isFinite(value)?String(value):'null';case'boolean':case'null':return String(value);case'object':if(!value){return'null';}
if(typeof value.toJSON==='function'){return stringify(value.toJSON());}
a=[];if(typeof value.length==='number'&&!(value.propertyIsEnumerable('length'))){l=value.length;for(i=0;i<l;i+=1){a.push(stringify(value[i],whitelist)||'null');}
return'['+a.join(',')+']';}
if(whitelist){l=whitelist.length;for(i=0;i<l;i+=1){k=whitelist[i];if(typeof k==='string'){v=stringify(value[k],whitelist);if(v){a.push(stringify(k)+':'+v);}}}}else{for(k in value){if(typeof k==='string'){v=stringify(value[k],whitelist);if(v){a.push(stringify(k)+':'+v);}}}}
return'{'+a.join(',')+'}';}}
return{stringify:stringify,parse:function(text,filter){var j;function walk(k,v){var i,n;if(v&&typeof v==='object'){for(i in v){if(Object.prototype.hasOwnProperty.apply(v,[i])){n=walk(i,v[i]);if(n!==undefined){v[i]=n;}}}}
return filter(k,v);}
if(/^[\],:{}\s]*$/.test(text.replace(/\\./g,'@').replace(/"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g,']').replace(/(?:^|:|,)(?:\s*\[)+/g,''))){j=eval('('+text+')');return typeof filter==='function'?walk('',j):j;}
throw new SyntaxError('parseJSON');}};}();}
	<!doctype html>
	<html lang='ja'>
	<head>
	<meta charset='utf-8' />
	<title>socket.io client test</title>
	<script src="/json.js"></script> <!-- for ie -->
	<script src="/socket.io/socket.io.js"></script>
	<script src='http://www.google.com/jsapi'></script>
	<script>
	google.load('jquery', '1');
	</script>
	<script src="/common.js"></script>
	<link rel="stylesheet" href="/common.css" />
	</head>
	<body>
	<div class='clearfix'>
	<canvas id='canvas' width='500' height='500'></canvas>

	<div id="howto">
	<p>移動：←→</p>
	<p>ジャンプ：↑</p>
	<p>撃つ：↓</p>
	<p>三回撃たれると負けです。</p>
	<br />
	<p>Chrome推奨</p>
	<br />
	<p>だいたい10人以上で遅延します</p>
	<p>時折画像がおかしくなります</p>
	<br />
	<a href='#start' id='start'>開始する</a>
	</div>
	</div>

	<div id="client">
	閲覧者： <span id='clientCount'>0</span>人
	(<span id='clientTwitter'></span>)
	</div>

	<div id="message">
	<div id="users"></div>
	<form id="messageForm">
	<input type="text" size='50' id='messageInput' />
	<input type="submit" value='送信' />
	</form>
	<ul id="messages"></ul>
	</div>
	</body>
	</html>
	.clearfix {
	/zoom : 1;
	}
	.clearfix:after {
	content: '';
	display: block;
	clear: both;
	}

	#canvas {
	float: left;
	border: 5px solid #000;
	}

	#howto {
	width: 250px;
	padding: 0 0 0 20px;
	float: left;
	}

	#client {
	padding: 10px 0 0 0;
	}

	#message {
	padding: 10px 0 0 0;
	}
	#messages {
	max-height:100px;
	overflow:auto;
	}
	$(function() {
	// canvas
	var ctx = $('#canvas').get(0).getContext('2d');

	// socket
	var socket = new io.Socket(null, {rememberTransport: false});
	socket.connect();

	// キー操作
	jQuery(document).keydown(function (e) {
	socket.send({
	keyCode: e.keyCode,
	onPress: true
	});
	});
	jQuery(document).keyup(function (e) {
	socket.send({
	keyCode: e.keyCode,
	onPress: false
	});
	});

	// チャット
	var sayMessage = function(message) {
	jQuery('<li />').text(message).prependTo('#messages');
	};
	jQuery('#messageForm').submit(function(e) {
	e.preventDefault();
	socket.send({
	message: jQuery('#messageInput').val()
	});
	jQuery('#messageInput').val('');
	});

	// 参加者更新
	var reloadClient = function(data) {
	$('#clientCount').text(data.length);
	$('#clientTwitter').text(data.twitter);
	};

	// 描画
	var drawObjects = function(objects) {
	ctx.clearRect(0, 0, 500, 500);

	for (var i=0,l=objects.length;i<l;i++) {
	var object = objects[i];

	if (object.twitter) {
	var id = object.twitter;
	var image = images[id];
	if (image === undefined) {
	images[id] = false;

	var img = new Image();
	img.src = 'http://api.dan.co.jp/twicon/'+id+'/normal';
	img.onload = function() {
	images[id] = img;
	};
	} else {
	if (image) {
	ctx.drawImage(image, object.x, object.y, 48, 48);
	} else {
	ctx.fillStyle = 'black';
	ctx.fillRect(object.x, object.y, 48, 48);
	ctx.stroke();
	}
	ctx.fillStyle = 'red';
	ctx.fillRect(object.x, object.y + 48 - 10,
	48 * object.life / 3, 10);
	ctx.stroke();
	}
	} else {
	ctx.fillStyle = object.color \|\| 'black';
	ctx.fillRect(object.x, object.y, object.sizeX, object.sizeY);
	ctx.stroke();
	}
	}
	};

	var images = {};
	socket.on('message', function(data){
	switch (data.type) {
	case 'objects':
	drawObjects(data.object);
	break;
	case 'messages':
	var messages = data.messages;
	for (var i=0,l=messages.length;i<l;i++) {
	sayMessage(messages[i]);
	}
	break;
	case 'message':
	sayMessage(data.message);
	break;
	case 'clients':
	reloadClient(data);
	break;
	case 'killed':
	alert('撃たれて倒されました。');
	$('#start').show();
	break;
	}
	});

	socket.on('connect', function(){
	$('#start').click(function() {
	var twitterID = window.prompt('twitterIDを入れてね');
	if (twitterID) {
	socket.send({
	twitter: twitterID
	});
	$(this).hide();
	}

	return false;
	});
	});
	socket.on('disconnect', function(){
	alert('サーバーとの接続が切れました。更新してください');
	});
	});
	if(!this.JSON){JSON=function(){function f(n){return n<10?'0'+n:n;}
	Date.prototype.toJSON=function(){return this.getUTCFullYear()+'-'+
	f(this.getUTCMonth()+1)+'-'+
	f(this.getUTCDate())+'T'+
	f(this.getUTCHours())+':'+
	f(this.getUTCMinutes())+':'+
	f(this.getUTCSeconds())+'Z';};var m={'\b':'\\b','\t':'\\t','\n':'\\n','\f':'\\f','\r':'\\r','"':'\\"','\\':'\\\\'};function stringify(value,whitelist){var a,i,k,l,r=/["\\\x00-\x1f\x7f-\x9f]/g,v;switch(typeof value){case'string':return r.test(value)?'"'+value.replace(r,function(a){var c=m[a];if(c){return c;}
	c=a.charCodeAt();return'\\u00'+Math.floor(c/16).toString(16)+
	(c%16).toString(16);})+'"':'"'+value+'"';case'number':return isFinite(value)?String(value):'null';case'boolean':case'null':return String(value);case'object':if(!value){return'null';}
	if(typeof value.toJSON==='function'){return stringify(value.toJSON());}
	a=[];if(typeof value.length==='number'&&!(value.propertyIsEnumerable('length'))){l=value.length;for(i=0;i<l;i+=1){a.push(stringify(value[i],whitelist)\|\|'null');}
	return'['+a.join(',')+']';}
	if(whitelist){l=whitelist.length;for(i=0;i<l;i+=1){k=whitelist[i];if(typeof k==='string'){v=stringify(value[k],whitelist);if(v){a.push(stringify(k)+':'+v);}}}}else{for(k in value){if(typeof k==='string'){v=stringify(value[k],whitelist);if(v){a.push(stringify(k)+':'+v);}}}}
	return'{'+a.join(',')+'}';}}
	return{stringify:stringify,parse:function(text,filter){var j;function walk(k,v){var i,n;if(v&&typeof v==='object'){for(i in v){if(Object.prototype.hasOwnProperty.apply(v,[i])){n=walk(i,v[i]);if(n!==undefined){v[i]=n;}}}}
	return filter(k,v);}
	if(/^[\],:{}\s]$/.test(text.replace(/\\./g,'@').replace(/"[^"\\\n\r]"\|true\|false\|null\|-?\d+(?:\.\d)?(?:[eE][+\-]?\d+)?/g,']').replace(/(?:^\|:\|,)(?:\s\[)+/g,''))){j=eval('('+text+')');return typeof filter==='function'?walk('',j):j;}
	throw new SyntaxError('parseJSON');}};}();}