mactkg · November 21, 2011 10:51
diff --git a/index.html b/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>