From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../ja/web/api/eventsource/eventsource/index.html | 77 +++++++++++++ files/ja/web/api/eventsource/index.html | 125 +++++++++++++++++++++ files/ja/web/api/eventsource/onerror/index.html | 65 +++++++++++ files/ja/web/api/eventsource/onmessage/index.html | 69 ++++++++++++ 4 files changed, 336 insertions(+) create mode 100644 files/ja/web/api/eventsource/eventsource/index.html create mode 100644 files/ja/web/api/eventsource/index.html create mode 100644 files/ja/web/api/eventsource/onerror/index.html create mode 100644 files/ja/web/api/eventsource/onmessage/index.html (limited to 'files/ja/web/api/eventsource') diff --git a/files/ja/web/api/eventsource/eventsource/index.html b/files/ja/web/api/eventsource/eventsource/index.html new file mode 100644 index 0000000000..c8909fa3d4 --- /dev/null +++ b/files/ja/web/api/eventsource/eventsource/index.html @@ -0,0 +1,77 @@ +--- +title: EventSource() +slug: Web/API/EventSource/EventSource +tags: + - API + - EventSource + - Server-sent events + - コンストラクタ + - リファレンス +translation_of: Web/API/EventSource/EventSource +--- +
{{APIRef('WebSockets API')}}
+ +

EventSource() コンストラクタは、リモートリソースを表す新しく作成された {{domxref("EventSource")}} を返します。

+ +

構文

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

引数

+ +
+
url
+
イベント/メッセージを処理するリモートリソースの場所を表す{{domxref("USVString")}}。
+
configuration {{optional_inline}}
+
新しい接続を構成するオプションを提供します。可能なエントリは次のとおりです: +

withCredentials 、デフォルトは false で、CORS に証明書を含めるかどうかを指定します。

+
+
+ +

例

+ +
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 から見つけることができます — PHP を用いた簡単な SSE のデモ を参照。

+
+ +

仕様

+ + + + + + + + + + + + + + +
仕様ステータスComment
{{SpecName('HTML WHATWG', "comms.html#dom-eventsource", "EventSource()")}}{{Spec2('HTML WHATWG')}}初期定義
+ + + +

ブラウザ互換性

+ + + +

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

+ +

関連情報

+ + diff --git a/files/ja/web/api/eventsource/index.html b/files/ja/web/api/eventsource/index.html new file mode 100644 index 0000000000..18f2f38fb7 --- /dev/null +++ b/files/ja/web/api/eventsource/index.html @@ -0,0 +1,125 @@ +--- +title: EventSource +slug: Web/API/EventSource +tags: + - API + - Communications + - EventSource + - Interface + - Reference + - Server-sent event + - messaging + - インターフェイス +translation_of: Web/API/EventSource +--- +
{{APIRef("Server Sent Events")}}
+ +

EventSource インターフェイスは、 Server-sent event のウェブコンテンツのインターフェイスです。 EventSource インターフェイスは、 HTTP サーバーとの間で永続的なコネクションを開き、イベントを text/event-stream の形式で受け取ります。コネクションは {{domxref("EventSource.close()")}} を呼び出して閉じられるまで開いたままになります。

+ +

いったんコネクションが開かれると、サーバーから入って来るメッセージは {{event("message")}} イベントの形でコードに配信されます。

+ +

WebSocket とは異なり、 Server-sent event は単一方向です。つまり、データメッセージはサーバーからクライアント (たとえばユーザーのウェブブラウザー) に向けて、一方向に配信されます。これは、メッセージの形でクライアントからサーバーにデータを送る必要がない場合には良い選択です。例えば、 EventSource はソーシャルメディアの状況アップデートやニュースフィードのようなものを扱ったり、クライアント側ストレージ (IndexedDB や web storage など) の仕組みにデータを配信したりするアプローチに有用です。

+ +

コンストラクター

+ +
+
{{domxref("EventSource.EventSource", "EventSource()")}}
+
指定された URL と、オプション資格情報モードから Server-sent event の受信を扱うために、新しい EventSource を生成します。
+
+ +

プロパティ

+ +

このインターフェイスは、親である {{domxref("EventTarget")}} からプロパティを継承します。

+ +
+
{{domxref("EventSource.readyState")}} {{readonlyinline}}
+
接続の状態を表す数値です。許容値は CONNECTING (0)、OPEN (1)、CLOSED (2) です。
+
{{domxref("EventSource.url")}} {{readonlyinline}}
+
ソースの URL を表す {{domxref("DOMString")}} です。
+
{{domxref("EventSource.withCredentials")}} {{readonlyinline}}
+
{{domxref("Boolean")}} で、 EventSource オブジェクトがオリジン間 (CORS) 資格情報を設定してインスタンス化されたか (true)、設定されずにインスタンス化されたか (false、既定値) を示します。
+
+ +

イベントハンドラー

