TIL68-01 SSE로 실시간 알람 실제로 구현하기

1. SSE로 실시간 알람 구현하기

• SSE로 실시간 알람 구현하는 것에 대한 간단한 공부를 했었다. 공부를 통해 접한 내용을 실제 프로젝트로 구현해보는 시간을 가졌다.
• 백엔드로부터 받은 API로 통해 새로운 EventSource를 생성하여 받아와야한다.

 let eventSource;
    const fetchSse = async () => {
        try {
            //EventSource생성.
            eventSource = new EventSourcePolyfill(
                `${process.env.REACT_APP_BASE_URL}api/notificaiton/`,
                {
                    headers: {
                        Authorization: `Bearer ${token}`,
                    },
                }
            );

            eventSource.onmessage = async function (event) {
               if (event.data !== `EventStream Created. [userId=${username.id}]`) {
                    setAlarm(true);
                }
            };
        } catch (error) {
            if (eventSource) eventSource.close();
        }
    };

• API를 통해 서버와의 통신이 성공하면 eventSource로 실시간 Data가 들어오고, onmessage 매서드를 통해 메세지를 받아온다.
• 현재 진행중인 프로젝트에서는 메세지가 들어올 때 메세지를 모달이나 팝업으로 보여주는 것이 아닌 알림 아이콘에 알림이 있다는 표시를 해주기 때문에 data가 들어올 때 Alarm 표시가 작동하도록 구현하였다.

2. 읽지 않은 알람이 있을

  useEffect(() => {
        if (token) {
            fetchSse();
            dispatch(__getAlarm());
            return () => {
                eventSource && eventSource.close();
            };
        }
    }, [isOpen]);

    useEffect(() => {
        const unreadAlarms = data?.alarm?.data?.some((item) => !item.readStatus);
        setAlarm(unreadAlarms);
    }, [data]);

• 위의 useEffect를 통해 로그인했을 때만 마운트 됐을 때 렌더링 되도록 조건을 달았고, 알람 데이터 역시 dispatch(__getAlarm())을 통해 렌더링 하여 데이터를 받아오도록 했다.
• 실시간으로 알람이 들어오면 알람표시가 생기지만, 알람 페이지에서 안읽은 메세지가 있을 시 알람표시가 유지 되어야 했다. 그래서 some 매서드를 통해 get해 온 알람 데이터 안에 읽지 않은 알람이 하나라도 있다면, 알람표시가 있도록 코드를 구성하였다.

정리

• SSE를 통한 알람 구현은 EventSourcePolyfill()을 통해 새로운 이벤트소스를 통해 API와 연결한다.
• 이벤트소스 안의 데이터값을 이용해 실시간 알람을 출력한다.
• 안 읽은 알람은 some을 통해 찾을 수 있다.