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/server-sent_events/index.html | 151 ++++++++++++++ .../using_server-sent_events/index.html | 230 +++++++++++++++++++++ 2 files changed, 381 insertions(+) create mode 100644 files/ja/web/api/server-sent_events/index.html create mode 100644 files/ja/web/api/server-sent_events/using_server-sent_events/index.html (limited to 'files/ja/web/api/server-sent_events') diff --git a/files/ja/web/api/server-sent_events/index.html b/files/ja/web/api/server-sent_events/index.html new file mode 100644 index 0000000000..ab17626629 --- /dev/null +++ b/files/ja/web/api/server-sent_events/index.html @@ -0,0 +1,151 @@ +--- +title: Server-sent events +slug: Web/API/Server-sent_events +tags: + - API + - SSE + - Server-sent events + - 概要 +translation_of: Web/API/Server-sent_events +--- +

{{DefaultAPISidebar("Server Sent Events")}}

+ +

伝統的には、ウェブページが新たなデータを受け取るために、サーバーにリクエストを送信しなければなりません。すなわち、ページがサーバーからデータを要求します。サーバー送信イベントによって、サーバーがウェブページにメッセージをプッシュ送信することにより、サーバーからウェブページへ新たなデータをいつでも送信することができます。入ってくるメッセージは、ウェブページ内のイベントおよびデータとして扱うことができます。

+ +

概念と使用方法

+ +

Server-Sent events の使い方を学ぶには、 Server-Sent events の利用を参照してください。

+ +

インターフェイス

+ +
+
{{domxref("EventSource")}}
+
サーバーへの接続、イベントやデータの受信、エラー、コネクションの切断など、すべての機能の扱いを定義します。
+
+ +

例

+ + + +

仕様策定状況

+ + + + + + + + + + + + + + + + +
仕様書策定状況コメント
{{SpecName('HTML WHATWG', '#server-sent-events', 'Server-sent events')}}{{Spec2('HTML WHATWG')}}
+ +

