[Mini/채팅] 채팅방 나가기

 

[Mini/채팅] 채팅방 나가기

대부분은 코드를 보고 이해하실 것이라 생각됩니다. 그 중 중요하다고 생각하는 것 위주로 작성하였습니다. 그리고 기능 구현은 마지막 게시글이니 참고하시길 바랍니다.

작업 내용

이전 게시글에서는 채팅을 구현해보았다. 이번 게시글에서는 채팅방 나가기를 구현해보자.

채팅방 나가기 구현하기

◆ 프론트

프론트에서는 딱히 할게 없다. 이전에 만들어둔 함수 onLeaveRoom을 구현하면 된다. 채팅방 이름은 join state로 가지고 있었다. 이것을 백엔드 서버로 넘겨주면 되는 것이다. 그리고 성공하였으면 state를 다시 null로 변경해주면 끝이다. 아래 코드를 확인해보자.

const onLeaveRoom = () => {
  socket.emit("leave-room", join, () => setJoin(null));
};

그리고 만약 채팅방에 아무도 없으면 어떻게 될까? 그리고 이것을 어떻게 알 수 있을까? 당연히 아무도 없으면 방을 없애야 한다. 그리고 이것을 알 수 있는 방법은 여러 가지가 있겠지만 프론트에서 room에 user를 가지고 있는 방법, 또는 백엔드에서 가지고 있는 방법이 먼저 떠오른다. 그러나 잘 생각해보자. 우리는 이러한 것을 가지고 있기 싫고 그것을 잘 정리해주는 socket.io를 사용하고 있다. 여기서는 존재하는 room 개념을 잘 활용하면 된다. room에 아무도 없으면 당연히 room은 사라질 것이다. 따라서 백엔드에서 room이 사라지는 것을 확인할 때, 그 span.bold_line 사실을 프론트에 전달해주면 된다. 그 전달을 받기 위한 remove-room event를 추가해주었다. 아래 코드를 확인해보자.

socket.on("remove-room", roomName => {
  setRooms(prev => prev.filter(item => item !== roomName));
});

코드는 간단하다. 그냥 roomlist에서 삭제된 room을 제거해주는 것이다.

◆ 백엔드

백엔드도 간단하다. socket.io에서 room을 나가기 위해서는 socket.leave(룸 이름); 을 해주면 된다. 그리고 내가 삭제한 room에 모든 user가 나가서 room이 사라졌는 지 확인해야한다. 그리고 roomlist에 해당 room이 없으면 remove-room event로 프론트에 room 이름을 전송해주었다. 아래 코드를 확인해보자.

socket.on("leave-room", (roomName, done) => {
  socket.leave(roomName);
  done();
  const rooms = getUserRooms();
  if (!rooms.includes(roomName)) {
    io.emit("remove-room", roomName);
  }
});

아래는 최종 동작 이미지이다. 먼저 혼자 방을 만들고 나간 경우이다.

그리고 모든 인원이 전부 나간 경우이다.

모두 잘 동작하는 것을 확인할 수 있다. 채팅 프로젝트는 기능 구현은 여기서 끝났다. 더 이상 기능 부분에 대해 추가 구현은 하지 않을 것이다. 위 방법대로 구현해도 되지만 약간의 문제들이 있다. 3명 이상이 접속하면 어떤 텍스트가 누구의 것인지 모른다. 그리고 방 이름으로 구분하기 때문에 방 이름이 같으면 버그가 생길 것이다. 또한 유저가 나갔을 때, 나간 메시지는 표시하지 않고 있다. 이러한 것들을 스스로 해보고 필자의 코드도 리팩토링을 해보길 바란다.

다음 작업 내용

이번 게시글에서는 채팅방 나기기를 구현하였다. 다음 게시글에서는 css를 수정하여 간단하게 꾸며보도록 하겠다.

◆ 참고자료

• 프론트 수정 코드
• 서버 수정 코드

마지막

해당 내용은 틀릴 수도 있다는 것을 감안하여 봐주세요. 틀린 내용 및 오탈자 수정 요청 환영입니다.