1 files changed, 155 insertions, 0 deletions
diff --git a/files/zh-cn/web/api/eventsource/index.html b/files/zh-cn/web/api/eventsource/index.html
new file mode 100644
index 0000000000..977bf56d90
--- /dev/null
+++ b/files/zh-cn/web/api/eventsource/index.html
@@ -0,0 +1,155 @@
+---
+title: EventSource
+slug: Server-sent_events/EventSource
+tags:
+  - API
+  - Server-sent events
+  - 参考
+translation_of: Web/API/EventSource
+---
+<p>{{APIRef("Websockets API")}}</p>
+
+<p class="summary"><code><strong>EventSource</strong></code> 是服务器推送的一个网络事件接口。一个EventSource实例会对HTTP服务开启一个持久化的连接，以<code>text/event-stream</code> 格式发送事件, 会一直保持开启直到被要求关闭。</p>
+
+<p>一旦连接开启，来自服务端传入的消息会以事件的形式分发至你代码中。如果接收消息中有一个事件字段，触发的事件与事件字段的值相同。如果没有事件字段存在，则将触发通用事件。</p>
+
+<p>与 <a href="/en-US/docs/Web/API/WebSockets_API">WebSockets</a>,不同的是，服务端推送是单向的。数据信息被单向从服务端到客户端分发. 当不需要以消息形式将数据从客户端发送到服务器时，这使它们成为绝佳的选择。例如，对于处理社交媒体状态更新，新闻提要或将数据传递到客户端存储机制（如IndexedDB或Web存储）之类的，EventSource无疑是一个有效方案。</p>
+
+<h2 id="构造函数">构造函数</h2>
+
+<dl>
+ <dt>{{domxref("EventSource.EventSource", "EventSource()")}}</dt>
+ <dd>以指定的 {{domxref("USVString")}} 创建一个新的 <code>EventSource</code>。</dd>
+</dl>
+
+<h2 id="属性">属性</h2>
+
+<p><em>此接口从其父接口 {{domxref("EventTarget")}} 继承属性。</em></p>
+
+<dl>
+ <dt>{{domxref("EventSource.onerror")}}</dt>
+ <dd>是一个 {{domxref("EventHandler")}}，当发生错误时被调用，并且在此对象上派发 {{event("error")}} 事件。</dd>
+ <dt>{{domxref("EventSource.onmessage")}}</dt>
+ <dd>是一个 {{domxref("EventHandler")}}，当收到一个 {{event("message")}} 事件，即消息来自源头时被调用。</dd>
+ <dt>{{domxref("EventSource.onopen")}}</dt>
+ <dd>是一个 {{domxref("EventHandler")}}，当收到一个 {{event(" open ")}} 事件，即连接刚打开时被调用。</dd>
+ <dt>{{domxref("EventSource.readyState")}} {{readonlyinline}}</dt>
+ <dd>一个 <code>unsigned </code> <code> short</code> 值，代表连接状态。可能值是 <code>CONNECTING</code> (<code>0</code>), <code>OPEN</code> (<code>1</code>), 或者 <code>CLOSED</code> (<code>2</code>)。</dd>
+ <dt>{{domxref("EventSource.url")}} {{readonlyinline}}</dt>
+ <dd>一个{{domxref("DOMString")}}，代表事件源的 URL。</dd>
+</dl>
+
+<h3 id="事件接收器">事件接收器</h3>
+
+<dl>
+ <dt>{{domxref("EventSource.onerror")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} called when an error occurs and the {{domxref("EventSource/error_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 {{domxref("EventSource/message_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 {{domxref("EventSource/open_event", "open")}} event is received, that is when the connection was just opened.</dd>
+</dl>
+
+<h2 id="方法">方法</h2>
+
+<p><em>此接口从其父接口 {{domxref("EventTarget")}} 继承方法。</em></p>
+
+<dl>
+ <dt>{{domxref("EventSource.close()")}}</dt>
+ <dd>如果存在，则关闭连接，并且设置 <code>readyState</code> 属性为 <code>CLOSED</code>。如果连接已经被关闭，此方法不会再进行任何操作。</dd>
+</dl>
+
+<h2 id="事件">事件</h2>
+
+<dl>
+ <dt>{{domxref("EventSource/error_event", "error")}}</dt>
+ <dd>Fired when a connection to an event source failed to open.</dd>
+ <dt>{{domxref("EventSource/message_event", "message")}}</dt>
+ <dd>Fired when data is received from an event source.</dd>
+ <dt>{{domxref("EventSource/open_event", "open")}}</dt>
+ <dd>Fired when a connection to an event source has opened.</dd>
+</dl>
+
+<p>Additionally, the event source itself may send messages with an event field, which will create ad-hoc events keyed to that value.</p>
+
+<h2 id="示例">示例</h2>
+
+<p>In this basic example, an <code>EventSource</code> is created to receive unnamed events from the server; a page with the name <code>sse.php</code> is responsible for generating the events.</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>Each received event causes our <code>EventSource</code> object's <code>onmessage</code> event handler to be run. It, in turn, creates a new {{HTMLElement("li")}} element and writes the message's data into it, then appends the new element to the list element already in the document.</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>
+
+<p>To listen to named events, you'll require a listener for each type of event sent.</p>
+
+<pre class="brush: js">  const sse = new EventSource('/api/v1/sse');
+
+  /* This will listen only for events
+   * similar to the following:
+   *
+   * event: notice
+   * data: useful data
+   * id: someid
+   *
+   */
+  sse.addEventListener("notice", function(e) {
+    console.log(e.data)
+  })
+
+  /* Similarly, this will listen for events
+   * with the field `event: update`
+   */
+  sse.addEventListener("update", function(e) {
+    console.log(e.data)
+  })
+
+  /* The event "message" is a special case, as it
+   * will capture events without an event field
+   * as well as events that have the specific type
+   * `event: message` It will not trigger on any
+   * other event type.
+   */
+  sse.addEventListener("message", function(e) {
+    console.log(e.data)
+  })
+  </pre>
+
+<h2 id="规范">规范</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">规范</th>
+   <th scope="col">状态</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "comms.html#the-eventsource-interface", "EventSource")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+
+
+<p>{{Compat("api.EventSource")}}</p>
+
+<h2 id="参见">参见</h2>
+
+<ul>
+ <li><a href="/zh-CN/docs/Web/API/Server-sent_events">Server-sent events</a></li>
+ <li><a href="/zh-CN/Server-sent_events/Using_server-sent_events">使用 Server-sent events</a></li>
+</ul>