실시간으로 여러 창에 그려지는 캔버스를 만들고 싶습니다

app.js

const express = require("express")
const http = require("http")
const app = express();
const path = require("path")
const server = http.createServer(app);

const socketIO = require("socket.io")
const io = socketIO(server);

app.use(express.static(path.join(__dirname, "src")))
const PORT = process.env.PORT || 5500;

// io.on("connection", (socket) => {
//     console.log('연결이 이루어 졌습니다.')
// })

io.sockets.on('connection', newConnection);

function newConnection(socket){
    console.log('new connection: ' + socket.id); 

    socket.on('mouse', mouseMsg);

    function mouseMsg(data){
        socket.broadcast.emit('mouse', data);
        // io.sockets.emit('mouse',data);
        console.log(data);
    }
}

// function onConnection(socket){
//   socket.on('drawing', (data) => socket.broadcast.emit('drawing', data));
// }

server.listen(PORT, ()=> console.log('server is running'))

effect.js

'''
var socket = io();
const canvas = document.getElementById("jsCanvas");
const ctx = canvas.getContext("2d");
const colors = document.getElementsByClassName("jsColor");
const range = document.getElementById("jsRange");
const mode = document.getElementById("jsMode");
const saveBtn = document.getElementById("jsSave");
const reset = document.getElementById("jsReset")

const INITIAL_COLOR = "#2c2c2c";
const CANVAS_SIZE = 700;

canvas.width = CANVAS_SIZE;
canvas.height = CANVAS_SIZE;

ctx.fillStyle = "white";
ctx.fillRect(0, 0, CANVAS_SIZE, CANVAS_SIZE);
ctx.strokeStyle = INITIAL_COLOR;
ctx.fillStyle = INITIAL_COLOR;
ctx.lineWidth = 2.5;
let painting = false;
let filling = false;

function setup(){
  socket = io.connect('http://localhost:5500')
  socket.on('mouse', newDrawing);
}

function newDrawing(data) {
  noStroke();
  filling(255,0,100);
  ellipse(data.x, data.y, 36, 36);
}

function stopPainting(event) {
  painting = false;
}
function startPainting(event) {
  var x = event.offsetX;
  var x = event.offsetY;
  painting = true;
  //console.log('Sending - ' + "x: "+offsetX,"y: "+offsetY);
}

function resetBtn(event) {
    window.location.reload();
}    
if (reset) {
    reset.addEventListener("click", resetBtn);
}

function onMouseMove(event) {
  const x = event.offsetX;
  const y = event.offsetY;
  if (!painting) {
    ctx.beginPath();
    ctx.moveTo(x, y);
  } else {
    ctx.lineTo(x, y);
    ctx.stroke();
  }
  //console.log(event);

  var data = {
     x: x,
     y: y
  }
  socket.emit('mouse', data);
}

function mouseDragged(){
  //console.log(mouseX + ',' + mouseY);
  noStroke();
  ellipse(mouseX, mouseY, 36,36);
}

function handleColorClick(event) {
  const color = event.target.style.backgroundColor;
  ctx.strokeStyle = color;
  ctx.fillStyle = color;
}
function handleRangeChange(event) {
  const size = event.target.value;
  ctx.lineWidth = size;
}
function handleModeClick() {
  if (filling === true) {
    filling = false;
    mode.innerText = "채우기";
  } else {
    filling = true;
    mode.innerText = "그리기";
  }
}
function handleCanvasClick() {
  if (filling) {
    ctx.fillRect(0, 0, CANVAS_SIZE, CANVAS_SIZE);
  }
}

function handleCM(event) {
  event.preventDefault();
}

function handleSaveClick() {
  const image = canvas.toDataURL();
  const link = document.createElement("a");
  link.href = image;
  link.download = "PaintJS[🎨]";
  link.click();
}

if (canvas) {
  canvas.addEventListener("mousemove", onMouseMove);
  canvas.addEventListener("mousedown", startPainting);
  canvas.addEventListener("mouseup", stopPainting);
  canvas.addEventListener("mouseleave", stopPainting);
  canvas.addEventListener("click", handleCanvasClick);
  canvas.addEventListener("contextmenu", handleCM);
}

Array.from(colors).forEach(color =>
  color.addEventListener("click", handleColorClick)
);
if (range) {
  range.addEventListener("input", handleRangeChange);
}
if (mode) {
  mode.addEventListener("click", handleModeClick);
}

if (saveBtn) {
  saveBtn.addEventListener("click", handleSaveClick);
}

// socket.on('line', function(data){
//   context.beginPath();
//   context.lineWidth = data.width
// })


index.html

'''
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="styles.css" />
    <title>그림판</title>
  </head>
  <body>
    <script src="/socket.io/socket.io.js"></script>
    <script>
      var socket = io();
    </script>
    <canvas id="jsCanvas" class="canvas"></canvas>
    <div class="controls">
        <div class="controls__BrushSize">
            <p style="text-align: center; font-weight: bold;">
                붓 크기 
            </p>
            <div class="controls__range">
                <input
                type="range"
                id="jsRange"
                min="0.1"
                max="10"
                value="2.5"
                step="0.1"
                />
            </div>
        </div>
      <div class="controls__btns">
        <button id="jsMode">채우기</button>
        <button id="jsSave">저장</button>
        <button id="jsReset">초기화</button>
      </div>
      <div class="controls__colors" id="jsColors">
        <div
          class="controls__color jsColor"
          style="background-color:#2c2c2c"
        ></div>
        <div
          class="controls__color jsColor"
          style="background-color:white"
        ></div>
        <div
          class="controls__color jsColor"
          style="background-color:#FF3B30"
        ></div>
        <div
          class="controls__color jsColor"
          style="background-color:#FF9500"
        ></div>
        <div
          class="controls__color jsColor"
          style="background-color:#FFCC00"
        ></div>
        <div
          class="controls__color jsColor"
          style="background-color:#4CD963"
        ></div>
        <div
          class="controls__color jsColor"
          style="background-color:#5AC8FA"
        ></div>
        <div
          class="controls__color jsColor"
          style="background-color:#0579FF"
        ></div>
        <div
          class="controls__color jsColor"
          style="background-color:#5856D6"
        ></div>
      </div>
    </div>
    <script src="effect.js"></script>
  </body>
</html>

계속 시도해봐도... 동시에 그려지는 법을 모르겠습니다......진짜 궁금합니다..ㅠㅠㅠ

뭐라고 적으면 해결될까요?...