Server-Sent Events

* Server-Sent Events란?

- 보통 서버 측의 상태는 클라이언트가 능동적으로 액세스를 하지 않으면 알 수 없음.

- Server-Sent Events는 이러한 제한을 넘어서 서버 측의 상태 변화를 실시간으로 클라이언트에게 통지하기 위한 장치임.

 

웹 서버 ----------이벤트 스트림 (백그라운드) -------------> 웹 브라우저 ------------------------------------> 웹 서버

        서버 측의 상태 변화를 클라이언트에게 통지함.             일단 이벤트 스트림이 완료되면 클라이언트는 자동으로 다시 요청함.

 

- 이벤트 스트림은 통지 내용을 기술한 HTTP 리스폰스인데, 백그라운드에서 자동으로 계속 송수신됨.

- 이벤트 스트림의 송수신은 서버 측이 HTTP로 규정된 청크 송신을 지원하고 있는지에 따라 바뀜.

- 청크 송신에서 데이터는 수시로 추가될 때마다 송신되기 때문에 클라이언트는 리스폰스의 완료나 재리퀘스트를 기다리지 않고 통지를 받을 수 있음.

- 청크 송신에서는 'TransferEncoding:chunked' 헤더를 지정함.

 

 

[이벤트 스트림의 서식]

 

- 이벤트 스트림의 서식은 각 행이 '필드명:값'의 형식을 취하며 'event:', 'id:', 'data:', 'retry:'의 각 필드가 한 조로 하나의 이벤트를 나타냄.

- 빈 행을 끼워넣으면 아래의 이벤트가 됨.

- 필드는 모두 생략 가능함.

- id는 어느 이벤트까지 읽어 들일 것인지를 클라이언트 측에서 판단한 경우에 사용함.

 

: 콜론으로 시작하는 행은 주석행이 됩니다.  : 'event:' 필드에는 이벤트의 종류(명칭)를 임의로 작성합니다.  : 단, open과 error는 클라이언트 측에서 사용하고 있으므로 피하는 것이 좋습니다.  event:custom  : 'id:' 필드에는 이벤트의 ID를 지정합니다.  id:34  : 'data:' 필드에는 이벤트의 정보를 작성합니다.  : 여러 줄에 걸쳐 작성이 가능하며, 클라이언트 측에서 하나로 통합됩니다.  data: 데이터 행  data: 데이터 행  : 'retry:' 필드에는 클라이언트가 재접속할 간격을 밀리초로 지정합니다.  retry:300    : 공백 행을 주면 다음 이벤트를 작성하게 됩니다.  : 'event:' 행을 생략하면 'message' 이벤트가 됩니다.  data: 데이터 행    : 여기서부터 또 다른 이벤트가 시작됩니다.  event:custom_event_2  id:36

 

- 서버 측 애플리케이션은 클라이언트 측의 리퀘스트에 대해 이벤트 스트림을 반환함.

- 청크 송신의 경우, 하나의 리스폰스에 발생한 이벤트를 수시로 추가해 나가며, 그렇지 않은 경우는 일정한 수의 이벤트를 일괄적으로 송신함.

- 이벤트 스트림의 MIME 타입은 'text/event-stream'으로, 문자 코드는 UTF-8로 해야 됨.

 

 

* Server-Sent Events의 수신 방법

- 이벤트 스트림을 수신하려면 서버의 URL을 인수로 지정하여 EventSource 오브젝트를 생성해야 함.

- 생성된 EventSource 오브젝트는 이벤트 스트림의 수신을 시작하고, 서버가 보내주는 통지에 따라 처리할 이벤트를 그때그떄 발생시킴.

 

var evtSource = new EventSource("/server.cgi");

 

evtSource.onmessage = function(event) {    // 기본 이벤트 'message'에만 이벤트 핸들러 'onmessage'가 마련되어 있음.

// 이벤트에 부속된 데이터

// ('data:' 필드의 내용)를 구함.

var data = event.data;

// 이벤트의 종류(명칭)을 구함.

var type = event.type;

// 마지막으로 출현한 id 필드의 값을 구함.

var id = event.lastEventId;

}

 

- message 이벤트 외에는 이벤트 리스너를 등록하는 방법으로 핸들링함.

- addEventListener() 메서드의 제1인수에 이벤트명('event:' 필드의 값), 제2인수에 이벤트를 처리할 콜백을 지정함.

 

// 사용자 정의 이벤트의 이벤트 리스너 등록

evtSource.addEventListener("custom",

function(event) {

/*

이벤트의 처리 내용

*/

},

false);

 

 

[지원 상황]

 

	IE	Firefox	Opera	Safari	Chrome
Server-Sent Events	X	O	O	O	O

 

 

내용 출처 : HTML5가 보이는 그림책 (ANK Co., Ltd 저, 성안당)