All users leave the room when a single user leaves

[harryviennot]

I'm working on a multiplayer game using Socket.IO and React where users can join a room using a unique game pin. When a user leaves the room, I want to emit a 'userLeft' event to the remaining users in the room. However, when a single user leaves the room, all users are being removed from the room, and the 'userLeft' event is not being received by any user.

The issue occurs even though I'm not calling socket.leave() on the server-side. When I log the clients in the room before handling the 'leaveGame' event, all clients are still in the room. But when I enter the event handler for 'leaveGame' on the server-side, the room is empty.

Here's my server-side code:

function logClientsInRoom(roomName) {
    const clientsInRoom = Array.from(
      io.sockets.adapter.rooms.get(roomName) || []
    );
    console.log(`Clients in room ${roomName}:`, clientsInRoom);
  }

socket.on("joinGame", async (data) => {
      try {
        const { name, isCreator, gamePin } = data;
        socket.join(gamePin);
        console.log(`${name} joined room: `, gamePin);
        logClientsInRoom(gamePin);
        socket.emit("gameJoined", newData);
        socket.to(gamePin).emit("userJoined", newData);
      } catch (error) {
        console.log(error);
      }
    });

socket.on("leaveGame", async (data) => {
      try {
        const { gamePin, name } = data;
        console.log("userLeaving", data);
        socket.to(gamePin).emit("userLeft", name);
        logClientsInRoom(gamePin);
      } catch (error) {
        console.log(error);
      }
    });

When a user creates a room it displays :
Haz joined room: 825072 Clients in room 825072: [ 'UFr55p1UUTQWr6q_AAAG' ] Mol joined room: 825072 Clients in room 825072: [ 'UFr55p1UUTQWr6q_AAAG', 'n4SpYjvY-r8JzI8-AAAH' ]

However when my client-side calls "userLeaving", this is what logClientsInRoom logs: Clients in room 825072: []

Here's my client-side code:

const handleLeave = () => {
    const dataToSend = {
      name,
      gamePin: game.pin,
    };
    console.log("Emitting leaveGame event from client-side");
    socket.emit("leaveGame", dataToSend);
    navigation.navigate("Home");
  };

useEffect(() => {
    socket.on("gameCreated", (gameData) => {
      console.log(gameData);
      setRoomPin(gameData.pin);
      setGame(gameData);
      setLoading(false);
    });
    socket.on("userJoined", (updatedGame) => {
      console.log("userJoined", updatedGame);
      setGame(updatedGame);
    });
    socket.on("userLeft", (name) => {
      console.log(`${name} left the game`);
    });
  }, [socket]);

The userLeft listener isn't called because when the server side socket.to(gamePin).emit("userLeft", name); is called the room is already empty, so there is no one to listen to that event.

I want to understand why all users are being removed from the room when a single user leaves, and how to fix this issue so that the 'userLeft' event is received by the remaining users in the room.

Please let me know if you need any additional information or clarification.