1. 방에 입장했을 때, (나를 제외한)방 사람들에게 메시지 보내기

-> socket.to(room) 사용하기

io.on("connection", (socket) => {

  // to one room
  socket.to("others").emit("an event", { some: "data" });

  // to multiple rooms
  socket.to("room1").to("room2").emit("hello");

  // or with an array
  socket.to(["room1", "room2"]).emit("hello");

  // a private message to another socket
  socket.to(/* another socket id */).emit("hey");

  // WARNING: `socket.to(socket.id).emit()` will NOT work, as it will send to everyone in the room
  // named `socket.id` but the sender. Please use the classic `socket.emit()` instead.
});

1.1 Server.js ㄱ ㄱ: 여기서 backSocket.to(room)사용할 것임.

-> room에 있는 모든 사람들에게 "welcome" event를 부여함.

<<<<<<<<<<<<<코드 추가해주기>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
backSocket.to(roomName).emit("welcome");


<<<<<<<<<<<<<<<<<<<<<최종 코드>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
ioServer.on("connection",(backSocket) => {
    backSocket.onAny((event) => {
        console.log(`Socket Event: ${event}`);
    });
    backSocket.on("enter_room", (roomName, showRoom) => {
        backSocket.join(roomName);
        showRoom();
        backSocket.to(roomName).emit("welcome");//"welcome" : event명임 -> roomName에 있는 사람들한테 welcome이란 event를 부여함.
    });
});

1.2 app.js ㄱ ㄱ: 1.1에서 채팅방 사람들한테 부여한 welcome event에 대해 app.js에서 이 event를 활용하여 방 안에 있는 사람들에게 메시지 보내기.

-> backend에서의 welcome event를 emit한 것에 대해, frontend에서 반응을 해줘야함.

<<<<<<<<<<<<<<<<<<추가 코드>>>>>>>>>>>>>>>>>>>>>>>>
function addMessage(message){
    const ul = room.querySelector("ul");
    const li = document.createElement("li");
    li.innerText = message;
    ul.appendChild(li);
};

frontSocket.on("welcome",() => {
    addMessage("Someone joined!");
});


<<<<<<<<<<<<<<<<<<<<최종 코드>>>>>>>>>>>>>>>>>>>>>>>
const frontSocket = io();//backend Socket과 연결됨.

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

room.hidden = true;

let roomName;

function addMessage(message){
    const ul = room.querySelector("ul");
    const li = document.createElement("li");
    li.innerText = message;
    ul.appendChild(li);
};

function showRoom(){
    welcome.hidden = true;
    room.hidden = false;
    const h3 = room.querySelector("h3");
    h3.innerText = `Room: ${roomName}`;
};

function handleRoomSubmit(event){
    event.preventDefault();
    const input = form.querySelector("input");
    frontSocket.emit("enter_room", input.value, showRoom);
    roomName = input.value;
    input.value = "";
};

form.addEventListener("submit",handleRoomSubmit);

frontSocket.on("welcome",() => {
    addMessage("Someone joined!");
});