EventSource를 사용해 React에서 SSE 스트림 소비하기

new EventSource(url)은 지정된 URL에 SSE 연결을 생성합니다. 브라우저는 즉시 Accept: text/event-stream 헤더가 포함된 HTTP GET 요청을 엽니다. 서버는 이 연결을 열린 상태로 유지하면서 이벤트를 스트리밍합니다. EventSource는 브라우저에 기본 제공되는 API이므로 기본적인 사용에는 라이브러리가 필요하지 않습니다.

EventSource에는 세 가지 준비 상태가 있습니다. 0 (CONNECTING)은 연결을 설정하거나 다시 설정하는 중임을, 1 (OPEN)은 연결이 설정되어 이벤트가 흐르고 있음을, 2 (CLOSED)는 연결이 닫혀 다시 연결되지 않음을 나타냅니다. 현재 상태를 확인하려면 eventSource.readyState를 확인합니다.

eventSource.onmessage 처리기는 명시적인 이벤트 유형이 없는 서버 이벤트에 대해 실행됩니다(서버가 event: 필드 없이 data: ...를 보냅니다). 처리기는 이벤트 객체를 받으며, 여기서 event.data는 문자열 페이로드입니다. 서버는 일반적으로 데이터를 JSON.stringify하여 전송하므로, 수신할 때 JSON.parse하면 됩니다.

서버는 이름이 지정된 이벤트를 보낼 수 있습니다: event: userJoined data: {"userId": "123"} . 브라우저에서는 eventSource.addEventListener('userJoined', handler)로 수신합니다. 이렇게 하면 하나의 SSE 연결에서 여러 이벤트 유형을 다중화할 수 있습니다. 각 이벤트 유형에 자체 처리기를 지정할 수 있어 코드가 깔끔하고 체계적으로 구성됩니다.

SSE 데이터는 문자열로 도착합니다. 구조화된 데이터의 경우 서버가 JSON.stringify(payload)를 사용하여 보내고, 클라이언트는 다음과 같이 구문 분석합니다: const data = JSON.parse(event.data). 서버에서 잘못된 JSON이 도착하더라도 정상적으로 처리할 수 있도록 JSON.parse는 항상 예외 처리 블록으로 감싸야 합니다. 오류를 기록하고 잘못된 이벤트는 건너뜁니다.

EventSource는 useEffect 안에서 생성하고 닫습니다. 컴포넌트가 마운트될 때 연결을 만들고, 이벤트 처리기를 연결한 다음, eventSource.close()를 호출하는 정리 함수를 반환합니다. 정리하지 않으면 컴포넌트가 마운트 해제되거나 사용자가 다른 화면으로 이동할 때, 또는 효과가 다른 종속 항목으로 다시 실행될 때 연결이 누수됩니다.

eventSource.onmessage 처리기 안에서 새 데이터를 반영하도록 React 상태를 업데이트합니다: setMessages(prev => [...prev, JSON.parse(event.data)]). 오래된 클로저 문제를 피하려면 setState의 함수형 형식을 사용합니다. 이벤트 처리기는 초기 상태 값을 캡처하지만, 함수형 업데이트를 사용하면 항상 최신 상태를 기준으로 업데이트할 수 있습니다.

EventSource는 네트워크 오류나 서버 재시작으로 연결이 끊기면 자동으로 다시 연결합니다. 브라우저는 잠시 대기한 후 다시 연결합니다. 대기 시간은 보통 3초이며, 스트림의 retry: 3000을 통해 서버에서 설정할 수 있습니다. 재연결 로직을 직접 구현할 필요가 없습니다. EventSource API에 내장되어 있습니다.

EventSource는 마지막으로 수신한 이벤트 ID를 추적합니다. 이 ID는 서버가 스트림에서 id: 123을 사용해 설정합니다. 다시 연결할 때 브라우저는 이 ID를 Last-Event-ID HTTP 헤더에 자동으로 전송합니다. 잘 설계된 서버는 이 ID를 사용해 누락된 이벤트를 다시 전송하므로, 재연결 중에도 이벤트가 손실되지 않습니다.

EventSource는 사용자 지정 헤더를 직접 지원하지 않습니다. 인증에는 쿠키를 사용하거나(new EventSource(url, { withCredentials: true })를 사용하면 쿠키가 전송됩니다), 인증 토큰을 URL 쿼리 매개변수로 포함하십시오. Authorization 헤더가 필요하다면 EventSource 대신 ReadableStream과 Fetch API를 사용해 SSE 응답을 직접 처리하십시오.

EventSource에서 오류가 발생하면 onerror 처리기가 실행됩니다. readyState는 다시 시도하는 경우 CONNECTING이 되고, 그렇지 않은 경우 CLOSED가 됩니다. onerror에서 readyState를 확인하여 일시적인 네트워크 오류인지(자동으로 다시 시도됨), 영구적인 실패인지(서버가 200이 아닌 상태를 반환함) 구분하십시오. 영구적인 오류가 발생하면 연결을 닫고 사용자에게 알리십시오.

네트워크 오류로 EventSource 연결이 끊기면 어떻게 되나요?

new EventSource(url)은 readyStates인 CONNECTING, OPEN, CLOSED를 사용하는 SSE 연결을 생성합니다. onmessage는 일반 이벤트를 처리하고, addEventListener는 이름이 지정된 이벤트 유형을 처리합니다. JSON.parse(event.data)는 구조화된 페이로드를 추출합니다. useEffect에서 EventSource를 생성하고 정리하십시오. 자동 재연결 기능이 내장되어 있으므로 네트워크 오류가 발생하면 EventSource가 Last-Event-ID를 사용해 누락된 이벤트를 다시 전송하며 재시도합니다. 쿠키(withCredentials) 또는 URL 쿼리 매개변수를 사용해 인증하십시오.