March 12th, 2022

SSE(Server-Sent Events)

일반적으로 웹 페이지에서 서버에 데이터를 요청하는 전통적인 방식의 HTTP 프로토콜이지만, 서버가 웹 페이지에 메시지를 푸시할 수 있다. 즉, 서버에서 사용자에게 데이터를 보내는 방식이 가능하다. 수신된 메시지는 이벤트+데이터로 처리될 수 있다.

SSE는 웹 소켓과 거의 동일하게 작동하며, 소켓과 달리 단방향 통신만 가능하다.

const evtSource = new EventSource("ssedemo.php");

evtSource.onmessage = function(event) {
  const newElement = document.createElement("li");
  const eventList = document.getElementById("list");

  newElement.textContent = "message: " + event.data;
  eventList.appendChild(newElement);
}

React Native 모바일 플랫폼에서는 폴리필로 구현된 EventSource 라이브러리를 이용할 수 있다.

GitHub - boy672820/reactnative-sse: React native SSE 테스트, react-native-sse 사용

React Native에서 EventSource 사용

MDN 참조: https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events

Nest.js에서 제공하는 SSE

// controller
@Sse('sse')
sse(): Promise<Observable<unknown>> {
  const receive = await this.userService.subscribeCreatedUser();

  return receive;
}

nest.js에서 핸들러에 @Sse() 데코레이터를 추가하면 간단하게 구현할 수 있다.

또한 이벤트 방식으로 구현하면 클라이언트에서 데이터 변경에 따른 감시를 할 수 있다. eventEmitter 로 간단하게 구현할 수 있다.

// provider
import EventEmitter from 'events';

export const userProviders = [
  {
    provide: 'EVENT_EMITTER',
    useValue: new EventEmitter(),
  },
];

// service
import { fromEvent, Observable } from 'rxjs';

...

subscribeCreatedUser(): Observable<unknown> {
  return fromEvent(this.eventEmitter, 'USER.CREATED');
}