'Comet'에 해당되는 글 1건

  1. 2012.03.16 HTML5 Server Sent Events 맛보기.

HTML5 Server Sent Events 맛보기.

ITWeb/개발일반 2012. 3. 16. 12:27
항상 그렇지만.. 저는 기본 문서 부터 봅니다..

[참고사이트]


[EventSource Interface]

[Constructor(DOMString url, optional EventSourceInit eventSourceInitDict)]
interface EventSource : EventTarget {
  readonly attribute DOMString url;
  readonly attribute boolean withCredentials;

  // ready state
  const unsigned short CONNECTING = 0;
  const unsigned short OPEN = 1;
  const unsigned short CLOSED = 2;
  readonly attribute unsigned short readyState;

  // networking
  [TreatNonCallableAsNull] attribute Function? onopen;
  [TreatNonCallableAsNull] attribute Function? onmessage;
  [TreatNonCallableAsNull] attribute Function? onerror;
  void close();
};

dictionary EventSourceInit {
  boolean withCredentials = false;
};



[Event Stream]
- 중요하다고 싶은 것만... 

Streams must be decoded as UTF-8

If the line is empty (a blank line)

Dispatch the event, as defined below.

If the line starts with a U+003A COLON character (:)

Ignore the line.

If the line contains a U+003A COLON character (:)

Collect the characters on the line before the first U+003A COLON character (:), and let field be that string.

Collect the characters on the line after the first U+003A COLON character (:), and let value be that string. If value starts with a U+0020 SPACE character, remove it from value.

Process the field using the steps described below, using field as the field name and value as the field value.

Otherwise, the string is not empty but does not contain a U+003A COLON character (:)

Process the field using the steps described below, using the whole line as the field name, and the empty string as the field value.

Once the end of the file is reached, any pending data must be discarded. (If the file ends in the middle of an event, before the final empty line, the incomplete event is not dispatched.)


The steps to process the field given a field name and a field value depend on the field name, as given in the following list. Field names must be compared literally, with no case folding performed.

If the field name is "event"

Set the event name buffer to field value.

If the field name is "data"

Append the field value to the data buffer, then append a single U+000A LINE FEED (LF) character to the data buffer.

If the field name is "id"

Set the last event ID buffer to the field value.

If the field name is "retry"

If the field value consists of only characters in the range U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9), then interpret the field value as an integer in base ten, and set the event stream's reconnection time to that integer. Otherwise, ignore the field.

Otherwise

The field is ignored.



[Event Stream onmessage Event - data]

[Case 1]

data: 1

data: 2


data: 3


[Case 1's onmessage]

- onmessage 이벤트는 두번처리 됩니다.

- data: 1, data: 2 를 묶어서 하나의 이벤트로 그리고 data: 3 을 또 다른 이벤트로 처리 합니다.

- 결국,  empty line 이 없이 바로 연결된 경우는 data buffer 에 메시지가 함께 들어가게 되는 구조 입니다.

- 다른 버퍼에 담아서 이벤트를 분리 하고 싶다면 개행을 두번 해주시면 됩니다.  


[Case 2]

data: 1

data: 2 

 
[Case 2's onmessage]

이미 위에서 설명한 것 처럼 두번의 onmessage 이벤트가 발생 합니다. 



[Event Stream onmessage Event - event] 
- 별도 이벤트를 등록하기 위한 방법입니다.

[event stream 구조]
- wakeup 이라는 이벤트가 발생하도록 메시지를 전달 합니다.

event: wakeup

data: 12345678


[event 추가]
- DOM Event 처리랑 동일 합니다.
- 전달 받은 data buffer 의 12345678 은 event.data 에 전달 되고 onwakeup 이벤트가 발생하게 됩니다.

var eventSource = new EventSource('http://192.168.1.2/sse.html');


eventSource.addEventListener('wakeup', onwakeup, false);


function onwakeup (event) {

console.log("onwakeup");

console.log(event.data);

} 



[Event Stream onmessage Event - id]

이 넘은 불행하게도 아직 고려중인 듯 합니다. 



[text/event-stream]


※ 추가적으로 CORS 관련 문제는 이전에 작성한 PostMessage API 를 참고 하시면 좋을 것 같습니다.

: