3차 팀 프로젝트 채팅 기능 트러블 슈팅 #2 (부제 : 채팅 송수신 시간이 이상해요..! ㅠ)

 

1. 문제 발생

프로젝트를 배포하고 나서 채팅 테스트를 하는데 실시간 채팅에서

서로 동시에 채팅을 하고 있음에도

상대방 메시지 수신 시간과 나의 메시지 송신 시간이 일치하지 않은 현상이 있었다.

(로컬에서는 생기지 않았던 문제!! ㅠㅠ)

시간이 왔다리 갔다리...

분명 RDS 에는 한국 기준 보낸 시간으로 잘 저장이 되는데 수신할때나, DB 에서 불러올 때는 

시간이 이상하게 변해있었다. (나중에 알고보니 UTC 시간으로 변환되서 오던 것이었다.)

 

2. 원인 추론

로컬에서는 저 현상이 없었어서 혹시나 rds 에 저장되어 있는 시간이 이상한걸까? 싶어서

백엔드 담당분께 rds 에 시간이 어떻게 저장되어 있는지 여쭤봤다 그러나..

한국 기준 시간으로 이쁘게 잘 저장되어 있었다.

그래서 처음에는 내가 시간 로직을 이상하게 한걸까? 싶어서 로컬에서 엄청 많이 고쳤다..

시간 버그를 고치고자 했던 눈물의 흔적들...

그러나 아무리 고쳐도 송신 시간과 수신 시간의 불일치를 해결할 수 없었다.

그래서 서버에서 어떻게 받아오는지 로그를 찍어보았다. 

 rds 시간과 9시간 정도 차이나는 것을 확인했다.

즉, rds 에는 KST(한국시간)으로 저장되어 있지만 서버에서 클라이언트로 넘겨주는 시간은 UTC 시간이었던 것이다.

 

그래서 서버로부터 받아오는 수신 메시지는 UTC 시간으로 된거였고,

클라이언트에서 처리하는 시간인 송신 메시지는 KST 시간으로 표시된것이었다.

  // 메세지 전송 함수
  const sendMessage = (chatroomId: number, message: string) => {
    const jwt = getJwtFromCookies();
    const senderId = Number(extractUserIdFromCookie());
    const now = new Date();

    const offset = now.getTimezoneOffset() * 60000;
    const today = new Date(Date.now() - offset);
    const koreaTimeString = today.toISOString();
    const nowTime = now.getTime();
    if (lastMessageTime && nowTime - lastMessageTime < 2000) {
      simpleAlert("warning", "메시지를 너무 빨리 보낼 수 없습니다.");
      return;
    }

    lastMessageTime = nowTime;

    if (!chatroomId) return;
    const messageObj = {
      chatroomId,
      senderId,
      chatmsgContent: message,
      createdAt: koreaTimeString,
      messageType: "CHAT",
    };

    const chatSend = `/app/${chatroomId}/chatmsg`;
    if (clientRef.current?.connected) {
      clientRef.current.publish({
        destination: chatSend,
        headers: {
          Authorization: `Bearer ${jwt}`, // 토큰 값 넘기기
        },
        body: JSON.stringify(messageObj),
      });
        dispatch(setMessages([...messages, messageObj]));
    }
  };

 

전의 트러블슈팅에도 언급했지만 메세지 전송하는 곳에서도 message 배열에 dispatch 하는 로직을 구현했었다.

송신 메시지에는 한국 기준 시간이어서 시간 불일치가 되는 것이었다.

 

3. 해결 방안

당연하지만 해결할 방법이 두가지였는데

 

1) 서버에서 KST 시간으로 바꿔서 클라이언트에 넘겨준다.(서버에서 처리)

2) 클라이언트에서는 UTC 시간으로 받되, 시간을 KST 로 바꿔주는 로직을 사용해서 표시해준다.(클라이언트에서 처리)

 

이것을 두고 어떻게 해결하느냐에 대해서도 담당 백엔드 분과 대화를 나눈 결과,

우선을 클라이언트 측에서 9시간을 더해서 KST 로 표시하자고 했다.

 

메시지의 시간을 표시해주는 로직을 여러 차례 바꿨지만, 송수신 메시지의 시간 불일치가 계속 나타났다.

사실 이것을 고치면서 깨달은 것이  트러블슈팅 여기 포스팅에서 송신 로직에 dispatch 를 해줄 필요가 없다는 것이었다.

그러면 송신메시지는 따로 처리를 안해줘도 되서 꼬이는 것 없이 잘 해결할 수 있을 것 같았다.

아래와 같이 메시지의 시간을 나타내는 곳에 함수를 만들어서 9시간을 더해주는 것으로 한국 시간을 표시하도록 했다. 

  const formatTime = (datestring: string): string | undefined => {
    if (!datestring) return;

    // 입력된 날짜 문자열을 UTC 기준으로 생성
    const inputDate = new Date(datestring);
  
    const KST_OFFSET = 9 *60;
    const localTime = new Date(inputDate.getTime() + KST_OFFSET * 60 *1000)

    const hours = localTime.getHours();
    const minutes = localTime.getMinutes();
    const period = hours >= 12 ? '오후' : '오전'
    const displayHours = hours % 12 || 12;
    const formattedMinutes = minutes.toString().padStart(2, '0');

    return `${period} ${displayHours}:${formattedMinutes}`
  };

 

그리고 메시지 전송 함수에도 dispatch 하는 부분을 삭제했다.

  // 메세지 전송 함수
  const sendMessage = (chatroomId: number, message: string) => {
    const jwt = getJwtFromCookies();
    const senderId = Number(extractUserIdFromCookie());
    const now = new Date();

    const nowTime = now.getTime();
    if (lastMessageTime && nowTime - lastMessageTime < 2000) {
      simpleAlert("warning", "메시지를 너무 빨리 보낼 수 없습니다.");
      return;
    }

    lastMessageTime = nowTime;

    if (!chatroomId) return;
    const messageObj = {
      chatroomId,
      senderId,
      chatmsgContent: message,
      messageType: "CHAT",
    };

    const chatSend = `/app/${chatroomId}/chatmsg`;
    if (clientRef.current?.connected) {
      clientRef.current.publish({
        destination: chatSend,
        headers: {
          Authorization: `Bearer ${jwt}`, // 토큰 값 넘기기
        },
        body: JSON.stringify(messageObj),
      });
    }
  };

 

 

4. 결과

서버로부터 받은 시간에서 9시간을 더해줌!

결과적으로 일단은 한국 시간으로 보이게 했고,

송수신의 시간이 이상하게 표시되는 것을 고칠 수 있었다.

 

이것에 전의 트러블슈팅의 포스팅에서 언급했지만, 내가 stomp의 원리에 대해서 잘 모르고 쓴 것도 있었고,

전에 aws 에서 배포했을 때는 한국시간으로 잘 표시되었었기에

이런 문제가 발생할 줄은 몰랐다.. 배포에서!!

 

하지만 결과적으론 이런 문제가 발생한 덕분에 stomp 의 원리에 대해서 더 잘 이해할 수 있었기 때문에

저 문제가 발생할 당시에는 속상했지만 지금은 앗! 오히려 럭키비키잖아! 이렇게 생각하고 있다!