削除機能とかつけた

KOBA789 · Mar 2, 2011 · 1a847bf · 1a847bf
1 parent 650a8d7
commit 1a847bf
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 3 deletions.
diff --git a/index.html b/index.html
@@ -4,14 +4,15 @@
 <meta charset="UTF-8">
 <title>paintogether</title>
 <link href="./style.css" rel="stylesheet" type="text/css">
-<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
+<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
 <script src="http://cdn.socket.io/stable/socket.io.js"></script>
 <script src="./main.js"></script>
 </head>
 <body>
 <header>
 <h1>paintogether</h1>
 </header>
+<p><a href="javascript:void(0);" id="clearBtn">消す? 消しちゃう? マジで消しちゃう? マジかー。消しちゃうのかー。</a><br></p>
 <p>Socket.IOとHTML5のCanvasを使ってリアルタイムにお絵かきチャットをしてみた。サーバーサイドはnode.jsだよー。</p>
 <canvas id="canvas" width="640" height="480"></canvas>
 </body>

diff --git a/main.js b/main.js
@@ -18,6 +18,13 @@ $(document).ready(function () {
   var send = function (x1, y1, x2, y2) {
     socket.send(JSON.stringify([x1, y1, x2, y2]));
   }
+  var clear = function () {
+    socket.send('cls');
+  }
+  $('#clearBtn').click(function () {
+    ctx.clearRect(0, 0, 640, 480);
+    clear();
+  });
   $('#canvas').mousedown(function (e) {
     flg = true;
     oldX = e.pageX - $('#canvas').position().left;
@@ -36,7 +43,12 @@ $(document).ready(function () {
     oldY = y;
   });
   socket.on('message', function(data){
-    var pos = JSON.parse(data);
-    draw(pos[0], pos[1], pos[2], pos[3]);
+    console.log(data);
+    if (data == 'cls') {
+      ctx.clearRect(0, 0, 640, 480);
+    } else {
+      var pos = JSON.parse(data);
+      draw(pos[0], pos[1], pos[2], pos[3]);
+    }
   });
 });
diff --git a/server.js b/server.js
@@ -10,9 +10,21 @@ app.configure(function(){
 
 app.listen(5088);
 
+var posArray = Array();
+
 var socket = io.listen(app);
 socket.on('connection', function(client) {
+  console.log('Connected from ' + client.request.socket.remoteAddress);
+  for (var i = 0; i < posArray.length; i ++) {
+    client.send(JSON.stringify(posArray[i]));
+  }
   client.on('message', function(pos) {
+    if (pos == 'cls') {
+      posArray = Array();
+    } else {
+      var obj = JSON.parse(pos);
+      posArray.push(obj);
+    }
     client.broadcast(pos);
   });
 });