aboutsummaryrefslogtreecommitdiff
path: root/files/zh-cn/web/api/eventsource
diff options
context:
space:
mode:
authorFlorian Merz <me@fiji-flo.de>2021-02-11 12:56:40 +0100
committerFlorian Merz <me@fiji-flo.de>2021-02-11 12:56:40 +0100
commit310fd066e91f454b990372ffa30e803cc8120975 (patch)
treed5d900deb656a5da18e0b60d00f0db73f3a2e88e /files/zh-cn/web/api/eventsource
parent8260a606c143e6b55a467edf017a56bdcd6cba7e (diff)
downloadtranslated-content-310fd066e91f454b990372ffa30e803cc8120975.tar.gz
translated-content-310fd066e91f454b990372ffa30e803cc8120975.tar.bz2
translated-content-310fd066e91f454b990372ffa30e803cc8120975.zip
unslug zh-cn: move
Diffstat (limited to 'files/zh-cn/web/api/eventsource')
-rw-r--r--files/zh-cn/web/api/eventsource/close/index.html138
-rw-r--r--files/zh-cn/web/api/eventsource/eventsource/index.html149
-rw-r--r--files/zh-cn/web/api/eventsource/index.html155
-rw-r--r--files/zh-cn/web/api/eventsource/onerror/index.html122
-rw-r--r--files/zh-cn/web/api/eventsource/onopen/index.html123
5 files changed, 687 insertions, 0 deletions
diff --git a/files/zh-cn/web/api/eventsource/close/index.html b/files/zh-cn/web/api/eventsource/close/index.html
new file mode 100644
index 0000000000..3b8af5d6d3
--- /dev/null
+++ b/files/zh-cn/web/api/eventsource/close/index.html
@@ -0,0 +1,138 @@
+---
+title: EventSource.close()
+slug: Server-sent_events/EventSource/close
+translation_of: Web/API/EventSource/close
+---
+<div>{{APIRef('WebSockets API')}}</div>
+
+<div> </div>
+
+<p>{{domxref("EventSource")}} 的方法<code><strong>close()</strong></code>用于关闭当前的连接,如果调用了此方法,则会将{{domxref("EventSource.readyState")}}这个属性值设置为 2 (closed)</p>
+
+<div class="note">
+<p><strong>Note</strong>: 如果连接已经被关闭,此方法不会做任何事情</p>
+</div>
+
+<h2 id="语法"><strong>语法</strong></h2>
+
+<pre class="syntaxbox">eventSource.close();</pre>
+
+<h3 id="参数">参数</h3>
+
+<p>None.</p>
+
+<h3 id="返回值">返回值</h3>
+
+<p>Void.</p>
+
+<h2 id="例子">例子</h2>
+
+<pre class="brush: js">var button = document.querySelector('button');
+var evtSource = new EventSource('sse.php');
+
+button.onclick = function() {
+  console.log('Connection closed');
+  evtSource.close();
+}
+</pre>
+
+<div class="note">
+<p><strong>Note</strong>: 你可以在Github上查看这整个例子: <a href="https://github.com/mdn/dom-examples/tree/master/server-sent-events">Simple SSE demo using PHP.</a></p>
+</div>
+
+<h2 id="规范">规范</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#dom-eventsource-close", "close()")}}</td>
+ <td>{{Spec2('HTML WHATWG')}}</td>
+ <td>Initial definition</td>
+ </tr>
+ </tbody>
+</table>
+
+<ul>
+</ul>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+ <tr>
+ <th>Feature</th>
+ <th>Chrome</th>
+ <th>Edge</th>
+ <th>Firefox (Gecko)</th>
+ <th>Internet Explorer</th>
+ <th>Opera</th>
+ <th>Safari</th>
+ </tr>
+ <tr>
+ <td>EventSource support</td>
+ <td>6</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatGeckoDesktop("6.0")}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>5</td>
+ </tr>
+ <tr>
+ <td>Available in shared and dedicated workers<sup>[1]</sup></td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatGeckoDesktop("53.0")}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+ <tr>
+ <th>Feature</th>
+ <th>Android</th>
+ <th>Firefox Mobile (Gecko)</th>
+ <th>IE Mobile</th>
+ <th>Opera Mobile</th>
+ <th>Safari Mobile</th>
+ </tr>
+ <tr>
+ <td>EventSource support</td>
+ <td>4.4</td>
+ <td>45</td>
+ <td>{{CompatNo}}</td>
+ <td>12</td>
+ <td>4.1</td>
+ </tr>
+ <tr>
+ <td>Available in shared and dedicated workers<sup>[1]</sup></td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatGeckoMobile("53.0")}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] But <a href="https://github.com/w3c/ServiceWorker/issues/947">not service workers as yet</a>.</p>
+
+<h2 id="相关链接">相关链接</h2>
+
+<ul>
+ <li>{{domxref("EventSource")}}</li>
+</ul>
diff --git a/files/zh-cn/web/api/eventsource/eventsource/index.html b/files/zh-cn/web/api/eventsource/eventsource/index.html
new file mode 100644
index 0000000000..a93b5eb8b2
--- /dev/null
+++ b/files/zh-cn/web/api/eventsource/eventsource/index.html
@@ -0,0 +1,149 @@
+---
+title: EventSource()
+slug: Server-sent_events/EventSource/EventSource
+tags:
+ - API
+ - EventSource
+ - Server-sent events
+translation_of: Web/API/EventSource/EventSource
+---
+<p>{{APIRef('WebSockets API')}}</p>
+
+<p><code><strong>EventSource</strong></code><strong><code>()</code></strong> 构造函数返回一个新建的{{domxref("EventSource")}},它代表了一个远程资源。</p>
+
+<h2 id="语法">语法</h2>
+
+<pre class="syntaxbox">pc = new EventSource(url, <em>configuration</em>);</pre>
+
+<h3 class="syntaxbox" id="参数">参数</h3>
+
+<dl>
+ <dt><code>url</code></dt>
+ <dd> 一个{{domxref("USVString")}} ,它代表远程资源的位置</dd>
+ <dt><code>configuration</code> {{optional_inline}}</dt>
+ <dd>为配置新连接提供选项。可选项是:
+ <ul>
+ <li><code>withCredentials</code>,默认为 <code>false</code>,指示 CORS 是否应包含凭据( credentials )。</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="返回值">返回值</h3>
+
+<p> 一个新建的 {{domxref("EventSource")}} 对象,如果指定了<code>configuration</code>, 则按其配置;否则,配置为合适的基本默认值。</p>
+
+
+
+<h2 id="示例">示例</h2>
+
+
+
+<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>
+
+<div class="note">
+<p><strong>笔记</strong>: 你可以在 GitHub 查看完整示例 — 请查看 <a href="https://github.com/mdn/dom-examples/tree/master/server-sent-events">Simple SSE demo using PHP.</a></p>
+</div>
+
+
+
+
+
+<h2 id="规范">规范</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#dom-eventsource", "EventSource()")}}</td>
+ <td>{{Spec2('HTML WHATWG')}}</td>
+ <td>Initial definition</td>
+ </tr>
+ </tbody>
+</table>
+
+<ul>
+</ul>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+ <tr>
+ <th>Feature</th>
+ <th>Chrome</th>
+ <th>Firefox (Gecko)</th>
+ <th>Internet Explorer</th>
+ <th>Opera</th>
+ <th>Safari</th>
+ </tr>
+ <tr>
+ <td> Basic support</td>
+ <td>9</td>
+ <td>{{ CompatGeckoDesktop("6.0") }}</td>
+ <td>{{CompatUnknown}}</td>
+ <td>11</td>
+ <td>5</td>
+ </tr>
+ <tr>
+ <td>CORS support (<code>withCredentials</code>)</td>
+ <td>26</td>
+ <td>{{ CompatGeckoDesktop("11.0") }}</td>
+ <td>{{CompatUnknown}}</td>
+ <td>12</td>
+ <td>{{CompatUnknown}}</td>
+ </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+ <tr>
+ <th>Feature</th>
+ <th>Android</th>
+ <th>Firefox Mobile (Gecko)</th>
+ <th>IE Mobile</th>
+ <th>Opera Mobile</th>
+ <th>Safari Mobile</th>
+ </tr>
+ <tr>
+ <td>Basic support</td>
+ <td>{{ CompatAndroid("4.4") }}</td>
+ <td>{{ CompatGeckoMobile("6.0") }}</td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatUnknown}}</td>
+ </tr>
+ <tr>
+ <td>CORS support (<code>withCredentials</code>)</td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{ CompatGeckoMobile("11.0") }}</td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatUnknown}}</td>
+ </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="相关链接">相关链接</h2>
+
+<ul>
+ <li>{{domxref("EventSource")}}</li>
+</ul>
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>
diff --git a/files/zh-cn/web/api/eventsource/onerror/index.html b/files/zh-cn/web/api/eventsource/onerror/index.html
new file mode 100644
index 0000000000..ad24259a4e
--- /dev/null
+++ b/files/zh-cn/web/api/eventsource/onerror/index.html
@@ -0,0 +1,122 @@
+---
+title: EventSource.onerror
+slug: Server-sent_events/EventSource/onerror
+translation_of: Web/API/EventSource/onerror
+---
+<div>{{APIRef('WebSockets API')}}</div>
+
+<div> </div>
+
+
+<p>{{domxref("EventSource")}} 的属性 <code><strong>onerror</strong></code> 是当发生错误且这个错误事件({{event("error")}} )被EventSource触发时调用的一个事件处理函数({{domxref("EventHandler")}})</p>
+
+<h2 id="语法">语法</h2>
+
+<pre class="syntaxbox">eventSource.onerror = function</pre>
+
+<h2 id="例子">例子</h2>
+
+<pre class="brush: js">evtSource.onerror = function() {
+ console.log("EventSource failed.");
+};</pre>
+
+<div class="note">
+<p><strong>Note</strong>: 你可以在Github上查看这个完整例子: <a href="https://github.com/mdn/dom-examples/tree/master/server-sent-events">Simple SSE demo using PHP.</a></p>
+</div>
+
+<h2 id="规范">规范</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#handler-eventsource-onerror", "onerror")}}</td>
+ <td>{{Spec2('HTML WHATWG')}}</td>
+ <td>Initial definition</td>
+ </tr>
+ </tbody>
+</table>
+
+<ul>
+</ul>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+ <tr>
+ <th>Feature</th>
+ <th>Chrome</th>
+ <th>Edge</th>
+ <th>Firefox (Gecko)</th>
+ <th>Internet Explorer</th>
+ <th>Opera</th>
+ <th>Safari</th>
+ </tr>
+ <tr>
+ <td>EventSource support</td>
+ <td>6</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatGeckoDesktop("6.0")}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>5</td>
+ </tr>
+ <tr>
+ <td>Available in shared and dedicated workers<sup>[1]</sup></td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatGeckoDesktop("53.0")}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+ <tr>
+ <th>Feature</th>
+ <th>Android</th>
+ <th>Firefox Mobile (Gecko)</th>
+ <th>IE Mobile</th>
+ <th>Opera Mobile</th>
+ <th>Safari Mobile</th>
+ </tr>
+ <tr>
+ <td>EventSource support</td>
+ <td>4.4</td>
+ <td>45</td>
+ <td>{{CompatNo}}</td>
+ <td>12</td>
+ <td>4.1</td>
+ </tr>
+ <tr>
+ <td>Available in shared and dedicated workers<sup>[1]</sup></td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatGeckoMobile("53.0")}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] But <a href="https://github.com/w3c/ServiceWorker/issues/947">not service workers as yet</a>.</p>
+
+<h2 id="相关链接">相关链接</h2>
+
+<ul>
+ <li>{{domxref("EventSource")}}</li>
+</ul>
diff --git a/files/zh-cn/web/api/eventsource/onopen/index.html b/files/zh-cn/web/api/eventsource/onopen/index.html
new file mode 100644
index 0000000000..dfc47bbf4e
--- /dev/null
+++ b/files/zh-cn/web/api/eventsource/onopen/index.html
@@ -0,0 +1,123 @@
+---
+title: EventSource.onopen
+slug: Server-sent_events/EventSource/onopen
+tags:
+ - API
+ - Event Handler
+ - EventSource
+translation_of: Web/API/EventSource/onopen
+---
+<div>{{APIRef('WebSockets API')}}</div>
+
+<p>{{domxref("EventSource")}}接口的 <code><strong>onopen</strong></code> 属性是一个 {{domxref("EventHandler")}} ,它在收到{{event("open")}} 事件时被调用,在那时,连接刚被打开。</p>
+
+<h2 id="语法">语法</h2>
+
+<pre class="syntaxbox">eventSource.onopen = function</pre>
+
+<h2 id="示例">示例</h2>
+
+<pre class="brush: js">evtSource.onopen = function() {
+  console.log("Connection to server opened.");
+};</pre>
+
+<div class="note">
+<p><strong>注意</strong> :你可以在 GitHub 上看到一个完整的示例— 请看 <a href="https://github.com/mdn/dom-examples/tree/master/server-sent-events">使用php的SSE(服务器发送事件)demo。</a></p>
+</div>
+
+<h2 id="规范">规范</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#handler-eventsource-onopen", "onopen")}}</td>
+ <td>{{Spec2('HTML WHATWG')}}</td>
+ <td>Initial definition</td>
+ </tr>
+ </tbody>
+</table>
+
+<ul>
+</ul>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+ <tr>
+ <th>Feature</th>
+ <th>Chrome</th>
+ <th>Edge</th>
+ <th>Firefox (Gecko)</th>
+ <th>Internet Explorer</th>
+ <th>Opera</th>
+ <th>Safari</th>
+ </tr>
+ <tr>
+ <td>支持EventSource</td>
+ <td>6</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatGeckoDesktop("6.0")}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>5</td>
+ </tr>
+ <tr>
+ <td>在共享和专用的 workers上可用<sup>[1]</sup></td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatGeckoDesktop("53.0")}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+ <tr>
+ <th>Feature</th>
+ <th>Android</th>
+ <th>Firefox Mobile (Gecko)</th>
+ <th>IE Mobile</th>
+ <th>Opera Mobile</th>
+ <th>Safari Mobile</th>
+ </tr>
+ <tr>
+ <td>支持EventSource</td>
+ <td>4.4</td>
+ <td>45</td>
+ <td>{{CompatNo}}</td>
+ <td>12</td>
+ <td>4.1</td>
+ </tr>
+ <tr>
+ <td>在共享和专用的 workers上可用 <sup>[1]</sup></td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatGeckoMobile("53.0")}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] 但 <a href="https://github.com/w3c/ServiceWorker/issues/947">目前不能在service workers上使用</a>.</p>
+
+<h2 id="相关链接">相关链接</h2>
+
+<ul>
+ <li>{{domxref("EventSource")}}</li>
+</ul>