[새싹X코딩온] 2차 프로젝트 (3)

2024-01-02 (8일차)

📌 To Do

• DB 반영
  • 채팅방 입장
  • 채팅방 나가기
  • 채팅방 삭제
  • 채팅메세지 생성, 조회
• socket(room 입장, 퇴장, 채팅)

💣 트러블 슈팅

• DB에 채팅방 생성하듯이 처음에는 소켓도 채팅방을 생성하고, 입장해야 한다고 생각하고 코드를 작성했는데
  그렇게 생각하고 작성하다보니 socket.join()을 두 번이나 사용해서 다른 room으로 접속하게 되는 오류 발생

  • 소켓은 실시간에 반영되는 것이니, 채팅방을 생성하는 것은 소켓에서 하는게 아니라 DB에서 하는 거라고 판단 -> 소켓은 입장하는 것만 반영 -> 동일한 room에 입장 가능💥

    // 채팅방 입장
      socket.on("entry", (res) => {
        console.log("채팅방 입장", res);
        const { chat_name, chat_category, nickname } = res;
        user = { chat_name: chat_name, nickname: nickname };
    
        socket.join(chat_name);
        io.to(chat_name).emit("notice", {
          msg: `${nickname}님이 입장하셨습니다.`,
        });
      });

• 소켓에서 채팅방 나가기를 구현할 때, 어떤 room을 나가는지 res 매개변수를 받아서 사용하려고 하니, disconnect 이벤트에서는 매개변수를 받을 수 없어서 -> 소켓 연결을 끊어지면, 서버가 끊기는 오류발생

  • 매개변수를 이용하지 않고 유저가 어떤 room을 나가는지 알려주기 위해,
    let user = {} 에 소켓에 입장한 user 정보를 입력해서 관리함

    // 채팅방 나가기
      socket.on("disconnect", () => {
        console.log("채팅방 나가기", user);
        io.to(user.chat_name).emit("notice", {
          msg: `${user.nickname}님이 퇴장하셨습니다.`,
        });
        socket.leave(user.chat_name);
      });

📃 기록

서버 측 코드들은 postman을 이용해서 확인하고 있는데, 아직 프론트랑 연결된 기능이 회원가입 관련된 api 밖에 없어서 postman에서 잘 작동해도 과연 react에서 잘 연결이 될지 두렵다...😥

다른 팀들을 보면 session이 뭔가 유지가 안 된다는 것 같기도 한데 우리도 그러겠지?...😥

그래서 우선 소켓도 채팅방 입장, 채팅방 나가기, 채팅 메세지 보내기 기능을 간략하게 구현해놓고, 프론트랑 연결해보고 기능을 추가 하는게 좋을 것 같아 여기까지 구현해 보았다.

---