실시간 채팅 구현(3)

지헌·2025년 3월 1일

앞에 내용에서 새로고침을 하면 UUID 값이 변경되어서 사용자 정보가 휘발될거 같다는 생각이 들었다.

그래서 이번 작업은 사용자가 채팅방에 접속하기 이전에 닉네임을 설정하고 이를 상태 관리(처음 사용해보는 zustand를 채택)해서 뿌려주고 useRef를 통해 새로고침을 해도 닉네임이 날라가지 않게 작업을 해볼 계획이다.

진행 내용

1. 현재 이슈

현재 코드를 작성하다보니 구조를 잘못짜서 본인이 작성한 메세지가 상대방이 보낸 메세지라고 표시되는 오류가 발생했다.

♻️ 클라이언트에서의 userId값과 서버 senderId 값이 불일치 발생 이유는 프론트에서 uuidv4()를 사용해서 초기 로드 시 한 번만 userId를 생성하는데 서버 코드에서는 webSocket 연결이 새로 열릴 때마다 새로운 UUID를 부과하여서 서로 다르다고 인식 그래서 userId를 서버로 전달하도록 수정해줬다.

그런데 생각해보니, 프론트와 서버 모두에서 UUID를 생성하는 구조로 코드를 잘못 작성한 것 같습니다. 이쪽 내용은 처음이지만 그래도 그간 경험에서 생각할 수 있던 내용은 서버에서 UUID를 생성하고, 클라이언트가 받아서 저장을 해야한다고 생각하고 있기 때문에 현재 구조가 잘못된거 같아 이 부분부터 다시 수정해야줘야 할거 같아서 수정해줬습니다.

BE

wss.on("connection", (ws) => {
  const userId = uuidv4(); // 서버에서 UUID 생성
  clients.set(userId, ws);

  // 클라이언트에게 UUID 전송
  ws.send(JSON.stringify({ type: "assignId", userId }));

FE

const [userId, setUserId] = useState(null); // 사용자 UUID를 서버로부터 받아와서 저장

ws.current.onmessage = (event) => {
      const data = JSON.parse(event.data);

      if (data.type === "assignId") {
        setUserId(data.userId); // 서버에서 받은 UUID 저장
        console.log("🆔 서버에서 받은 userId:", data.userId);
        return;
      }

      setMessages((prev) => [...prev, data]);
    };

2. 휘발성인 UUID를 비휘발성으로 변경

현재 새로고침을하면 계속해서 UUID가 변경되어 익명성의 일관성(익명성의 일관성 결여)이 떨어진다는 단점이 있습니다... 이는 익명 채팅 기능에서 사용자가 UUID를 자주 변경할 경우, 동일한 사용자임에도 불구하고 다른 사람처럼 행동할 수 있어, 예를 들어 욕설을 하고 나서 즉시 다른 UUID로 변경하여 책임을 회피하는 상황이 발생합니다.

이를 해결하기 위해 UUID를 일정 시간 동안 유지하는 방안을 도입하여, 사용자는 동일한 익명성을 유지하고 불필요한 변동성을 줄여 일관된 익명성을 유지할 계획입니다. 이를 통해 상대방과의 대화에서 신뢰성과 일관성을 높일 수 있습니다.

현재 해당 플젝에서 사용하고 있는 WebSocket은 한 번 연결이 맺어지면 지속적으로 유지되는 통신 방식이기 때문에, 클라이언트에서 uuid를 유지하는 것이 효율적이다.

3. 서버에서 uuid를 저장하기 위해서 Redis를 설치

챗지피티 참고해서 Redis를 연결하니 claude에서는 불필요한 사용방법이라고한다. 이부분을 제대로 다뤄야할듯

백엔드 친구에게 의견을 구해 해당 문제를 해결하기로 했다.
redis는 휘발성 데이터를 저장할 때 사용 → fordog에서는 redis를 인증 번호를 이메일로 전송할 때 그런 데이터를 저장할 때 사용(인증번호) - 인증번호를 서버에서 만들어서 메일로 보냈을 때 3분 동안 존재하도록 redis에 저장(그 외 리프레시 토큰도 redis에 저장했다)

껏다켜도 채팅이 유지될려면 no-sql인 몽고디비 같은 것을 사용해서 채팅 기록을 유지한다.

채팅 관련 기능에서 쓰레드 관련이 필요한지 확인해 볼 것...

서버에서 uuid를 랜덤으로 생성하고 클라이언트로 전달해주거든 클라이언트 메세지랑 uuid값을 값을 대조해서 서버 보내주고 uuid값을 서버에서 어떻게저장하지? 클라이언트는 로컬스토리지에 저장하면되니깐? 하다가 생각한게 redis인데

서버에서 uuid값을 만들었을 때 시간을 정해두면 굳이 이 값을 저장할 필요가 없는가?

websocket에 uuid을 저장하는 방법이 있는가?? → 그냥 객체에 uuid를 저장해서 구조를 간결하게 구현할 것

서버가 필요한게 맞다. 10분 간 → 이부분은 클라이언트에서 로컬스토리지에 저장해서 해결하는 방안으로

→ 클라이언트 단에서 uuid 값을 유지하는 방법이 있을거같다.(시도 해볼 계획 서버가 필요가 없을 때)

profile
차곡차곡 그만 쌓아올리고 취업해서 부딪쳐보고 싶은

0개의 댓글