From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/web/api/eventsource/index.html | 125 ++++++++++++++++++++++++++++++++ 1 file changed, 125 insertions(+) create mode 100644 files/ja/web/api/eventsource/index.html (limited to 'files/ja/web/api/eventsource/index.html') 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")}}

+
+ +

関連情報

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