[졸업작품 회고 -3] sse로 알림 전송받기

이번 프로젝트에서는 알림 시스템을 사용하기 위해 sse를 사용하였다.

오류의 배경

메인페이지가 있고, 메일컴포넌트가 있었다.
메인페이지에서 sse 구독을 하고, 메일컴포넌트에서 sse 알림을 리스너하도록 했는데, 연결 후 핑이 잘 오는 것은 확인되지만 실질적인 데이터는 오지 않았다.

이것의 문제점은 바로
내 방식처럼 따로 다른 컴포넌트에 코드를 작성하게 되면 리스너가 등록되기 전에 데이터가 전송되어 클라이언트에서 확인이 불가능하다는 것이었다..!!!

해결

그래서 메인 페이지에서 sse 구독 및 리스너까지 하고, 메일컴포넌트에는 props로 데이터를 넘겨주는 것으로 수정했다.

useEffect(() => {
        if (!userId) return;
      
        const source = new EventSourcePolyfill(`${SERVER_URL}/sse/subscribe/${userId}`, {
          withCredentials: true,
        }); //eventsourcepolyfill에서는 withCredential을 따로 설정해서 보내주어야한다!
      
        source.onopen = () => {
          console.log("✅ SSE 연결 성공!");
        };
    
        source.addEventListener("init", (event) => {
            console.log("🟢 연결 메시지 (init):", event.data); // "connected"
        });

        source.addEventListener("onetime_event", (event) => {
            console.log("📨 수신된 데이터:", event.data);
            if (!event.data) {
                console.log("⚠️ onetime_event에 data가 없습니다:", event);
                return;
            }
            const newAlarms = JSON.parse(event.data);

            setAlarmList((prev) => [...new Set([...prev, ...newAlarms])]);
            setOneTimeAlarmList((prev) => [...new Set([...prev, ...newAlarms])]); 
            setHasReceivedOneTimeEvent(true);
            console.log(oneTimeAlarmList, hasReceivedOneTimeEvent, postNextChapterCalled);
        });

        source.addEventListener("regular_event", (event) => {
            console.log("📨 수신된 데이터:", event.data);
            if (!event.data) {
                console.log("⚠️ regular_event에 data가 없습니다:", event);
                return;
            }
            setAlarmList((prev) => [...new Set([...prev, ...JSON.parse(event.data)])]);
            

        });

        return () => source.close();
    }, [userId]);

데이터가 잘 오는것이 확인되었다!