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

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

ただいまの
回答率

88.77%

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

受付中

回答 0

投稿

  • 評価
  • クリップ 0
  • VIEW 923

Kenji-kawamura

score 27

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');
  });


});

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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正の依頼

  • 退会済みユーザー

    2017/05/03 15:46

    複数のユーザーから「やってほしいことだけを記載した丸投げの質問」という意見がありました
    「質問を編集する」ボタンから編集を行い、調査したこと・試したことを記入していただくと、回答が得られやすくなります。

  • yuta0801

    2017/05/04 20:47

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

    キャンセル

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

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

  • ただいまの回答率 88.77%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る