1. SSE로 실시간 알람 구현하기
- SSE로 실시간 알람 구현하는 것에 대한 간단한 공부를 했었다. 공부를 통해 접한 내용을 실제 프로젝트로 구현해보는 시간을 가졌다.
- 백엔드로부터 받은 API로 통해 새로운 EventSource를 생성하여 받아와야한다.
let eventSource;
const fetchSse = async () => {
try {
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을 통해 찾을 수 있다.