index.htmlファイル
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="js/jquery-2.1.3.min.js"></script> <script src="/socket.io/socket.io.js"></script> <title>ベーステンプレート</title> </head> <body> <section> <h1>Canvas</h1> <nav> <!-- 線の色を変更するHTML要素 --> <!-- 線の太さを変更するHTML要素 --> <button id="clear_btn">クリアー</button> </nav> <canvas id="drowarea" width="500" height="500" style="border:1px solid blue;"></canvas> <!-- 文字の太さを変更 --> <form method="post"> <label>文字の太さを変更<input id="slide" type="range" name="range" min="1" max="10" value="1" onchange="showValue"></label> <span id="slide_value">1</span> <!-- <input type="submit" value="送信"> --> </form> <form method="post"> <label>色変更<input type="color" name="color" id="test"></label> </form> </section> <script src="js/jquery-2.1.3.min.js"></script> <script> $(function() { var canvas_mouse_event = false; //フラグ var oldX = 0: var oldY = 0; var bold_line = 3; var color = "#000"; var can = $("#drowarea")[0]; var context = can.getContext("2d"); //socketの処理 var socket = io.connect('http://localhost'); //サーバーからのメッセージ受信 socket.on('send user', function (msg) { var px = e.offsetX; var py = e.offsetY; context.strokeStyle = msg.color; context.lineWidth = bold_line; context.beginPath();//初期化 context.lineJoin = "round"; context.lineCap = "round"; context.moveTo(msg.oldX, msg.oldY); context.lineTo(msg.px, msg.py); context.stroke(); context.closePath(); oldX = px; oldY = py; }); //ここまで終了 socket.on('clear user', function() { context.beginPath(); context.clearRect(0, 0, can.width, can.height); //自動的に範囲を削除 }); $('can').mousedown(function(e) { canvas_mouse_event = true; oldX = e.offsetX; oldY = e.offsetY; return false; }); $('can').mousemove(function(e) { if(canvas_mouse_event) { draw(e); } }); $('can').on('mouseup', function() { canvas_mouse_event = false; }); $("#test").on("change", function() { color = $(test).val(); }); $('#clear_btn').on("click", function() { socket.emit('clear send'); context.beginPath(); context.clearRect(0, 0, can.width, can.height); }); function draw(e) { px = e.offsetX; py = e.offsetY; context.lineWidth = bold_line; context.strokeStyle = color; context.beginPath(); context.lineJoin = "round"; context/lineCap = "round"; context.moveTo(oldX, oldY); context.lineTo(px, py); context.stroke(); context.closePath(); oldX = px; oldY = py; //サーバーへの送信 socket.emit('server send', {fx:oldX, fy:oldY, tx: px, ty: py, color: color}); oldX = px; oldY = py; } }); // $("#clear_btn").on("click", function() { // context.beginPath(); // //指定した領域を消す // context.clearRect(0, 0, can.width, can.height); //can.widthにすると自動的取ってくる。 // }); // // $("#slide").on("change", function() { // bold_line = $(slide).val(); // sss = bold_line; // }); // // function showValue() { // $("#input1").html("#slide"); // } // // // $("#slide").on("change", function() { // $("#slide_value").html($(this).val()); // }); // // $("#test").on("change", function() { // color = $(test).val(); // }); // // $(can).on("mouseout", function() { // canvas_mouse_event = false; // // }); //MouseMove: //---------------------------------------------- //$(can).on("mousemove", function (e){ // if(canvas_mouse_event==true){ // var px = e.offsetX; // var py = e.offsetY - txy; // context.strokeStyle = color; // context.lineWidth = bold_line; // context.beginPath(); // context.lineJoin= "round"; // context.lineCap = "round"; // context.moveTo(oldX, oldY); // context.lineTo(px, py); // context.stroke(); // context.closePath(); // oldX = px; // oldY = py; // } //}); //MouseUp:フラグをfalse //------------------------------------------------ //$(can).on("mouseup", function(e){ // canvas_mouse_event=false; //}); //------------------------------------------------ //クリアーボタンAction //----------------------------------------------------------------- //$("#clear_btn").on("click",function (){ // context.beginPath(); // context.clearRect(0, 0, can.width, can.height); //}); //----------------------------------------------------------------- </script> </body> </html>
js/app.jsファイル
var app = require('express').createServer() , io = require('socket.io').listen(app); app.listen(8124); app.get('/', function (req, res) { res.sendfile(__dirname + '/index.html'); }); io.sockets.on('connection', function (socket) { // クライアントからメッセージ受信 socket.on('clear send', function () { // 自分以外の全員に送る socket.broadcast.emit('clear user'); }); // クライアントからメッセージ受信 socket.on('server send', function (msg) { // 自分以外の全員に送る socket.broadcast.emit('send user', msg); }); // 切断 socket.on('disconnect', function () { io.sockets.emit('user disconnected'); }); });
構造はこんな感じです。
test----js-----app.js
|
index.html
canvasを使ってお絵かきチャット作ろうとしています。お絵かきアプリ自体はすでに動きます。
socket.ioに関してのプログラムは他のサイトを参考に模写をしつつ少し変更しつつ書いています。
ただ正直使い方がいまいちわからないのと、これらのコードの中で間違っている箇所などありましたら指摘お願いします。
またそのほかに必要なファイルなどありましたら教えてくれると助かります。
node.js、socket.io、expressなどはターミナルですでにインストール済みです。
ただターミナル上で何をするかはわかりません。
app.jsを開くとhello worldなどをブラウザに表示することはできます。
そのた何かありましたら指摘してくれると助かります。
ピンポイントできになる点はJSON形式でデータを保存している所にどのようなkeyとデータを入れればいいかです。これは他のwebサイト(少し間違ってるのかな?)をかなり真似たので謎です。
JSON自体は扱えます。(勉強したばかり)
あなたの回答
tips
プレビュー