+ +
+
{{domxref("EventSource.onerror")}}
+
エラーが発生して、EventSource オブジェクトで {{domxref("EventSource/error_event", "error")}} イベントが発生したときに呼び出される {{domxref("EventHandler")}} です。
+
{{domxref("EventSource.onmessage")}}
+
{{domxref("EventSource/message_event", "message")}} イベントを受け取ったとき、すなわち発信元からメッセージが到着したときに呼び出される {{domxref("EventHandler")}} です。
+
{{domxref("EventSource.onopen")}}
+
{{domxref("EventSource/open_event", "open")}} イベントを受け取ったとき、すなわち接続を開始したときに呼び出される {{domxref("EventHandler")}} です。
+
+ +

メソッド

+ +

このインターフェイスは、親である {{domxref("EventTarget")}} からメソッドを継承します。

+ +
+
{{domxref("EventSource.close()")}}
+
接続を切断して、 readyState 属性を CLOSED に設定します。すでに切断されている場合は何も行いません。
+
+ +

イベント

+ +
+
{{domxref("EventSource/error_event", "error")}}
+
イベントソースへのコネクションを開くことに失敗したときに発生します。
+
{{domxref("EventSource/message_event", "message")}}
+
イベントソースからデータを受信したときに発生します。
+
{{domxref("EventSource/open_event", "open")}}
+
イベントソースへのコネクションが開かれたときに発生します。
+
+ +

例

+ +

この基本的な例では、 EventSource を生成してサーバーからイベントを受け取ります。 sse.php という名前のページがイベントを生成する責任を負います。

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

受信されたそれぞれのイベントは、 EventSource オブジェクトの onmessage イベントハンドラーを実行させます。ここでは、新しい {{HTMLElement("li")}} 要素を生成してその中にメッセージのデータを書き込み、この要素を文書の中にある既存のリスト要素に追加します。

+ +
+

メモ: この例の全容が GitHub にあります。Simple SSE demo using PHP をご覧ください。

+
+ +

仕様書

+ + + + + + + + + + + + +
仕様書備考
{{SpecName('HTML WHATWG', "comms.html#the-eventsource-interface", "EventSource")}}{{Spec2('HTML WHATWG')}}
+ + + +

Browser compatibility

+ +
+ + +

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

+
+ +

関連情報

+ + diff --git a/files/ja/web/api/eventsource/onerror/index.html b/files/ja/web/api/eventsource/onerror/index.html new file mode 100644 index 0000000000..653eaa868d --- /dev/null +++ b/files/ja/web/api/eventsource/onerror/index.html @@ -0,0 +1,65 @@ +--- +title: EventSource.onerror +slug: Web/API/EventSource/onerror +tags: + - API + - EventSource + - Server-sent events + - イベントハンドラ + - プロパティ + - リファレンス +translation_of: Web/API/EventSource/onerror +--- +
{{APIRef('WebSockets API')}}
+ +
+ +

{{domxref("EventSource")}} インターフェースのonerror プロパティは、エラーが発生し、EventSource オブジェクトに対して {{event("error")}} が送出されたときに呼び出される {{domxref("EventHandler")}} です。

+ +

構文

+ +
eventSource.onerror = function
+ +

例

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

メモ: 完全な例を GitHub から見つけることができます — PHP を用いた簡単な SSE のデモ を参照。

+
+ +

仕様

+ + + + + + + + + + + + + + +
仕様ステータスコメント
{{SpecName('HTML WHATWG', "comms.html#handler-eventsource-onerror", "onerror")}}{{Spec2('HTML WHATWG')}}初期定義
+ + + +

ブラウザ互換性

+ +
+ + +

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

+
+ +

関連情報

+ + diff --git a/files/ja/web/api/eventsource/onmessage/index.html b/files/ja/web/api/eventsource/onmessage/index.html new file mode 100644 index 0000000000..4c6da58844 --- /dev/null +++ b/files/ja/web/api/eventsource/onmessage/index.html @@ -0,0 +1,69 @@ +--- +title: EventSource.onmessage +slug: Web/API/EventSource/onmessage +tags: + - API + - EventSource + - Server-sent events + - onmessage + - イベントハンドラ + - プロパティ + - リファレンス +translation_of: Web/API/EventSource/onmessage +--- +
{{APIRef('WebSockets API')}}
+ +

{{domxref("EventSource")}} インターフェースの onmessage プロパティは、メッセージイベントが受信されたとき、つまりソースからメッセージが送信されたときに呼び出される {{domxref("EventHandler")}} です。

+ +

onmessage イベントハンドラのイベントオブジェクトの型は {{domxref("MessageEvent")}} です。

+ +

構文

+ +
eventSource.onmessage = function
+ +

例

+ +
evtSource.onmessage = function(e) {
+  var newElement = document.createElement("li");
+
+  newElement.textContent = "message: " + e.data;
+  eventList.appendChild(newElement);
+}
+ +
+

メモ: 完全な例を GitHub から見つけることができます — PHP を用いた簡単な SSE のデモ を参照。

+
+ +

仕様

+ + + + + + + + + + + + + + +
仕様ステータスコメント
{{SpecName('HTML WHATWG', "comms.html#handler-eventsource-onmessage", "onmessage")}}{{Spec2('HTML WHATWG')}}初期定義
+ + + +

ブラウザ互換性

+ +
+ + +

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

+
+ +

関連情報

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