4. 방 만들기

이 room 기능,

그러니까 특정 소켓끼리 묶는 이 기능을 이미 socketIO는 제공해 준다.

굉장히 쉽다.

그냥 socket.join("방이름") 해주면 끝이다.

 

https://socket.io/

Socket.IO

여기 ServerAPI, ClientAPI에서 공식 문서 확인할 수 있다.

 

socket.onAny(e=>{
	console.log(`socket on : ${e}`);
});

onAny, 그러니까 무슨 이벤트든 했을 때 발생.

 

우리가 SocketIO는 이벤트이름 자체를 다 우리가 명명할 수 있는데, 그 이름이 나옴.

 

 

socket.join(roomName.payload);

이렇게 해 주면 방참가,

근데 출력해보면,

socket on : enter_room
Set(2) { 'xcv9BJX-3uMYLtawAAAD', 'ㅁㄴㅇㄹ' }

socket.rooms 해서 참가한 방 들 볼 수 있는데 저런 게 있음.

저건 id랑 똑같음. (socket.id 하면 아이디 볼 수 있음)

즉 socket들은, 이미 모두 자기 id인 개인적인 방에 다 참가하고 있음.

 

즉, private room

 

또 방 나가려면

socket.leave(방이름) 하면 끝임.

 

 

또, 방 전체에 메시지를 보낼 수 있음.

socket.to(방이름) .emit("이벤트명", payload, callback())

이런 식으로

 

$welcomeForm.addEventListener("submit", (e)=>{
  e.preventDefault();
  const $input =  $welcomeForm.querySelector("input");
  socket.emit("enter_room", {payload : $input.value}, (roomName)=>{
    enterRoom(roomName);
  });
});

방이름 치고 입장 버튼 눌렀을 때,

socket을 통해 서버로 이벤트를 보내는데, input에 친 것을 보내고,

만약 서버에서 저 보낸 콜백함수를 콜하면,

 

const enterRoom = (roomName)=>{
  $welcome.style.display = 'none';
  $room.style.display = 'block';
  const $roomTitle = $room.querySelector("h3");
  $roomTitle.textContent = `Room ${roomName}`;

  addChatToUl(`${roomName}에 입장하셨습니다.`);
}

이게 실행됨.

그냥 welcome요소들 가리고 inRoom시의 요소들 보이게끔.

 

그리고 방 이름 써주고,

addChatToUl은

function addChatToUl(msg){
  const $li = document.createElement("li");
  $li.textContent = msg;
  $roomUl.append($li);
}

그냥 li만들어서 ul에다 추가해 주는거.

 

여튼, 클라이언트의 socket 전송 emit에 의해, enter_room 이벤트가 전송되면 서버에서,

io.on("connection", socket =>{
  socket.on("enter_room", (roomName, callback)=>{
    socket.join(roomName.payload);
    callback(roomName.payload);
    socket.to(roomName.payload).emit("welcome");
  })
})

이렇게 받음.

데이터로 온 roomName으로 socket을 join 시킴. 방에 가입시킴.

방에 가입시키는 join 함수.

그 다음 이제 저 콜백을 호출함.

 

그러면,

클라이언트에서

$welcomeForm.addEventListener("submit", (e)=>{
  e.preventDefault();
  const $input =  $welcomeForm.querySelector("input");
  socket.emit("enter_room", {payload : $input.value}, (roomName)=>{
    enterRoom(roomName);
  });
});

저기 준 저게 호출됨. 즉, enterRoom()이 호출되게 됨.

 

그리고,

서버측에서

socket.to(roomName.payload).emit("welcome");

이거는, 방 지정해서 거기다 다 이벤트 보내는 거임.

socket.to(방이름).emit(이벤트이름)

 

그럼 그 방에 있던 모든 사용자들에게 이벤트가 감.

참고로 이거,

socket.to(방이름).emit(이벤트이름) 하는 거 자기는 제외임.