feat : SSE전역변수로 관리할지 store 하나 만들어서 만들면서 고민중

Author: wldnjs990

src/hooks/useServerSentEvents.tsx

@@ -1,39 +1,44 @@
 import { EventSourcePolyfill } from 'event-source-polyfill';
-import { useEffect } from 'react';
+import { useEffect, useRef } from 'react';
 
 import useAuthStore from '@/stores/authStore';
 
 export const useServerSentEvents = () => {
   const accessToken = useAuthStore.getState().accessToken;
+  const sourceRef = useRef<EventSourcePolyfill | null>(null);
 
   useEffect(() => {
-    if (!accessToken) return console.log('구독 연결 실패');
-
-    let source: EventSourcePolyfill | null = null;
+    if (!accessToken) {
+      console.log('로그인 정보 확인불가');
+      return;
+    }
 
     const connectSSE = () => {
       try {
         console.log('구독 시작');
-        source = new EventSourcePolyfill(`${import.meta.env.VITE_API_URL}/api/notifications/sub`, {
-          headers: {
-            Authorization: `Bearer ${accessToken}`,
+        sourceRef.current = new EventSourcePolyfill(
+          `${import.meta.env.VITE_API_URL}/api/notifications/sub`,
+          {
+            headers: {
+              Authorization: `Bearer ${accessToken}`,
+            },
           },
-        });
+        );
 
-        source.onmessage = (payload) => {
-          console.log(payload);
+        sourceRef.current.onmessage = (event) => {
+          console.log(event);
           console.log('알림 전송');
         };
 
-        source.addEventListener('notification', (event) => {
-          console.log(event);
-          console.log('알림 전송 dd');
-        });
+        // sourceRef.current.addEventListener('notification', (event) => {
+        //   console.log(event);
+        //   console.log('알림 전송 dd');
+        // });
 
-        source.onerror = (error) => {
+        sourceRef.current.onerror = (error) => {
           console.log(error);
           console.log('에러 발생함');
-          source?.close();
+          sourceRef.current?.close();
           // 재연결 로직 추가 가능
           setTimeout(connectSSE, 5000); // 5초 후 재연결 시도
         };
@@ -45,7 +50,16 @@ export const useServerSentEvents = () => {
     connectSSE();
 
     return () => {
-      source?.close();
+      console.log('컴포넌트 언마운트로 인한 구독해제');
+      closeSSE();
     };
   }, [accessToken]);
+
+  // 바깥으로 보낼 closeSSE 함수
+  const closeSSE = () => {
+    sourceRef.current?.close();
+    sourceRef.current = null;
+  };
+
+  return { closeSSE };
 };

src/stores/sseStore.ts

@@ -0,0 +1,55 @@
+import { EventSourcePolyfill } from 'event-source-polyfill';
+import { create } from 'zustand';
+
+import useAuthStore from '@/stores/authStore'; // 액세스 토큰을 가져올 Zustand 스토어
+
+interface SSEState {
+  messages: string[];
+  connectSSE: () => void;
+  closeSSE: () => void;
+}
+
+export const useSSEStore = create<SSEState>((set, get) => {
+  let source: EventSourcePolyfill | null = null; // SSE 인스턴스 저장
+
+  return {
+    messages: [],
+
+    connectSSE: () => {
+      const accessToken = useAuthStore.getState().accessToken; // authStore에서 변수 가져오기
+      if (!accessToken) {
+        console.log('엑세스 토큰이 존재하지 않습니다. 구독 불가');
+        return;
+      }
+
+      console.log('🟢 SSE 구독 시작');
+
+      // 기존 SSE 연결 종료
+      get().closeSSE();
+
+      // 새로운 SSE 연결 생성
+      source = new EventSourcePolyfill(`${import.meta.env.VITE_API_URL}/api/notifications/sub`, {
+        headers: { Authorization: `Bearer ${accessToken}` },
+      });
+
+      source.onmessage = (event) => {
+        console.log('SSE 메시지 수신:', event.data);
+        set((state) => ({ messages: [...state.messages, event.data] })); // 메시지 전역 저장
+      };
+
+      source.onerror = (error) => {
+        console.log('SSE 오류 발생:', error);
+        get().closeSSE();
+        setTimeout(() => get().connectSSE(), 5000); // 5초 후 재연결
+      };
+    },
+
+    // 🔥 SSE 종료 함수 (로그아웃 시 실행)
+    closeSSE: () => {
+      console.log('SSE 수동 종료');
+      source?.close();
+      source = null;
+      set({ messages: [] }); // 상태 초기화
+    },
+  };
+});