質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Socket.IO

Socket.IOはNode.js上で動くライブラリであり、すべてのブラウザとモバイルデバイスでリアルタイムのアプリを作動させる事を目的としています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

0回答

2346閲覧

canvas,socket.io,Node.jsを使ったをお絵かきチャットアプリについて

knj

総合スコア37

Socket.IO

Socket.IOはNode.js上で動くライブラリであり、すべてのブラウザとモバイルデバイスでリアルタイムのアプリを作動させる事を目的としています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2017/04/20 12:47

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自体は扱えます。(勉強したばかり)

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問