react-SSE
SSE(Server Sent Event)란 서버에서 클라이언트로 데이터를 보내는 단방향 통신을 의미한다.
실시간 알림처럼 서버가 클라이언트에게 데이터를 '단방향'으로 전달해야 할 때 사용한다.
websocket과 달리 별도의 프로토콜 없이 HTTP 프로토콜 만으로 사용 가능하고 훨씬 가볍다.
SSE vs. HTTP 통신
SSE는 서버와 클라이언트의 연결 상태를 유지하고, 서버는 클라이어트에게 지속적으로 데이터를 전송할 수 있다.
HTTP 통신은 하나의request-response과정을 거치면 연결을 종료한다. (stateless)
EventSource
서버와 클라이언트 간 SSE 통신을 하려면 처음에 클라이언트에서 서버로 연결 요청을 보내야 한다.
EventSource는 SSE 연결 요청을 보내기 위해 JavaScript가 제공하는 객체이며, SSE Client API는 EventSource 객체에 포함된다.
EventSource는 text/event-stream 포맷으로 이벤트를 전송하는 HTTP 서버에 지속적으로 연결되고, 연결은 EventSource.close() 호출로 종료되기 전까지 지속된다.
EventSource의 이벤트 핸들러
EventSource.onopen : 서버와 연결이 open되었을 때 호출하는 이벤트 핸들러
EventSource.onmessage : 서버로부터 message를 수신했을 때 호출하는 이벤트 핸들러
EventSource.onerror : 에러가 발생하거나 EventSource 객체에서 error event가 감지되었을 때 호출하는 이벤트 핸들러
헤더를 수정하기 위해 event-source-polyfill 라이브러리를 사용했다.
useEffect(() => {
if (TOKEN !== '') {
const EventSource = EventSourcePolyfill || NativeEventSource;
/* 1. SSE 로 알림 기능 구현 */
if (isLogin) {
eventSource.current = new EventSource(
`http://localhost:8080/subscribe`,
{
headers: {
Authorization: TOKEN,
},
heartbeatTimeout: 600000,
withCredentials: true,
}
);
eventSource.current.onmessage = (event: any) => {
console.log('요기지룡!', event.data);
// setAlarmList(event.data.notifications);
// setUnreadCount(event.data.unreadCount);
};
eventSource.current.onopen = (event: any) => {
console.log('open', event);
};
eventSource.current.onerror = (event: any) => {
console.log('에러');
};
}
return () => eventSource.current?.close();
}
}, [TOKEN, isLogin]);참고
