[ZICZONE 프로젝트] Redux와 SSE를 사용한 알림: 알림 구독 관리

Redux-persist를 사용해 알림 데이터를 로컬 저장소에 저장하여, 새로고침 시에도 기존 알림을 보존하는 것은 잘 작동했지만, 알림 구독(SSE)가 끊기는 문제가 발생했다....

페이지를 새로고침할 때 서버와의 연결이 끊기면서 발생하는 것으로, 알림 시스템을 다시 구독하지 않으면 실시간으로 알림을 받을 수 없게 되었음..

 

SSE(서버 전송 이벤트)는 서버가 클라이언트로 연결을 유지하면서 실시간으로 데이터를 푸시할 수 있는 방식이다.

SSE 간략한 흐름

 

SSE 구독은일회성 연결이라서 페이지가 새로고침되거나 브라우저가 닫히는 경우에는 서버와의 연결이 끊기게 된다.

이런 경우 새로 페이지를 로드할 때 서버와의 구독을 다시 설정해줘야 한다..!!

 

즉, 아무 설정도 하지 않은 상태로 페이지를 새로고침하게되면 새로운 알림을 받을 수 없는 것이다.....

 

그래서 내가 이 문제를 해결한 방법은 App.js에서 새로고침 시에 서버에 SSE 재구독을 요청하는 것이다.

const dispatch = useDispatch(); // Redux 액션을 디스패치하기 위한 훅

// 새로고침 시 알림 구독
useEffect(() => {
    if (userId && token) {
      dispatch(subscribeToSSE(userId, token)); // 알림 구독 실행
    }
}, [dispatch, userId, token]);

 

App.js에 useEffect문을 사용해서 페이지가 새로 로드될 때마다 회원의 로그인 상태(userId, token 여부)를 확인하고 로그인 상태일때 서버에 재구독 요청을 보낼 수 있도록 구현하였다.

 

export const subscribeToSSE = (userId, token) => (dispatch) => {
    //localhost안적어주면 알림안옴이슈
  const eventSource = new EventSource(`http://localhost:12000/sse/subscribe/${userId}?token=${token}`);

  eventSource.addEventListener("alarm", function (e) {
    const alarm = JSON.parse(e.data);
    dispatch(addAlarm(alarm)); // 새로운 알림을 Redux 상태로 업데이트
  });

  eventSource.onerror = function () {
    console.error("Error in SSE connection");
    eventSource.close();
  };
};

 

subscribeToSSE는 Redux 액션으로, SSE 구독을 시작하는 역할을 하고, 새로운 알림이 발생할 때마다 Redux 상태가 업데이트된다.

 

추후에 재구독말고 구독을 끊기지않게 하는 방법이 있는지 찾아보려고 한다. 하하!