From 310fd066e91f454b990372ffa30e803cc8120975 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 12:56:40 +0100 Subject: unslug zh-cn: move --- files/zh-cn/web/api/eventsource/close/index.html | 138 ++++++++++++++++++ .../web/api/eventsource/eventsource/index.html | 149 ++++++++++++++++++++ files/zh-cn/web/api/eventsource/index.html | 155 +++++++++++++++++++++ files/zh-cn/web/api/eventsource/onerror/index.html | 122 ++++++++++++++++ files/zh-cn/web/api/eventsource/onopen/index.html | 123 ++++++++++++++++ 5 files changed, 687 insertions(+) create mode 100644 files/zh-cn/web/api/eventsource/close/index.html create mode 100644 files/zh-cn/web/api/eventsource/eventsource/index.html create mode 100644 files/zh-cn/web/api/eventsource/index.html create mode 100644 files/zh-cn/web/api/eventsource/onerror/index.html create mode 100644 files/zh-cn/web/api/eventsource/onopen/index.html (limited to 'files/zh-cn/web/api/eventsource') 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 +--- +
{{APIRef('WebSockets API')}}
+ +
 
+ +

{{domxref("EventSource")}} 的方法close()用于关闭当前的连接，如果调用了此方法，则会将{{domxref("EventSource.readyState")}}这个属性值设置为 2 (closed)

+ +
+

Note: 如果连接已经被关闭，此方法不会做任何事情

+
+ +

语法

+ +
eventSource.close();
+ +

参数

+ +

None.

+ +

返回值

+ +

Void.

+ +

例子

+ +
var button = document.querySelector('button');
+var evtSource = new EventSource('sse.php');
+
+button.onclick = function() {
+  console.log('Connection closed');
+  evtSource.close();
+}
+
+ +
+

Note: 你可以在Github上查看这整个例子： Simple SSE demo using PHP.

+
+ +

规范

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "comms.html#dom-eventsource-close", "close()")}}{{Spec2('HTML WHATWG')}}Initial definition
+ + + +

浏览器兼容性

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
EventSource support6{{CompatNo}}{{CompatGeckoDesktop("6.0")}}{{CompatNo}}{{CompatVersionUnknown}}5
Available in shared and dedicated workers[1]{{CompatVersionUnknown}}{{CompatNo}}{{CompatGeckoDesktop("53.0")}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
EventSource support4.445{{CompatNo}}124.1
Available in shared and dedicated workers[1]{{CompatVersionUnknown}}{{CompatGeckoMobile("53.0")}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

[1] But not service workers as yet.

+ +

相关链接

+ + 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 +--- +

{{APIRef('WebSockets API')}}

+ +

EventSource() 构造函数返回一个新建的{{domxref("EventSource")}}，它代表了一个远程资源。

+ +

语法

+ +
pc = new EventSource(url, configuration);
+ +

参数

+ +
+
url
+
 一个{{domxref("USVString")}} ，它代表远程资源的位置
+
configuration {{optional_inline}}
+
为配置新连接提供选项。可选项是： +
    +
  • withCredentials，默认为 false，指示 CORS 是否应包含凭据( credentials )。
    • +
+
+
+ +

返回值

+ +

 一个新建的 {{domxref("EventSource")}} 对象，如果指定了configuration， 则按其配置；否则，配置为合适的基本默认值。

+ + + +

示例

+ + + +
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);
+}
+ +
+

笔记: 你可以在 GitHub 查看完整示例 — 请查看 Simple SSE demo using PHP.

+
+ + + + + +

规范

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "comms.html#dom-eventsource", "EventSource()")}}{{Spec2('HTML WHATWG')}}Initial definition
+ + + +

浏览器兼容性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
 Basic support9{{ CompatGeckoDesktop("6.0") }}{{CompatUnknown}}115
CORS support (withCredentials)26{{ CompatGeckoDesktop("11.0") }}{{CompatUnknown}}12{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatAndroid("4.4") }}{{ CompatGeckoMobile("6.0") }}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
CORS support (withCredentials){{CompatUnknown}}{{ CompatGeckoMobile("11.0") }}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

相关链接

+ + 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 +--- +

{{APIRef("Websockets API")}}

+ +

EventSource 是服务器推送的一个网络事件接口。一个EventSource实例会对HTTP服务开启一个持久化的连接，以text/event-stream 格式发送事件, 会一直保持开启直到被要求关闭。

+ +

一旦连接开启，来自服务端传入的消息会以事件的形式分发至你代码中。如果接收消息中有一个事件字段，触发的事件与事件字段的值相同。如果没有事件字段存在，则将触发通用事件。

+ +

与 WebSockets,不同的是，服务端推送是单向的。数据信息被单向从服务端到客户端分发. 当不需要以消息形式将数据从客户端发送到服务器时，这使它们成为绝佳的选择。例如，对于处理社交媒体状态更新，新闻提要或将数据传递到客户端存储机制（如IndexedDB或Web存储）之类的，EventSource无疑是一个有效方案。

+ +

构造函数

+ +
+
{{domxref("EventSource.EventSource", "EventSource()")}}
+
以指定的 {{domxref("USVString")}} 创建一个新的 EventSource。
+
+ +

属性

+ +

此接口从其父接口 {{domxref("EventTarget")}} 继承属性。