ブラウザーの対応

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
機能ChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
EventSource の対応6{{CompatNo}}{{CompatGeckoDesktop("6.0")}}{{CompatNo}}{{CompatVersionUnknown}}5
共有かつ専用ワーカーで使用可[1]{{CompatVersionUnknown}}{{CompatNo}}{{CompatGeckoDesktop("53.0")}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
機能AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
EventSource の対応4.445{{CompatNo}}124.1
共有かつ専用ワーカーで使用可[1]{{CompatVersionUnknown}}{{CompatGeckoMobile("53.0")}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

[1] 但しサービスワーカーはまだです。

+ +

関連情報

+ +

ツール

+ + + + + + + +

その他のリソース

+ + diff --git a/files/ja/web/api/server-sent_events/using_server-sent_events/index.html b/files/ja/web/api/server-sent_events/using_server-sent_events/index.html new file mode 100644 index 0000000000..14030bf050 --- /dev/null +++ b/files/ja/web/api/server-sent_events/using_server-sent_events/index.html @@ -0,0 +1,230 @@ +--- +title: Server-Sent Events の利用 +slug: Web/API/Server-sent_events/Using_server-sent_events +tags: + - Advanced + - DOM + - Guide + - Server-sent events +translation_of: Web/API/Server-sent_events/Using_server-sent_events +--- +

{{DefaultAPISidebar("Server Sent Events")}}

+ +
+

Server-Sent Events を使用する Web アプリケーションの開発は、とても簡単です。Web アプリケーションへイベントを送り込む、わずかなコードがサーバ上で必要になりますが、Web アプリケーション側は他の種類のイベントを扱うものとほぼ同じ動作になります。

+
+ +

サーバからイベントを受信する

+ +

Server-Sent Event API は EventSource インターフェイスに含まれています。イベントを受け取るためにサーバへの接続を開始するには、イベントを生成するスクリプトの URI を指定する、新たな EventSource オブジェクトを作成します。例えば:

+ +
var evtSource = new EventSource("ssedemo.php");
+
+ +

イベントを生成するスクリプトが別のドメインに存在する場合は、URI とオプションディクショナリーの両方を指定する新たな EventSource オブジェクトを作成します。クライアントスクリプトが example.com にある場合の例:

+ +
var evtSource = new EventSource("//api.example.com/ssedemo.php", { withCredentials: true } );
+ +
+

注記: EventSource をサポートしていないブラウザがあります。ブラウザ実装状況を確認してください。

+
+ +

インスタンスを生成したら、メッセージの受け取りを始めることができます:

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

このコードは入力メッセージ (すなわち event フィールドを持たない、サーバからの通知) を受信して、メッセージのテキストをドキュメントの HTML にあるリストへ追加します。

+ +

addEventListener() を使用してイベントを待ち受けることもできます:

+ +
evtSource.addEventListener("ping", function(e) {
+  var newElement = document.createElement("li");
+
+  var obj = JSON.parse(e.data);
+  newElement.innerHTML = "ping at " + obj.time;
+  eventList.appendChild(newElement);
+}, false);
+
+ +

前のコードと似ていますが、event フィールドに "ping" が設定されたメッセージがサーバから送られたときに、自動的に呼び出されることが異なります。こちらは data フィールドの JSON をパースして、情報を出力します。

+ +

サーバからイベントを送信する

+ +

イベントを送信するサーバサイドのスクリプトでは、MIME タイプ text/event-stream での応答が必要です。各々の通知は、2 つの改行で終わるテキストのブロックとして送信されます。イベントストリームの形式について、詳しくは {{ anch("Event stream format") }} をご覧ください。

+ +

私たちが使用している PHP のコード例を以下に示します:

+ +
date_default_timezone_set("America/New_York");
+header("Content-Type: text/event-stream\n\n");
+
+$counter = rand(1, 10);
+while (1) {
+  // "ping" イベントを毎秒送信
+
+  echo "event: ping\n";
+  $curDate = date(DATE_ISO8601);
+  echo 'data: {"time": "' . $curDate . '"}';
+  echo "\n\n";
+
+  // シンプルなメッセージをランダムな間隔で送信
+
+  $counter--;
+
+  if (!$counter) {
+    echo 'data: This is a message at time ' . $curDate . "\n\n";
+    $counter = rand(1, 10);
+  }
+
+  ob_end_flush();
+  flush();
+  sleep(1);
+}
+
+ +

このコードは、イベントタイプが "ping" のイベントを毎秒生成します。各々のイベントのデータは、イベントが生成された時刻の ISO 8601 形式タイムスタンプを含む JSON オブジェクトです。またランダムな間隔で、シンプルなメッセージ (イベントタイプなし) を送信します。

+ +

エラーハンドリング

+ +

問題が発生した場合 (ネットワークのタイムアウトやアクセスコントロールに関する問題など) は、エラーイベントを生成します。EventSource で onerror コールバックを実装すると、エラーに対してプログラムで対処できます:

+ +
evtSource.onerror = function(e) {
+  alert("EventSource failed.");
+};
+
+ +

Firefox 22 では、エラーイベントの種類を見分ける方法はありません。

+ +

イベントストリームを閉じる

+ +

デフォルトではクライアントとサーバの間のコネクションを閉じると、コネクションがリセットされます。コネクションは .close() メソッドで終了します。

+ +
evtSource.close();
+ +

イベントストリームの形式

+ +

イベントストリームはテキストデータのシンプルなストリームであり、UTF-8 を用いてエンコードされなければなりません。イベントストリーム内のメッセージは、2 つの改行文字で区切られます。行の先頭にあるコロンは本質的にコメントを表し、無視されます。

+ +
注記: コメント行は、コネクションがタイムアウトになるのを防ぐために使用できます。サーバはコネクションを維持するために、定期的にコメントを送信できます。
+ +

各々のメッセージは、フィールドを一覧化した 1 つ以上のテキスト行で構成されます。各々のフィールドは「フィールド名、その次にコロン、さらにその後にフィールドの値であるテキストデータ」で表されます。

+ +

フィールド

+ +

以下のフィールド名が仕様書で定義されています:

+ +
+
event
+
イベントのタイプです。これが指定されている場合、イベントはブラウザ内で、イベント名に応じたイベントリスナへ送られます。Web サイトのソースコードでは名前付きイベントを受け取るために、addEventListener() を使用します。メッセージでイベント名が指定されていない場合は、onmessage ハンドラが呼び出されます。
+
data
+
メッセージのデータフィールドです。EventSource が data: で始まる、複数の連続した行を受け取ったときは、それらを連結して各項目の間に改行文字を挿入します。終端の改行は取り除かれます。
+
id
+
EventSource オブジェクトの last event ID の値に設定する、イベント ID です。
+
retry
+
イベントの送信を試みるときに使用する reconnection time です。[What code handles this?] これは整数値であることが必要で、reconnection time をミリ秒単位で指定します。整数値ではない値が指定されると、このフィールドは無視されます。
+
+ +

他のフィールド名は、すべて無視されます。

+ +
注記: 行にコロンが含まれない場合は行全体がフィールド名であり、値は空文字列として扱います。
+ +

例

+ +

データのみのメッセージ

+ +

以下の例では、3 つのメッセージが送信されています。最初のメッセージはコロン文字から始まっているため、コメントです。前述したように、コメントはメッセージが定期的に送信されない可能性がある場合のキープアライブとして有用です。

+ +

2 番目のメッセージは、値が "some text" である data フィールドを持っています。3 番目のメッセージは、値が "another message\nwith two lines" である data フィールドを持っています。値に改行文字があることに注意してください。

+ +
: this is a test stream
+
+data: some text
+
+data: another message
+data: with two lines
+
+ +

名前付きイベント

+ +

こちらの例では、名前付きイベントをいくつか送信しています。それぞれのイベントは event フィールドで指定されたイベント名を持っており、またクライアントでの処理に必要なデータを含む、適切な JSON 文字列を値に持つ data フィールドもあります。もちろん、data フィールドは任意の文字列データを持つことができます。JSON である必要はありません。

+ +
event: userconnect
+data: {"username": "bobby", "time": "02:33:48"}
+
+event: usermessage
+data: {"username": "bobby", "time": "02:34:11", "text": "Hi everyone."}
+
+event: userdisconnect
+data: {"username": "bobby", "time": "02:34:23"}
+
+event: usermessage
+data: {"username": "sean", "time": "02:34:36", "text": "Bye, bobby."}
+
+ +

組み合わせ

+ +

名前なしのメッセージだけ、または名前付きイベントだけを使用しなければならないことはありません。これらを 1 つのイベントストリーム内で混ぜ合わせることができます。

+ +
event: userconnect
+data: {"username": "bobby", "time": "02:33:48"}
+
+data: Here's a system message of some kind that will get used
+data: to accomplish some task.
+
+event: usermessage
+data: {"username": "bobby", "time": "02:34:11", "text": "Hi everyone."}
+ +

ブラウザ実装状況

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
機能ChromeFirefox (Gecko)Internet ExplorerOperaSafari
EventSource のサポート9{{CompatGeckoDesktop("6.0")}}{{CompatNo}}115
+
+ +
+ + + + + + + + + + + + + + + + + + + +
機能AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
EventSource のサポート42{{CompatUnknown}}{{CompatUnknown}}11.14
+
-- cgit v1.2.3-54-g00ecf