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

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

ただいまの
回答率

90.02%

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

受付中

回答 0

投稿

  • 評価
  • クリップ 0
  • VIEW 1,160

Kenji-kawamura

score 25

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

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

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

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