1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
|
---
title: EventSource
slug: Web/API/EventSource
tags:
- API
- Communications
- EventSource
- Interface
- NeedsTranslation
- Reference
- Server Sent Events
- Server-sent events
- TopicStub
- messaging
translation_of: Web/API/EventSource
---
<div>{{APIRef("Server Sent Events")}}</div>
<p><span class="seoSummary"><strong><code>EventSource</code></strong> 인터페이스는 <a href="/en-US/docs/Web/API/Server-sent_events">server-sent events</a>에 대한 웹 콘텐츠 인터페이스입니다. <code>EventSource</code> 인스턴스는 <code>text/event-stream</code> 포맷으로 이벤트를 보내는 <a href="/en-US/docs/Web/HTTP">HTTP</a> 서버에 지속적인 연결을 합니다. 연결은</span>{{domxref("EventSource.close()")}}<span class="seoSummary"> 호출로 종료되지 전까지 지속됩니다.</span></p>
<p><span class="seoSummary">연결이 시작되었을 때, 서버로부터 들어오는 메세지들은 이벤트의 형태로 코드에 전달됩니다. 들어온 메시지에 이벤트 필드가 있다면, 트리거된 이벤트는 이벤트 필드의 값과 같게 됩니다. 만약 이벤트 필드가 비어있다면, 그 땐 </span>제네릭 {{event("message")}} 이벤트가 발생됩니다.</p>
<p><a href="/ko/docs/Web/API/WebSockets_API">웹소켓</a>과 다르게, server-sent 이벤트는 단방향입니다. 데이터 메시지가 서버에서 클라이언트로 (유저의 웹 브라우저 같은) 한 방향으로 전달되는 것입니다. 이 특징은 클라이언트에서 서버로 메시지 형태로 데이터를 보낼 필요가 없을 때, server-sent 이벤트를 훌륭한 선택으로 만든다. 예를 들어, <code>EventSource</code> 는 소셜 미디어 상태 업데이트, 뉴스피드나 <a href="/ko/docs/Web/API/IndexedDB_API">IndexedDB</a>나 <a href="/ko/docs/Web/API/Web_Storage_API">web storage</a>같은 <a href="/ko/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage">클라이언트-사이드 저장</a> 매커니즘으로 데이터를 전달하는 데 유용한 접근법입니다.</p>
<dl>
</dl>
<h2 id="Constructor">Constructor</h2>
<dl>
<dt>{{domxref("EventSource.EventSource", "EventSource()")}}</dt>
<dd>Creates a new <code>EventSource</code> to handle receiving server-sent events from a specified URL, optionally in credentials mode.</dd>
</dl>
<h2 id="Properties">Properties</h2>
<p><em>This interface also inherits properties from its parent, {{domxref("EventTarget")}}.</em></p>
<dl>
<dt>{{domxref("EventSource.readyState")}} {{readonlyinline}}</dt>
<dd>A number representing the state of the connection. Possible values are <code>CONNECTING</code> (<code>0</code>), <code>OPEN</code> (<code>1</code>), or <code>CLOSED</code> (<code>2</code>).</dd>
<dt>{{domxref("EventSource.url")}} {{readonlyinline}}</dt>
<dd>A {{domxref("DOMString")}} representing the URL of the source.</dd>
<dt>{{domxref("EventSource.withCredentials")}} {{readonlyinline}}</dt>
<dd>A {{domxref("Boolean")}} indicating whether the <code>EventSource</code> object was instantiated with cross-origin (<a href="/en-US/docs/Web/HTTP/CORS">CORS</a>) credentials set (<code>true</code>), or not (<code>false</code>, the default).</dd>
</dl>
<h3 id="Event_handlers">Event handlers</h3>
<dl>
<dt>{{domxref("EventSource.onerror")}}</dt>
<dd>Is an {{event("Event_handlers")}} called when an error occurs and the {{event("error")}} event is dispatched on an <code>EventSource</code> object.</dd>
<dt>{{domxref("EventSource.onmessage")}}</dt>
<dd>Is an {{event("Event_handlers")}} called when a {{event("message")}} event is received, that is when a message is coming from the source.</dd>
<dt>{{domxref("EventSource.onopen")}}</dt>
<dd>Is an {{event("Event_handlers")}} called when an {{event("open")}} event is received, that is when the connection was just opened.</dd>
</dl>
<h2 id="Methods">Methods</h2>
<p>이 인터페이스는 부모인 <em>{{domxref("EventTarget")}}</em>으로부터 메소드를 상속받고 있습니다.</p>
<dl>
<dt>{{domxref("EventSource.close()")}}</dt>
<dd>Closes the connection, if any, and sets the <code>readyState</code> attribute to <code>CLOSED</code>. If the connection is already closed, the method does nothing.</dd>
</dl>
<h2 id="예시">예시</h2>
<p>이 기초적인 예시에서, <code>EventSource</code>는 서버로 부터 받은 이벤트로 생성되었습니다; <code>"sse.php"</code>라는 이름을 가진 페이지는 이벤트를 생성할 책임이 있습니다.</p>
<pre class="brush: js">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);
}</pre>
<p>각각의 수신한 이벤트는 우리의 <code>EventSource</code> 객체의 <code>onmessage</code> 이벤트 핸들러가 실행되도록 합니다. 차례가 되었을 때, 새로운 {{HTMLElement("li")}} 요소를 생성하고, 메시지 데이터를 안에 작성합니다. 그 때, 문서에 이미 존재하는 ul 요소에 새로운 요소를 추가하게 됩니다.</p>
<div class="note">
<p><strong>Note</strong>: You can find a full example on GitHub — see <a href="https://github.com/mdn/dom-examples/tree/master/server-sent-events">Simple SSE demo using PHP.</a></p>
</div>
<h2 id="Specifications">Specifications</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
<tr>
<td>{{SpecName('HTML WHATWG', "comms.html#the-eventsource-interface", "EventSource")}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td></td>
</tr>
</tbody>
</table>
<ul>
</ul>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<div>
<p>{{Compat("api.EventSource")}}</p>
</div>
<h2 id="See_also">See also</h2>
<ul>
<li><a href="/en-US/docs/Web/API/Server-sent_events">Server-sent events</a></li>
<li><a href="/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events" title="en/Server-sent events/Using server-sent events">Using server-sent events</a></li>
</ul>
|
