[리액트] 로그아웃 후 재 로그인 시 이전 알림이 새로운 알림으로 수신되는 문제 해결하기

사용자가 로그아웃한 이후에 수신되는 채팅이 있는 경우 재 로그인 시에 읽지 않은 채팅이 있음을 알려주는 alert창을 띄워주기로 하였다.

하지만 로그아웃 후에도 EventSource 연결이 유지되어 이전 알림이 새로운 알림으로 수신되는 문제가 발생하였다. 

 

이를 해결하기위해 로그아웃 시 EventSource 연결을 확실히 종료하고, 재로그인 시에는 새로운 연결이 수립되도록 코드를 구성하여 이전 알림이 수신되지 않도록 하기로 했다.

  const eventSourceRef = useRef(null);
  const EventSource = EventSourcePolyfill;
  useEffect(() => {
    if (isLoggedIn) {
      const fetchSse = async () => {
        const headers = {
          "Content-Type": "text/event-stream",
          Connection: "keep-alive",
          ACCESS_KEY: Access_key,
          REFRESH_KEY: decrypt(Refresh_key),
        };
        const eventSource = new EventSource(
          `https://moment-backend.shop/sse/chat/alarm/${userId}`,
          {
            headers,
            withCredentials: true,
            heartbeatTimeout: 4000000,
          }
        );
        eventSourceRef.current = eventSource;
        eventSource.addEventListener("chatAlarm-event", (event) => {
          const eventData = JSON.parse(event.data);
          console.log("Received event:", eventData);
          setAlarmList((prevList) => [...prevList, eventData]);
          setHasNewNotifications(true);
        });
      };
      fetchSse();
    }
    return () => {
      // 컴포넌트 언마운트 시 eventSource 연결 종료
      if (eventSourceRef.current) {
        eventSourceRef.current.close();
        eventSourceRef.current = null; // eventSourceRef 초기화
      }
    };
  }, [isLoggedIn]);


  const logoutHandler = async (e) => {
    sessionStorage.removeItem("Access_key");
    sessionStorage.removeItem("Refresh_key");
    await logoutMutation.mutateAsync();
    dispatch(logoutSuccess());
    if (eventSourceRef.current) {
      eventSourceRef.current.close(); // 로그아웃 시 eventSource 연결 종료
    }
    navigate("/");
  };

• 로그아웃 시 eventSourceRef.current.close()를 호출하여 EventSource 연결을 종료
• eventSourceRef.current를 null로 초기화함으로써 이전 알림이 수신되지 않도록 해결