Marimba 에서 개발을 하면서 Server Sent Event 를 사용할 기회가 생겨서 사용 방법에 대해 정리해봅니다! 다들 Marimba 한번 써보세요~~:)
Client(Front-End, Mobile App) 등에서 실시간 정보를 가져오기 위해서는 Long Polling, WebSocket, Server Sent Event 와 같은 방법을 사용합니다.
- Long Polling
- Client 에서 계속 서버로 요청을 보내서 데이터를 가져오는 방법 - WebSocket
- 양방향 채널(Server ↔ Client)을 구성하여 데이터를 주고/받는 방법 - Sever Sent Event
- 단방향 채널(Sever → Client)을 열어 데이터를 스트리밍 하는 방법
프로젝트에서는 간단한 동기화 작업이 필요했기 때문에 Long Polling, WebSocket 보다 가벼운 Server Sent Event 를 적용 하기로 하였습니다.
Server Sent Event (server push) ?
Sever Sent Event 는 서버와 클라이언트 사이에 단방향 채널(Sever → Client)을 열고, 이 채널을 이용하여 데이터를 스트리밍 하는 기술입니다. Client 에서 변경된 데이터를 가져오기 위해서는 페이지를 새로고침하거나 Long/Short Polling 또는 Web Socket 등을 이용해야 했습니다. 하지만 Sever Sent Event 를 이용하면 Long/Short Polling, WebSocket 보다 적은 비용으로 Client 에서 변경된 데이터를 가져올 수 있습니다.
이렇게 적은 비용이 드는 이유는 Sever Sent Event 가 HTTP API 만으로 동작되며 구현도 간단하기 때문에 Sever, Client 에 쉽게 적용 할 수 있기 때문입니다.
(* Topic 을 정하고 데이터를 구독할 수 있음)
[Server Sent Event 특징]
- Opera 9 에서 Server-Sent DOM Events라는 것을 기반으로 함
- 브라우저는 서버가 생성 한 Stream 을 계속 받음(Server 에서 보내는 Stream 으로 Read Only)
- Connection 유지를 위해 HTTP protocol 을 사용, HTTP/2를 통한 multiplexing 사용 가능
- 연결이 끊어지면 EventSource가 오류 이벤트를 발생시키고 자동으로 다시 연결을 시도(error recovery)
- 표준 기술로 IE 를 제외한 브라우저 대부분을 지원(Polly
Server Sent Event (server push) 를 사용하는 곳은?
- 효율적인 단방향 통신이 필요한 경우
- 실시간 데이터 스트림밍에 HTTP 를 사용하려는 경우(ReatFul 의 GET method 와 유사)
- 사용 되는 예
- 암호 화폐 또는 주가 피드 구독
- Twitter 피드 구독
- 라이브 스포츠 점수 받기
- 뉴스 업데이트 또는 알림
Server Sent Event Example
- node express + react.js 기준
- 전체 코드 : https://github.com/jjeaby/sever-sent-event-example
[ Server - Node Express ]
1. Server Send Event 를 위한 라이브러리를 설치합니다. ssestream 을 1.0.0 이상의 최신 버전에는 “TypeError: SseStream is not a constructor” 에러가 발생하므로 1.0.0 버전을 설치해야 합니다.
$ npm install express body-parser ssestream@1.0.0 --save
2. Server Sent Event 를 위한 Node Express Server 를 구성합니다.
이렇게 구성한 Server Sent Server 를 실행하고 브라우저로 http://localhost:5000/sse/time 으로 접속하면 1초 간격으로 현재 시간을 받아오는 것을 볼 수 있습니다.(* 헤더 정보는 브라우저에서 셋팅 되어 있지 않으므로 보이지 않습니다.) 이렇게 Server Sent Event 서버 구성이 완료 되었습니다~!
[ Client - React.JS ]
1. create-react-app 명령어로 server-sent-event-example 프로젝트를 구성합니다.
2. Server 에서 구성한 sseStream 을 받기 위핸 Event Source 라이브러리를 추가 설치합니다.
- 기본 제공하는 eventsource 는 header 를 설정 할 수 없어 npm 을 이용해서 eventsource 를 설치합니다.
$ npm install eventsource --save
3. Server Sent Event 를 가져오는 코드를 작성하기 위해 App.js 를 아래와 같이 변경합니다.
- eventSourceInitDict = { headers: { “auth-user” : “bearer 123123123123”} } 와 같은 방식으로 header 에 원하는 값을 설정하여 보낼 수 있습니다.
4. Server Sent Event 를 위한 Server, Client 구성이 완료 되었습니다. 이제, 브라우저로http://localhost:3000 을 접속하면 3번 App.js 에서 설정한 “auth-user”: “bearer 123123123123” 와 현재 시간이 화면에 보여집니다.
이렇게 아주 손쉽게 Server Sent Event 를 구성해 보았습니다. :) 혹시나 Long Polling, WebSocket 보다 적은 비용으로 Server Push 를 사용하고 싶다면 Sever Sent Event 를 사용하는것은 어떨까요? 그럼 즐거운 개발 세발~~~:)