+ +
+
{{domxref("EventSource.onerror")}}
+
是一个 {{domxref("EventHandler")}}，当发生错误时被调用，并且在此对象上派发 {{event("error")}} 事件。
+
{{domxref("EventSource.onmessage")}}
+
是一个 {{domxref("EventHandler")}}，当收到一个 {{event("message")}} 事件，即消息来自源头时被调用。
+
{{domxref("EventSource.onopen")}}
+
是一个 {{domxref("EventHandler")}}，当收到一个 {{event(" open ")}} 事件，即连接刚打开时被调用。
+
{{domxref("EventSource.readyState")}} {{readonlyinline}}
+
一个 unsigned short 值，代表连接状态。可能值是 CONNECTING (0), OPEN (1), 或者 CLOSED (2)。
+
{{domxref("EventSource.url")}} {{readonlyinline}}
+
一个{{domxref("DOMString")}}，代表事件源的 URL。
+
+ +

事件接收器

+ +
+
{{domxref("EventSource.onerror")}}
+
Is an {{domxref("EventHandler")}} called when an error occurs and the {{domxref("EventSource/error_event", "error")}} event is dispatched on an EventSource object.
+
{{domxref("EventSource.onmessage")}}
+
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.
+
{{domxref("EventSource.onopen")}}
+
Is an {{domxref("EventHandler")}} called when an {{domxref("EventSource/open_event", "open")}} event is received, that is when the connection was just opened.
+
+ +

方法

+ +

此接口从其父接口 {{domxref("EventTarget")}} 继承方法。

+ +
+
{{domxref("EventSource.close()")}}
+
如果存在，则关闭连接，并且设置 readyState 属性为 CLOSED。如果连接已经被关闭，此方法不会再进行任何操作。
+
+ +

事件

+ +
+
{{domxref("EventSource/error_event", "error")}}
+
Fired when a connection to an event source failed to open.
+
{{domxref("EventSource/message_event", "message")}}
+
Fired when data is received from an event source.
+
{{domxref("EventSource/open_event", "open")}}
+
Fired when a connection to an event source has opened.
+
+ +

Additionally, the event source itself may send messages with an event field, which will create ad-hoc events keyed to that value.

+ +

示例

+ +

In this basic example, an EventSource is created to receive unnamed events from the server; a page with the name sse.php is responsible for generating the events.

+ +
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);
+}
+ +

Each received event causes our EventSource object's onmessage 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.

+ +
+

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

+
+ +

To listen to named events, you'll require a listener for each type of event sent.

+ +
  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)
+  })
+
+ +

规范

+ + + + + + + + + + + + +
规范状态
{{SpecName('HTML WHATWG', "comms.html#the-eventsource-interface", "EventSource")}}{{Spec2('HTML WHATWG')}}
+ +

浏览器兼容性

+ + + +

{{Compat("api.EventSource")}}

+ +

参见

+ + 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 +--- +
{{APIRef('WebSockets API')}}
+ +
 
+ + +

{{domxref("EventSource")}} 的属性 onerror 是当发生错误且这个错误事件（{{event("error")}} ）被EventSource触发时调用的一个事件处理函数（{{domxref("EventHandler")}}）

+ +

语法

+ +
eventSource.onerror = function
+ +

例子

+ +
evtSource.onerror = function() {
+  console.log("EventSource failed.");
+};
+ +
+

Note: 你可以在Github上查看这个完整例子： Simple SSE demo using PHP.

+
+ +

规范

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "comms.html#handler-eventsource-onerror", "onerror")}}{{Spec2('HTML WHATWG')}}Initial definition
+ + + +

浏览器兼容性

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
EventSource support6{{CompatNo}}{{CompatGeckoDesktop("6.0")}}{{CompatNo}}{{CompatVersionUnknown}}5
Available in shared and dedicated workers[1]{{CompatVersionUnknown}}{{CompatNo}}{{CompatGeckoDesktop("53.0")}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
EventSource support4.445{{CompatNo}}124.1
Available in shared and dedicated workers[1]{{CompatVersionUnknown}}{{CompatGeckoMobile("53.0")}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

[1] But not service workers as yet.

+ +

相关链接

+ + 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 +--- +
{{APIRef('WebSockets API')}}
+ +

{{domxref("EventSource")}}接口的 onopen 属性是一个 {{domxref("EventHandler")}} ，它在收到{{event("open")}} 事件时被调用，在那时，连接刚被打开。

+ +

语法

+ +
eventSource.onopen = function
+ +

示例

+ +
evtSource.onopen = function() {
+  console.log("Connection to server opened.");
+};
+ +
+

注意 ：你可以在 GitHub 上看到一个完整的示例— 请看 使用php的SSE(服务器发送事件)demo。

+
+ +

规范

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "comms.html#handler-eventsource-onopen", "onopen")}}{{Spec2('HTML WHATWG')}}Initial definition
+ + + +

浏览器兼容性

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
支持EventSource6{{CompatNo}}{{CompatGeckoDesktop("6.0")}}{{CompatNo}}{{CompatVersionUnknown}}5
在共享和专用的 workers上可用[1]{{CompatVersionUnknown}}{{CompatNo}}{{CompatGeckoDesktop("53.0")}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
支持EventSource4.445{{CompatNo}}124.1
在共享和专用的 workers上可用 [1]{{CompatVersionUnknown}}{{CompatGeckoMobile("53.0")}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

[1] 但 目前不能在service workers上使用.

+ +

相关链接

+ + -- cgit v1.2.3-54-g00ecf