[Mini/채팅] 채팅방 생성 / 동기화

[Mini/채팅] 채팅방 동기화

대부분은 코드를 보고 이해하실 것이라 생각됩니다. 그 중 중요하다고 생각하는 것 위주로 작성하였습니다.

작업 내용

로그인을 한 후 다른 사람들과 채팅을 하기 위해서는 채팅방을 만들거나 접속해야 한다. 이번 게시글에서는 채팅방을 만드는 작업을 해보았다. 그리고 채팅방을 만들면 다른 로그인 된 브라우저에서 해당 채팅방이 실시간으로 업데이트가 되어야 하는데 이 작업도 같이 해주었다. 이번 게시글에서는 기능 기준으로 작성을 해보았다.

◆ 채팅방 생성 및 접속

채팅방 생성에 성공하면 채팅방 리스트를 rooms state에 업데이트 해주었다. 그리고 채팅방을 생성하였다는 것은 해당 채팅방에 접속을 하겠다는 의미와 동일하기 때문에 접속(join state)까지 같이 해주었다.

위 작업을 하기 위해서 채팅방 생성을 성공하면 프론트에서는 create-room 이벤트를 실행시키는 onSuccessCreateRoom 함수 안에 callback 함수로 addRoom, onHandleJoin 함수를 실행시켜주었다. 어래 코드를 참고해보자.

const onSuccessCreateRoom = roomName => {
  socket.emit("create-room", roomName, () => {
    addRoom(roomName);
    onHandleJoin(roomName);
  });
};

◆ 방 동기화

위 채팅방을 생성하였으면 내 화면에서는 잘 보일 것이다. 그러나 다른 사람의 화면에도 해당 채팅방이 잘 보여야 한다. 즉 생성된 채팅방 리스트들이 동기화가 되어야 한다는 것이다. 그러나 이 작업이 되지 않아 아래와 같이 동작한다.

동기화를 시켜주기 위해 백엔드에서는 create-room 이벤트를 받으면 updateRoomList 함수를 실행시킨다. 이 함수에서 실행하는 getSids, getUserRooms 함수는 스스로 이해해보도록 하자. 어쨌든 updateRoomList 함수에서는 같은 namespace에 있는 모든 room에 해당 room 정보를 updateRooms 라는 이벤트로 전달한다. 그럼 프론트에서는 updateRooms 이벤트로 받은 room 정보를 업데이트 시켜준다. 위 과정을 하는 코드를 살펴보자.

const updateRoomList = () => {
  const ids = getSids();
  const userRooms = getUserRooms();

  ids.forEach(id => io.to(id).emit("updateRooms", userRooms));
};

useEffect(() => {
  socket.on("connect", () => {
    socket.on("updateRooms", newRooms => {
      setRooms(newRooms);
    });
  });
}, []);

위 과정을 거치게 되면 우리가 원하는 방 동기화 작업이 이루어진다. 아래 최종 결과화면을 확인해보자.

다음 작업 내용

이번 게시글에서는 채팅방 동기화를 하였다. 그러나 결과를 보면 알겠지만 채팅방에 접속이 되었는데 계속 또 다른 채팅방이 만들어진다. 이것을 막아보도록 하겠다.

◆ 참고자료

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

마지막

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