@takiiiii (さあああ)posted at 2022-02-10

「socket.ioで描いた絵が共有されない」

Q&A

解決したいこと

node.jsのsocket.ioにてお絵描きサイトを作っています
https://www.yoheim.net/blog.php?q=20120515
こちらのサイト様を参考にして作っていますが、
絵が共有されていなくて手づまりしている状況です。

発生している問題・エラー

参考サイト（右側）と作っているサイト（左）を横に並べて描くと
参考サイトから描いた絵は共有されているのに対し
作っているサイトは共有できないので、
クライアントから描画情報のデータをサーバーに送信ができていないと思っています。
コンソールではエラーは出ていません

該当するソースコード

server.js

socket.on("draw", function (data) {
    console.log(data);

    socket.broadcast.emit("draw", data);
  });

canvas.html


      canvas.addEventListener("mousemove", function (event) {
        var pos = getPos(event);
        console.log("mousemove : x=" + pos.x + ", y=" + pos.y + ", drawing=" + drawing);
        if (drawing) {
          c.beginPath();
          c.moveTo(oldPos.x, oldPos.y);
          c.lineTo(pos.x, pos.y);
          c.stroke();
          c.closePath();

          // socket.IOサーバーに、
          // どの点からどの点までを描画するかをの情報を送付する
          socket.emit("draw", {before:oldPos, after:Pos});
          oldPos = pos;
        }
      }, false);

自分で試したこと

参考サイトは古い情報だったため最近のリファレンス等を見ましたが
node.js自体初学者のため何が悪いかも分かっていません。
なにとぞお力添えをお願いします！

Are you sure you want to delete the question?