JavaScript
서버가 보낸 이벤트

통사론

• 새 EventSource ( "api / stream");
• eventSource.onmessage = function (event) {}
• eventSource.onerror = function (event) {};
• eventSource.addEventListener = function (name, callback, options) {};
• eventSource.readyState;
• eventSource.url;
• eventSource.close ();

서버에 대한 기본 이벤트 스트림 설정

EventSource 객체를 사용하여 수신 서버 이벤트를 청취하도록 클라이언트 브라우저를 설정할 수 있습니다. 서버의 API enpoint에 대한 경로 문자열을 생성자에 제공하여 클라이언트를 서버 이벤트에 구독해야합니다.

예:

var eventSource = new EventSource("api/my-events");

이벤트는 분류되고 전송 된 이름을 가지며, 리스너는 각 이벤트를 이름으로 청취하도록 설정되어야합니다. 기본 이벤트 이름은 message 이며이를 청취하려면 적절한 이벤트 리스너 인 .onmessage

evtSource.onmessage = function(event) {
  var data = JSON.parse(event.data);
  // do something with data
}

위의 함수는 서버가 클라이언트에 이벤트를 푸시 할 때마다 실행됩니다. 데이터는 text/plain 보내집니다. JSON 데이터를 보내면 구문 ​​분석 할 수 있습니다.

이벤트 스트림 닫기

서버에 대한 이벤트 스트림은 EventSource.close() 메소드를 사용하여 닫을 수 있습니다.

var eventSource = new EventSource("api/my-events");
// do things ...
eventSource.close(); // you will not receive anymore events from this object

.close() 메서드는 스트림이 이미 닫혀 있으면 아무 작업도 수행하지 않습니다.

EventSource에 이벤트 리스너 바인딩

이벤트 리스너를 EventSource 객체에 바인딩하여 .addEventListener 메서드를 사용하여 여러 이벤트 채널을 수신 할 수 있습니다.

EventSource.addEventListener (name : String, 콜백 : 함수, [options])

name : 서버가 이벤트를 내보내는 채널의 이름과 관련된 이름입니다.

콜백 : 채널에 바인딩 된 이벤트가 발생할 때마다 콜백 함수가 실행되며 함수는 event 를 인수로 제공합니다.

options : 이벤트 리스너의 동작을 특성화하는 옵션입니다.

다음 예제는 서버의 하트 비트 이벤트 스트림을 보여 주며, 서버는 heartbeat 채널에서 이벤트를 전송하며,이 루틴은 허용 된 이벤트가있을 때 항상 실행됩니다.

var eventSource = new EventSource("api/heartbeat");
...
eventSource.addEventListener("heartbeat", function(event) {
  var status = event.data;
  if (status=='OK') { 
    // do something
  }
});