1. 방 안에 있는 사람들 세기

보시다시피 rooms와 sids는 방 이름을 map으로 저장하면서, value값을 Set으로 저장하고 있다. 즉, value값에는 Set의 특성을 사용할 수 있다.

1.1 Set

-> 중복되는 값 없애줌.
-> size(length)를 알 수 있음.

const food = new Set(["pizza","love","love"])
food // {"pizza","love"} , Set: 중복되는 값 없앰.
food.size // 2

1.2 (backend -> frontend)방에 몇 명 있는지 data보내기

//내가 속한 room의 크기를 잼. 즉, 몇 명이 있는지 알 수 있게 해줌.
function countRoom(roomName){
    return ioServer.sockets.adapter.rooms.get(roomName)?.size
};
  
//방에 들어갈 때, 방에 몇 명있는지 알려주는 data보내기   
backSocket.on("enter_room", (roomName, done) => {
        backSocket.join(roomName);
        done();
        backSocket.to(roomName).emit("welcome", backSocket.nickname, countRoom(roomName));
        ioServer.sockets.emit("room_change", publicRooms()/*추가함*/);
    });

//방에서 나갈 때 -> -1해주는 이유: 나가기 직전이고 아직 안 나간 상태여서 -1해줘야함
backSocket.on("disconnecting",() => {
        backSocket.rooms.forEach((room) => backSocket.to(room).emit("bye", backSocket.nickname, countRoom(room) -1 ));//backSocket.rooms: {"id~~", "roomName"}
    });

1.3 (frontend) back에서 보내준 data 처리.

-> 다음 코드처럼 이벤트 리스너 수정 ㄱ ㄱ

frontSocket.on("welcome",(user, newCount) => {
    const h3 = room.querySelector("h3");
    h3.innerText = `Room: ${roomName} (${newCount})`;
    addMessage(`${user} joined!`);
});

frontSocket.on("bye",(left, newCount) => {
    const h3 = room.querySelector("h3");
    h3.innerText = `Room: ${roomName} (${newCount})`;
    addMessage(`${left} left ㅠㅠ`);
});

-> 근데 방금 막 들어왔을 때는 안 뜨네 ㅠ ㅠ 나중에 고쳐보삼 !