1 files changed, 121 insertions, 0 deletions
diff --git a/files/ko/web/api/eventsource/index.html b/files/ko/web/api/eventsource/index.html
new file mode 100644
index 0000000000..9d0df03b5d
--- /dev/null
+++ b/files/ko/web/api/eventsource/index.html
@@ -0,0 +1,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 {{domxref("EventHandler")}} 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 {{domxref("EventHandler")}} 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 {{domxref("EventHandler")}} 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>