실전프로젝트 TIL

내일은 mvp 중간발표가 있는날이다. 그래서 소셜 로그인 이후에 채팅시작하기까지
짜잘짜잘한 오류도 해결하고 추가적인 기능도 넣어봤다.
오늘 해결했던 문제에 대해서 간단하게 정리해보자.

먼저 socket.io 에 대한 부분이다.

내가 해결해야할 문제점들은

1. text 를 입력하지 않으면 전송이 되지 않게 하기.
   이것은 간단하게 해결할 수 있었다.
   설정 되어있는 value값이 빈칸일때 보내지 못하게 끔 로직을 짜봤다.

const SubmitHandler = (e) => {
    e.preventDefault();
    if (message.msg !== "") {
      socket.emit("persnalchat", {
        roomkey: room,
        msg: message.msg,
        nickname: message.nickname,
        profile: message.url,
      });
      console.log("chatting", {
        roomkey: room,
        name: message.nickname,
        msg: message.msg,
        profile: message.url,
      });
      reset(initialState);
    }
  };

message.msg 가 빈칸이 아닐때에만 socket.emit 을 보내도록 만들어 빈칸일때 기능적인 오류들이 많이 나와서 간단하게 해결완료.
2.채팅방에서 나가서 다시 리매칭을 하게되면 채팅방에 남아있는 user와 채팅이 되는 오류
말 그대로 채팅방에서 상대방이 나갔지만 계속 채팅방에 남아있으면 나갔던 유저가 매칭을 하면 다른 사람과 매칭이 되는데 채팅방에 남아있던 사람도 거기서 글을 적어서 삼자대면이 되는 상황이 발생한다. socket.io 를 담당하는 BE 분과 소통을 한 결과, roomkey 를 가지고 있는것을 처음 페이지가 useEffect 해서 emit을 보내는 로직이 있는데 이때 room key 를 가지고 있으면
leave room 을 해서 아예 방에서 나가져서 다시 매칭이 돌도록 한다. localStorage 에서도 해당 아이템을 remove 로 삭제해준다.
code

useEffect(() => {
    socket.emit("nickname", JSON.parse(localStorage.getItem("nickname")).value);
    if (roomkey !== undefined) {
      socket.emit("leaveRoom", roomkey);
      localStorage.removeItem("roomkey");
    }
  .............
}

roomkey 는 따로 JSON.parse형식으로 가져왔다.

const roomkey = JSON.parse(localStorage?.getItem("roomkey"))?.value;