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

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回答

1432閲覧

Socket.IOを使ったお絵かきチャットが上手く動作しません

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/30 10:30

kadai.html

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <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 src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!-- <script type="text/javascript"></script> --> <script src="/socket.io/socket.io.js"></script> <script> $(function() { //初期化 var canvas_mouse_event = false; //スイッチ [ true=線を引く, false=線は引かない ] var oldX = 0; //1つ前の座標を代入するための変数 var oldY = 0; //1つ前の座標を代入するための変数 var bold_line = 3; //ラインの太さをここで指定 var color = "#000"; //ラインの色をここで指定 var sss = 0; var can = $("#drowarea")[0]; //CanvasElement var context = can.getContext("2d"); //描画するための準備! var socket = io.connect(); //サーバーからのメッセージ受信 socket.on('send user', function(data) { //.〇〇はJSONデータのkeyの部分から情報を得ている。ここは結果論でしかない context.strokeStyle = data.color; context.lineWidth = data.line //JSONデータのkeyがlineで値はbold_line context.beginPath(); context.moveTo(data.ox, data.oy); //JSONのkeyはoxで値はoldX context.lineTo(data.tx, data.ty); //JSONのkeyはtxで値はpx context.stroke(); context.closePath(); }); socket.on('clear user', function() { //受信用のクリア情報かな? context.clearRect(0, 0, can.width, can.height); }); //MouseDown:フラグをTrue //----------------------------------------------- //$(can).on("mousedown", function(e){ //oldX = e.offsetX; //MOUSEDOWNしたX横座標取得 //oldY = e.offsetY - txy; //MOUSEDOWN Y高さ座標取得 //canvas_mouse_event=true; //}); //----------------------------------------------- //上5つのスクリプトを記述します。 $(can).on("mousedown", function(e) { oldX = e.offsetX; //「eはevent」で、eの中のつまりcanvasの中の座標を取得する。 oldY = e.offsetY; //mousedownしたy座標を取得 canvas_mouse_event = true; //フラグ、スイッチの発送はよく使う }); $(can).on("mousemove", function(e) { if (canvas_mouse_event == true) { draw(e); } }); $(can).on("mouseup", function() { canvas_mouse_event = false; }); $("#clear_btn").on("click", function() { socket,emit('clear send'); 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; }); function draw(e) { var px = e.offsetX; var py = e.offsetY; 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(); //pathを閉じて、この間を繰り返す socket.emit('server send', {"ox": "oldX", "oy": "oldY", "tx": "px", "ty": "py", "color": "color", "line": "bold_line"}); oldX = px; //現在の座標は古い座標になるので現在の座標を古い座標に代入する。 oldY = py; } }); </script> </body> </html>

app.js

var http = require( 'http' ); // HTTPモジュール読み込み var socketio = require( 'socket.io' ); // Socket.IOモジュール読み込み var fs = require( 'fs' ); // ファイル入出力モジュール読み込み // 3000番ポートでHTTPサーバーを立てる var server = http.createServer( function( req, res ) { res.writeHead(200, { 'Content-Type' : 'text/html' }); // ヘッダ出力 res.end( fs.readFileSync('./kadai.html', 'utf-8') ); // index.htmlの内容を出力 }).listen(3000); // サーバーをソケットに紐付ける var io = socketio.listen(server); io.sockets.on('connection', function(socket) { //クライアントからのメッセージ受信 socket.on('clear send', function() { //自分以外の全員に送る socket.broadcast.emit('clear user'); }); //クライアントからのメッセージ受信 socket.on('server send', function(data) { //自分以外の全員に送る socket.broadcast.emit('send user', data); }); // 切断 socket.on('disconnect', function() { io.sockets.emit('user_disconnected'); }); });

お絵かきチャットですが、上手く動作していません。アドバイスいただけると!

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

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

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

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

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

yuta0801

2017/05/04 11:47

どのように動作しないのか書いてください。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問