mactkg/index.html

## index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
      <meta charset="utf-8" />
      <title>mind-catch</title>
			<script type="text/javascript" src="./jquery-1.7.min.js"></script>
  <script type="text/javascript">
	var canvas;
	var context;
	var socket;
	var sid;
	var drawing;
	var old_x = 0;
	var old_y = 0;

  function init(room, user_name){
  	socket = new WebSocket("ws://glasssaga.dip.jp:6743/?room="+room+"&user="+user_name);
		socket.onerror = function(){
			alert("エラーが発生しました");
		}
		socket.onmessage = function(evt){
			switch(evt.data){
			case "used_name": // ユーザ名が重複していた場合
				alert("このユーザ名は既に使われています。");
				return;
			case "image_req": // 画像データのリクエストを受けたら送信
				socket.send(JSON.stringify({
          "image_data" : canvas.toDataURL("image/png")
        }));
				break;
			}

			var data = JSON.parse(evt.data);

			if(data["sid"]){
				sid = data["sid"];
			} else if(data["image_data"]){ //画像データを受信したら描画
				load_image(data["image_data"]);
			} else {
				draw.apply(null, JSON.parse(evt.data));
			}
		}

		canvas = document.getElementById('main_canvas');
		context = canvas.getContext("2d");
		canvas.addEventListener("mousedown", function(e){
			drawing = true;
			old_x = e.clientX;
      old_y = e.clientY;
		});
		canvas.addEventListener("mouseup", function() { drawing = false; });
    canvas.addEventListener("mouseout", function() { drawing = false; });
		canvas.addEventListener("mousemove", function(e){
			if(drawing){
				var x = e.clientX;
    		var y = e.clientY;
				socket.send(JSON.stringify([old_x, old_y, x, y]));
				draw(old_x, old_y, x,y);
				old_x = x;
				old_y = y;
			}
		});
	}

	function draw(from_x, from_y, to_x, to_y){
		var canvas = document.getElementById('main_canvas');
		var context = canvas.getContext("2d");
		context.strokeStyle = "rgba(255,0,0,1)";
		context.lineWidth = 1;
		context.beginPath();
    context.moveTo(from_x, from_y);
    context.lineTo(to_x, to_y);
    context.stroke();
    context.closePath();
	}

	function load_image(image_data){
		var image = new Image();
   image.onload = function() {
     context.clearRect(0, 0, canvas.width, canvas.height);
     context.drawImage(image, 0, 0, image.width, image.height);
   }
   image.src = image_data;
	}

	function join(){
		var room = document.forms[0]["room"].value;
		var user_name = document.forms[0]["user_name"].value;
		init(room, user_name);
	}
  </script>
	</head>

  <body>
		<canvas id="main_canvas" width="640" height="480"></canvas>
		<form name="form1" action="#">
		<input type="text" name="room">
		<input type="text" name="user_name">
		<input type="button" value="入室" onclick="join()">
		</form>
  </body>
</html>
	<!DOCTYPE html>
	<html lang="ja">
	<head>
	<meta charset="utf-8" />
	<title>mind-catch</title>
	<script type="text/javascript" src="./jquery-1.7.min.js"></script>
	<script type="text/javascript">
	var canvas;
	var context;
	var socket;
	var sid;
	var drawing;
	var old_x = 0;
	var old_y = 0;

	function init(room, user_name){
	socket = new WebSocket("ws://glasssaga.dip.jp:6743/?room="+room+"&user="+user_name);
	socket.onerror = function(){
	alert("エラーが発生しました");
	}
	socket.onmessage = function(evt){
	switch(evt.data){
	case "used_name": // ユーザ名が重複していた場合
	alert("このユーザ名は既に使われています。");
	return;
	case "image_req": // 画像データのリクエストを受けたら送信
	socket.send(JSON.stringify({
	"image_data" : canvas.toDataURL("image/png")
	}));
	break;
	}

	var data = JSON.parse(evt.data);

	if(data["sid"]){
	sid = data["sid"];
	} else if(data["image_data"]){ //画像データを受信したら描画
	load_image(data["image_data"]);
	} else {
	draw.apply(null, JSON.parse(evt.data));
	}
	}

	canvas = document.getElementById('main_canvas');
	context = canvas.getContext("2d");
	canvas.addEventListener("mousedown", function(e){
	drawing = true;
	old_x = e.clientX;
	old_y = e.clientY;
	});
	canvas.addEventListener("mouseup", function() { drawing = false; });
	canvas.addEventListener("mouseout", function() { drawing = false; });
	canvas.addEventListener("mousemove", function(e){
	if(drawing){
	var x = e.clientX;
	var y = e.clientY;
	socket.send(JSON.stringify([old_x, old_y, x, y]));
	draw(old_x, old_y, x,y);
	old_x = x;
	old_y = y;
	}
	});
	}

	function draw(from_x, from_y, to_x, to_y){
	var canvas = document.getElementById('main_canvas');
	var context = canvas.getContext("2d");
	context.strokeStyle = "rgba(255,0,0,1)";
	context.lineWidth = 1;
	context.beginPath();
	context.moveTo(from_x, from_y);
	context.lineTo(to_x, to_y);
	context.stroke();
	context.closePath();
	}

	function load_image(image_data){
	var image = new Image();
	image.onload = function() {
	context.clearRect(0, 0, canvas.width, canvas.height);
	context.drawImage(image, 0, 0, image.width, image.height);
	}
	image.src = image_data;
	}

	function join(){
	var room = document.forms[0]["room"].value;
	var user_name = document.forms[0]["user_name"].value;
	init(room, user_name);
	}
	</script>
	</head>

	<body>
	<canvas id="main_canvas" width="640" height="480"></canvas>
	<form name="form1" action="#">
	<input type="text" name="room">
	<input type="text" name="user_name">
	<input type="button" value="入室" onclick="join()">
	</form>
	</body>
	</html>