EventSource

EventSource 인터페이스는 server-sent events에 대한 웹 콘텐츠 인터페이스입니다. EventSource 인스턴스는 text/event-stream 포맷으로 이벤트를 보내는 HTTP 서버에 지속적인 연결을 합니다. 연결은EventSource.close() 호출로 종료되지 전까지 지속됩니다.

연결이 시작되었을 때, 서버로부터 들어오는 메세지들은 이벤트의 형태로 코드에 전달됩니다. 들어온 메시지에 이벤트 필드가 있다면, 트리거된 이벤트는 이벤트 필드의 값과 같게 됩니다. 만약 이벤트 필드가 비어있다면, 그 땐 제네릭 message 이벤트가 발생됩니다.

웹소켓과 다르게, server-sent 이벤트는 단방향입니다. 데이터 메시지가 서버에서 클라이언트로 (유저의 웹 브라우저 같은) 한 방향으로 전달되는 것입니다. 이 특징은 클라이언트에서 서버로 메시지 형태로 데이터를 보낼 필요가 없을 때, server-sent 이벤트를 훌륭한 선택으로 만든다. 예를 들어,  EventSource 는 소셜 미디어 상태 업데이트, 뉴스피드나 IndexedDB나 web storage같은 클라이언트-사이드 저장 매커니즘으로 데이터를 전달하는 데 유용한 접근법입니다.

Constructor

EventSource()
Creates a new EventSource to handle receiving server-sent events from a specified URL, optionally in credentials mode.

Properties

This interface also inherits properties from its parent, EventTarget.

EventSource.readyState Read only
A number representing the state of the connection. Possible values are CONNECTING (0), OPEN (1), or CLOSED (2).
EventSource.url Read only
A DOMString representing the URL of the source.
EventSource.withCredentials Read only
A Boolean indicating whether the EventSource object was instantiated with cross-origin (CORS) credentials set (true), or not (false, the default).

Event handlers

EventSource.onerror
Is an EventHandler called when an error occurs and the error event is dispatched on an EventSource object.
EventSource.onmessage
Is an EventHandler called when a message event is received, that is when a message is coming from the source.
EventSource.onopen
Is an EventHandler called when an open event is received, that is when the connection was just opened.

Methods

이 인터페이스는 부모인 EventTarget으로부터 메소드를 상속받고 있습니다.

EventSource.close()
Closes the connection, if any, and sets the readyState attribute to CLOSED. If the connection is already closed, the method does nothing.

예시

이 기초적인 예시에서, EventSource는 서버로 부터 받은 이벤트로 생성되었습니다; "sse.php"라는 이름을 가진 페이지는 이벤트를 생성할 책임이 있습니다.

var evtSource = new EventSource('sse.php');
var eventList = document.querySelector('ul');

evtSource.onmessage = function(e) {
  var newElement = document.createElement("li");

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

각각의 수신한 이벤트는 우리의  EventSource 객체의 onmessage 이벤트 핸들러가 실행되도록 합니다. 차례가 되었을 때, 새로운 <li> 요소를 생성하고, 메시지 데이터를 안에 작성합니다. 그 때, 문서에 이미 존재하는 ul 요소에 새로운 요소를 추가하게 됩니다.

Note: You can find a full example on GitHub — see Simple SSE demo using PHP.

Specifications

Specification Status Comment
HTML Living Standard
The definition of 'EventSource' in that specification.
Living Standard

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
EventSourceChrome Full support 6Edge No support NoFirefox Full support 6IE No support NoOpera Full support YesSafari Full support 5WebView Android Full support YesChrome Android Full support 18Firefox Android Full support 45Opera Android Full support 12Safari iOS Full support 5Samsung Internet Android ?
EventSource() constructorChrome Full support 9Edge No support NoFirefox Full support 6IE No support NoOpera Full support 11Safari Full support 5WebView Android Full support YesChrome Android Full support 18Firefox Android Full support 45Opera Android Full support 12Safari iOS Full support 5Samsung Internet Android ?
closeChrome Full support 6Edge No support NoFirefox Full support 6IE No support NoOpera Full support YesSafari Full support 5WebView Android Full support YesChrome Android Full support 18Firefox Android Full support 45Opera Android Full support 12Safari iOS Full support 5Samsung Internet Android ?
error eventChrome Full support 6Edge No support NoFirefox Full support 6IE No support NoOpera Full support YesSafari Full support 5WebView Android Full support YesChrome Android Full support 18Firefox Android Full support 45Opera Android Full support 12Safari iOS Full support 5Samsung Internet Android ?
message eventChrome Full support 6Edge No support NoFirefox Full support 6IE No support NoOpera Full support YesSafari Full support 5WebView Android Full support YesChrome Android Full support 18Firefox Android Full support 45Opera Android Full support 12Safari iOS Full support 5Samsung Internet Android ?
onerrorChrome Full support 6Edge No support NoFirefox Full support 6IE No support NoOpera Full support YesSafari Full support 5WebView Android Full support YesChrome Android Full support 18Firefox Android Full support 45Opera Android Full support 12Safari iOS Full support 5Samsung Internet Android ?
onmessageChrome Full support 6Edge No support NoFirefox Full support 6IE No support NoOpera Full support YesSafari Full support 5WebView Android Full support YesChrome Android Full support 18Firefox Android Full support 45Opera Android Full support 12Safari iOS Full support 5Samsung Internet Android ?
onopenChrome Full support 6Edge No support NoFirefox Full support 6IE No support NoOpera Full support YesSafari Full support 5WebView Android Full support YesChrome Android Full support 18Firefox Android Full support 45Opera Android Full support 12Safari iOS Full support 5Samsung Internet Android ?
open eventChrome Full support 6Edge No support NoFirefox Full support 6IE No support NoOpera Full support YesSafari Full support 5WebView Android Full support YesChrome Android Full support 18Firefox Android Full support 45Opera Android Full support 12Safari iOS Full support 5Samsung Internet Android ?
readyStateChrome Full support 6Edge No support NoFirefox Full support 6IE No support NoOpera Full support YesSafari Full support 5WebView Android Full support YesChrome Android Full support 18Firefox Android Full support 45Opera Android Full support 12Safari iOS Full support 5Samsung Internet Android ?
urlChrome Full support 6Edge No support NoFirefox Full support 6IE No support NoOpera Full support YesSafari Full support 5WebView Android Full support YesChrome Android Full support 18Firefox Android Full support 45Opera Android Full support 12Safari iOS Full support 5Samsung Internet Android ?
withCredentialsChrome Full support 6Edge No support NoFirefox Full support 6IE No support NoOpera Full support YesSafari Full support 5WebView Android Full support YesChrome Android Full support 18Firefox Android Full support 45Opera Android Full support 12Safari iOS Full support 5Samsung Internet Android ?
Available in workersChrome Full support YesEdge No support NoFirefox Full support 53IE No support NoOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 53Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android ?

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown

See also