socket.broadcast.to все еще отправляется отправителю

Question

Я создаю приложение React с узлом / express backend и socketIO.

В моем коде ниже у меня есть клиент, отправляющий данные (координаты x и y) слушателю socketIO на сервере как "рисунок". Затем этот прослушиватель отправляет данные обратно клиенту как «координаты», а прослушиватель на стороне клиента просто записывает данные в консоль.

Данные поступают совершенно нормально, однако, если я что-то не замечаю, строка кода: socket.broadcast.to (room) .emit ('координаты', clientX, clientY) не выполняет то, что я ожидаю. Я не хочу, чтобы это отправлялось отправителю, а только клиентам в указанной комнате. Однако отправитель тоже его получает. Я все еще очень новичок, чтобы реагировать / javascript в целом, поэтому я прошу прощения, если это что-то из базового c Я пропускаю.

У меня закончились идеи с точки зрения устранения неполадок, и если кто-то я могу понять, что я делаю не так, я был бы очень благодарен.

index. js (узел):

const express = require('express');
const app = express();
const http = require('http');
const socketIo = require('socket.io');
const server = http.createServer(app);
const io = socketIo(server);


server.listen(4000, () => {
    console.log("listening on port 4000")
})

io.on('connection', (socket) => {
    console.log("connected");

    socket.on('roomrequest', (name, roomCode) =>{
        socket.join(roomCode);
        console.log("joining:" +roomCode);
    })
    socket.on('disconnect', () => {
        console.log("disconnected")
    })
    socket.on('message', (room, message) => {
        console.log(message);
        io.sockets.in(room).emit('recieve', message);
    })
    socket.on('drawing', (room, clientX, clientY) => {
        console.log(clientX, clientY);
        socket.broadcast.to(room).emit('coordinates', clientX, clientY); 
        //suppose to broadcast to all sockets except sender, except... the sender is receiving the coordinates listener on client side
    })

доска. js внешний интерфейс:

import React, {useState, useEffect} from 'react';
import socketIOClient from 'socket.io-client';
function Whiteboard(props) {
  const [isDrawing, setisDrawing] = useState(false);
  let socket = socketIOClient("localhost:4000");

  /* This listener is being called on the sender, when it's not suppose to be.
  * the sender is seeing the console.log
  */
  socket.on('coordinates', (clientX, clientY) => {
    console.log("socketX:" +clientX, "socketY:" +clientY)
  })


  const mouseDown = (e) => {
    setisDrawing(true)
    draw(e)
  }
  const mouseUp = (e) => {
    setisDrawing(false)
    draw(e);
  }

  const draw = (e) => {
    const canvas = document.getElementById('canvas')
    const ctx = canvas.getContext("2d");
    if(e.type === 'mouseup'){
        console.log("mouseup")
        ctx.beginPath();
    }
    else if(isDrawing){
        ctx.lineWidth = 10;
        ctx.lineCap = "round";
        ctx.lineTo(e.clientX, e.clientY);
        ctx.stroke();
        ctx.beginPath();
        ctx.moveTo(e.clientX, e.clientY);
        socket.emit('drawing', props.roomCode, e.clientX, e.clientY)
      }
  }

  return (
      <div>
          <canvas 
          onMouseDown={(e) => mouseDown(e)}
          onMouseUp={(e) => mouseUp(e)}
          onMouseMove={(e) => draw(e)}
          id="canvas" width="500px" height="500px" style={{"border": "1px solid black"}}></canvas>
           <div>
                <button onClick={e => {e.preventDefault()
                 console.log(props.roomCode);
                 socket.emit('roomrequest', props.name, props.roomCode)}} >Join</button>
          </div>
      </div>
  );
}
export default Whiteboard;