1. Rooms

-> 서로 의사소통할 수 있는 Socket그룹이 필요함.

1-1. backSocket.join("roomName");

-> socketIO는 기본적으로 room을 제공하고, room에 참가하려면 backSocket.join(roomname)만
해주면 된다.
SocketIO documentation

1-2. console.log(backSocket.rooms);

-> 현재 backSocket이 속한 room을 알려준다.

1-3. socket.onAny(callback)

-> 이벤트가 발생하면 실행될 리스너를 추가합니다.

1-1 ~ 1-3 코드

ioServer.on("connection",(backSocket) => {
    backSocket.onAny((event) => {
        console.log(`Socket Event: ${event}`);
    });//onAny
    backSocket.on("enter_room", (roomname, done) => {
      	console.log(backSocket.id);//backSocket의 id
        console.log(backSocket.rooms);//현재 내가 있는 room : 현재 내가 속한(기본적으로 들어가 있는) private room의 이름이 backSocket.id와 동일함을 알 수 있다.
        backSocket.join(roomname);//설정한 room에 들어감 
        console.log(backSocket.rooms);//설정해준 roomname(app.js에서 object형식으로 보내줘서 object형식으로 들어간 것임.)
        setTimeout(() =>{
            done("hello from the backend");
        }, 10000);
    });
});

1-4. backSocket.leave(room)

-> 방을 나갈 수 있음. 그렇게 되면 backSocket.room의 object에서 leave에 변수로 넣어준 room이 사라
짐.

1-5. backSocket.to(room)

-> 방 전체에 메시지를 보낼 수 있음. documentation BSK.to(room)

*방에 참가했을 때, 방에 있는 사람들에게 참가했다고 알리기.

-> 방에 참가했을 때, html의 form을 숨기고 방을 보여줄 것임.

• home.pug ㄱ ㄱ: 메시지 입력창 div추가. & 채팅방 이름 보이도록 해줄겨

main
    div#welcome
        form
            input(placeholder="room name", required, type="text")
            button Enter Room
    div#room
    	h3
        ul
        form
            input(placeholder="message", required, type="text")
            button Send

• app.jsㄱ ㄱ: 처음에는 room name form만 보이고 msg form은 숨길것임, 방 이름을
  가지고 방에 입장하면 showRoom 함수를 실행시켜 room form은 숨기고, msg form을 보일
  것임.
  또한 채팅방 이름 보이도록 해줄겨.

const welcome = document.getElementById("welcome");
const room = document.getElementById("room");

room.hidden = true;

let roomName; // 처음 roomName은 비어있음.

function showRoom(){
    welcome.hidden = true;
    room.hidden = false;
  	const h3 = room.querySelector("h3");
  	h3.innerText = `Room: ${roomName}`;//roomName 화면에 보여줌.
};

function handleRoomSubmit(event){
    event.preventDefault();
    const input = form.querySelector("input");
    frontSocket.emit("enter_room", input.value, showRoom);
    roomName = input.value;// roomName에 입력값 넣어주기
  	input.value = "";
};

• server.js ㄱ ㄱ: app.js에서 emit으로 보내준 showRoom fn을 실행시켜줘야 form이 숨고 보여지고가 작동됨.

ioServer.on("connection",(backSocket) => {
    backSocket.onAny((event) => {
        console.log(`Socket Event: ${event}`);
    });
    backSocket.on("enter_room", (roomName, showRoom) => {
        backSocket.join(roomName);
        showRoom();// backend에서 fn를 제어해줘서 frontend에서 실행되도록 함.
    });
});