Server-Sent Events

서버-센트 이벤트 (Server-Sent Events, SSE)는 클라이언트가 HTTP 연결을 통해 서버로부터 자동 업데이트를 수신하는 서버 푸시 기술입니다. 각 알림은 새 줄로 끝나는 텍스트 블록으로 전송됩니다. 자세한 내용

Usage

SSE를 사용하려면 컨트롤러 클래스 내에서 등록된 경로 (route)에서 메서드 핸들러를 @Sse() 데코레이터로 주석 처리합니다.

@Sse('sse')
sse(): Observable<MessageEvent> {
  return interval(1000).pipe(map((_) => ({ data: { hello: 'world' } })));
}

Hint!
@Sse() 데코레이터와 MessageEvent 인터페이스는 @nestjs/common에서 가져옵니다.
Observable, interval 및 map은 rxjs 패키지에서 가져옵니다.

Warning!
SSE 경로는 Observable 스트림을 반환해야 합니다.

위 예에서는 SSE를 통해 실시간 업데이트를 전파하는 sse라는 경로를 정의했습니다.
이러한 이벤트는 EventSource API를 사용하여 수신할 수 있습니다.

sse 메서드는 여러 개의 MessageEvent를 발생시키는 Observable을 반환합니다.
이 예에서는 매 초마다 새로운 MessageEvent를 발생시킵니다. MessageEvent 객체는 다음과 같은 인터페이스를 준수해야 합니다.

export interface MessageEvent {
  data: string | object;
  id?: string;
  type?: string;
  retry?: number;
}

이렇게 설정한 후에는 EventSource 클래스의 인스턴스를 생성하여 클라이언트 측 애플리케이션에서 위의 @Sse() 데코레이터에 전달한 /sse경로를 생성자 인수로 전달합니다.

EventSource 인스턴스는 HTTP 서버로 지속적인 연결을 열고, 이벤트를 text/event-stream 형식으로 전송합니다. 연결은 EventSource.close()를 호출하여 닫을 때까지 열려 있습니다.

연결이 열리면 서버에서 오는 메시지가 이벤트 형식으로 코드로 전달됩니다. 메시지에 event 필드가 있는 경우 트리거된 이벤트는 event 필드의 값과 동일합니다. event 필드가 없으면 일반 message 이벤트가 발생합니다.

질문 및 생각

• Observable : Observable은 ReactiveX 라이브러리에서 유래한 개념으로, 비동기 데이터 스트림을 나타내는 자료 구조다. Observable은 데이터 스트림을 관찰하고 데이터가 흐를 때 관찰자에게 알린다. 이는 비동기 이벤트 처리, HTTP 요청, 사용자 입력과 같은 다양한 상황에서 유용하게 사용된다. Angular, RxJS와 같은 프레임워크 및 라이브러리에서도 Observable을 널리 사용한다.

  특징
  비동기적으로 데이터 스트림을 생성하고 처리합니다.
  여러 데이터 항목을 발행(emit)할 수 있으며, 시간에 따라 변할 수 있습니다.
  데이터 스트림의 상태를 관찰할 수 있으며, 에러 및 완료 이벤트도 관찰할 수 있습니다.

• MessageEvent : MessageEvent는 JavaScript에서 사용되는 이벤트 객체의 하나로, 웹 소켓 (WebSocket) 및 Server-Sent Events (SSE)와 같은 통신 프로토콜을 통해 수신되는 메시지를 나타낸다. 웹 브라우저와 서버 간의 통신에서 메시지를 수신하거나 전달할 때 사용된다.
  주로 웹 소켓을 사용하여 실시간 통신을 구현하거나 SSE를 통해 서버로부터 실시간 업데이트를 받을 때 MessageEvent 객체가 생성되고 사용된다.

  포함 속성
  data: 메시지 데이터를 나타내는 속성으로, 문자열 또는 다른 데이터 형식일 수 있습니다.
  type: 메시지 유형을 식별하는 속성으로, 일반적으로 문자열로 정의됩니다.
  origin: 메시지를 보낸 출처(Origin)를 나타내는 속성으로, 보안상의 이유로 사용됩니다.