[리액트] React에서 Server-Sent Events(SSE)를 통한 실시간 알림 구현하기

💌 SSE(Server Sent Event)란?

Server-Sent Events(SSE) 란, 실시간으로 서버에서 클라이언트로 데이터를 보내는 단방향 통신을 의미한다.

SSE는 클라이언트가 서버에 연결 상태를 유지하면, 서버가 클라이언트에 지속적으로 데이터를 전송할 수 있다. 

 

🌈 실시간 통신 기술들

- 웹소켓(WebSocket): 실시간 양방향 데이터 통신을 제공하는 프로토콜으로 서버와 브라우저가 지속적으로 연결된 TCP라인을 통해 실시간 데이터를 주고받을 수 있도록  한다. 연결지향 양방향 통신이 가능하며 채팅, 게임 등에 사용된다. polling은 주기적으로 HTTP 요청을 수행하지만 webSocket은 연결을 유지하여 서버와 클라이언트 간 양방향 통신이 가능하다.
- Long Polling: 클라이언트가 서버에게 요청을 보내고, 서버는 새로운 데이터가 준비될 때까지 연결을 유지한 다음 응답을 보내는 방식으로 지속적인 HTTP 요청이 발생하기 때문에 리소스 낭비가 발생한다.

 

🎇EventSource 객체의 속성

• onmessage: 기본 메시지가 왔을 때 호출
• onopen: 접속이 맺어졌을 때 호출
• onerror: 오류 발생 시 호출 & 종료시점에도 호출

EventSource의 addEventListener()를 사용하면 위 3개의 이벤트뿐만 아니라 따로 지정된 이벤트의 데이터도 받아 처리할 수 있다.

 

⭐ 프로젝트에서 실시간 알림 구현하기

• 어디서 SSE연결을 해야할까?
  ➡️ 로그인 후 어디서든 실시간으로 알림을 수신해야 하므로 Header에서 하기로 함!

  const Access_key = sessionStorage.getItem("Access_key");
  const Refresh_key = sessionStorage.getItem("Refresh_key");

  useEffect(() => {
    if (isLoggedIn) {
      try {
        const fetchSse = async () => {
          const eventSource = new EventSource(
            `https://moment-backend.shop/sse/chat/alarm/${userId}`,
            {
              headers: {
                ACCESS_KEY: `${Access_key}`,
                REFRESH_KEY: `${Refresh_key}`,
              },
              withCredentials: true,
            }
          );
          eventSource.addEventListener("chatAlarm-event", (event) => {
            const eventData = JSON.parse(event.data);
            console.log("Received event:", eventData);
          });
        };
        fetchSse();
      } catch (error) {
        throw error;
      }
    }
  }, [isLoggedIn]);