サーバーセントイベントを使用してプッシュテクノロジーを実装します

コアポイント

• サーバーセントイベント（SSE）APIはプッシュテクノロジーを実装し、データは継続的なオープン接続を介してクライアントにストリーミングされ、新しい接続を繰り返し確立するオーバーヘッドを回避します。
• 双方向通信を許可するWebSocketsとは異なり、SSEはサーバーがクライアントにメッセージをプッシュすることのみを許可します。ただし、SSEには、カスタムメッセージタイプのサポートや自動再接続と切断など、特定の利点があります。
• クライアントは、名前のイベントを実装することにより、イベントストリームでさまざまなイベントタイプを処理できます。さらに、eventsourceのonerrorイベントハンドラーを使用してエラーを処理することができ、クライアントはメソッドを呼び出すことでいつでもEventSource接続を終了できます。 close()

websocketsとの比較

多くの人々は、より強力なWebSockets APIによってしばしば不明瞭になっているため、SSEの存在を完全に認識していません。 WebSocketsを使用すると、クライアントとサーバー間の双方向のフルダップレックス通信が可能になりますが、SSEはサーバーがクライアントにメッセージをプッシュすることのみを許可します。ほぼリアルタイムのパフォーマンスまたは双方向通信を必要とするアプリケーションは、WebSocketに適している場合があります。ただし、SSEにはWebSocketよりもいくつかの利点があります。たとえば、SSEはカスタムメッセージタイプと自動再接続切断をサポートしています。これらの機能はWebSocketsで実装できますが、デフォルトではSSEで使用できます。 WebSocketsアプリケーションには、WebSocketsプロトコルをサポートするサーバーも必要です。対照的に、SSEはHTTP上に構築されており、標準のWebサーバーに実装できます。

検出サポート

SSEのサポートは比較的高く、Internet Explorerはまだサポートしていない唯一の主要なブラウザです。ただし、IEが遅れている限り、機能検出が必要です。クライアントでは、SSEはEventsourceオブジェクトを使用して実装します。これは、グローバルオブジェクトのプロパティです。次の関数は、EventSourceコンストラクターがブラウザで利用可能であるかどうかを検出します。関数がtrueを返す場合、SSEを使用できます。それ以外の場合は、ポーリングなどのバックアップメカニズムを使用する必要があります。

function supportsSSE() {
  return !!window.EventSource;
}

接続

イベントストリームに接続するには、以下に示すようにEventSourceコンストラクターを呼び出します。サブスクライブするイベントストリームのURLを指定する必要があります。コンストラクターは自動的に接続を開く責任があります。

EventSource(url);

イベントハンドラーonopen

接続を確立した後、eventsourceの

イベントハンドラーが呼び出されます。イベントハンドラーは、イベントを唯一のパラメーターとして開きます。次の例は、一般的なonopenイベントハンドラーを示しています。 onopen

source.onopen = function(event) {
  // 处理打开事件
};

eventSourceイベントハンドラーは、

メソッドを使用して記述することもできます。この代替構文は、複数のハンドラーを同じイベントに添付できるため、addEventListener()よりも優れています。以下はonopenを使用して、以前のaddEventListener()イベントハンドラーを書き直しました。 onopen

source.addEventListener("open", function(event) {
  // 处理打开事件
}, false);

メッセージを受け取ります

クライアントは、一連のDOMメッセージイベントとしてイベントストリームを解釈します。サーバーから受け取った各イベントは、eventsourceのonmessageイベントハンドラーをトリガーします。 onmessageハンドラーは、メッセージイベントをそのみのパラメーターとして取得します。次の例では、onmessageイベントハンドラーを作成します。

function supportsSSE() {
  return !!window.EventSource;
}

メッセージイベントには、データ、Origin、およびlastEventidの3つの重要なプロパティが含まれています。名前が示すように、データには実際のメッセージデータ（文字列形式）が含まれています。データはJSON文字列であり、json.parse（）メソッドに渡すことができます。 Originプロパティには、リダイレクト後のイベントストリームの最終URLが含まれています。原点を確認して、メッセージが予想されたソースからのみ受信されることを確認する必要があります。最後に、LastEventidプロパティには、イベントストリームで見られる最後のメッセージ識別子が含まれています。サーバーは、このプロパティを使用して、個々のメッセージに識別子を追加できます。識別子が見られない場合、LastEventidは空の文字列になります。 onmessageイベントハンドラーは、addEventListener()メソッドを使用して記述することもできます。次の例は、addEventListener()を使用して書き直されたonmessageイベントハンドラーを示しています。

EventSource(url);

イベントの命名

name eventを実装することにより、単一のイベントストリームでさまざまなタイプのイベントを指定できます。名前付きイベントは、メッセージイベントハンドラーによって処理されません。代わりに、各タイプのネーミングイベントは、独自のユニークなハンドラーによって処理されます。たとえば、イベントストリームにFooという名前のイベントが含まれている場合、次のイベントハンドラーが必要です。 Fooイベントハンドラーは、メッセージイベントハンドラーと同じであることに注意してください。ただし、イベントタイプが異なることを除きます。もちろん、他のタイプの名前付きメッセージには、個別のイベントハンドラーが必要です。

source.onopen = function(event) {
  // 处理打开事件
};

エラーの処理

イベントフローに問題がある場合、eventsourceのonerrorイベントハンドラーがトリガーされます。エラーの一般的な原因は、接続の中断です。 EventSourceオブジェクトは自動的にサーバーに再接続しようとしますが、接続が切断されるとエラーイベントもトリガーされます。次の例は、onerrorイベントハンドラーを示しています。

source.addEventListener("open", function(event) {
  // 处理打开事件
}, false);

もちろん、以下に示すように、

イベントハンドラーをonerrorを使用して書き換えることもできます。 addEventListener()

source.onmessage = function(event) {
  var data = event.data;
  var origin = event.origin;
  var lastEventId = event.lastEventId;
  // 处理消息
};

切断

クライアントは、

メソッドを呼び出すことにより、いつでもEventSource接続を終了できます。 close()の構文を以下に示します。 close()メソッドはパラメーターを受け入れず、値を返しません。 close()

source.addEventListener("message", function(event) {
  var data = event.data;
  var origin = event.origin;
  var lastEventId = event.lastEventId;
  // 处理消息
}, false);

接続ステータス

Eventsource接続のステータスは、ReadyStateプロパティに保存されます。ライフサイクルの任意の時点で、接続は、可能な3つの状態のいずれかに、オン、オン、およびオフになります。次のリストは、各状態について説明しています。

• 接続 - Eventsourceオブジェクトが作成されると、最初に接続状態に入ります。この期間中、接続は確立されていません。確立された接続が失われた場合、EventSourceは接続状態にも移行します。接続内のeventSocketのReadyState値は0です。この値は、定数Eventsource.connectingとして定義されます。
• open - 確立された接続がOpenと呼ばれます。開いているEventSourceオブジェクトは、データを受信できます。 1のReadyState値は、オープン状態に対応します。この値は、定数Eventsource.openとして定義されます。
• close - 接続が確立されず、再接続が試みられない場合、eventsourceは閉じられています。この状態は、通常、close()メソッドを呼び出すことによって入力されます。閉じた状態でのEventSourceのReadyState値は2です。この値は、定数eventsource.closedとして定義されます。

次の例は、ReadyStateプロパティを使用してEventSource接続を確認する方法を示しています。ハードコード化されたReadyState値を回避するために、この例では状態定数を使用します。

function supportsSSE() {
  return !!window.EventSource;
}

結論

この記事では、SSEのクライアントの側面を紹介します。 SSEについてもっと知りたい場合は、サーバーSSEを読むことをお勧めします。また、node.jsでSSEに関するより実用的な記事を書きました。楽しむ！

SSEを実装するための前提条件は何ですか？

SSEはWebSocketsとどう違うのですか？

SSEとWebSocketsの両方がリアルタイムのデータアップデートを提供しますが、その機能とユースケースはさまざまです。 WebSocketsは、クライアントとサーバーの間に双方向通信チャネルを提供し、両当事者がいつでもデータを送信できるようにします。一方、SSEは、サーバーのみがクライアントに更新をプッシュできる一方向の通信チャネルです。これにより、SSEは、データの更新が主にサーバーによって開始されるアプリケーションにより適しています。

SSEはサーバー側の言語で使用できますか？

はい、SSEは任意のHTTP対応サーバー側の言語で使用できます。これには、Node.js、Python、PHP、Rubyなどの言語が含まれます。重要なのは、正しいHTTPヘッダーを設定し、SSE仕様に従ってデータをフォーマットすることです。

SSEの接続エラーまたは割り込みを処理する方法は？

クライアントにSSEを実装するために使用されるEventSource APIは、接続が失われたときにサーバーに自動的に再接続しようとします。また、EventSourceオブジェクトの「エラー」イベントを聞いて、接続エラーまたは割り込みを手動で処理することもできます。

SSEを使用してクライアントからサーバーにデータを送信できますか？

いいえ、SSEは、サーバーからクライアントへの一方向通信を目的としています。クライアントからサーバーにデータを送信する必要がある場合は、従来のAJAXリクエストを使用するか、WebSocketsなどの双方向通信テクノロジーに切り替えることができます。

SSEはすべてのブラウザをサポートしていますか？

ほとんどの最新のブラウザはSSEをサポートしています。ただし、Internet ExplorerはSSEをサポートしていません。 eventsource.jsなどのポリフィルを使用して、サポートされていないブラウザーでSSEのサポートを追加できます。

SSE接続を閉じる方法は？

eventsourceオブジェクトのclose()メソッドを呼び出すことで、SSE接続を閉じることができます。これにより、サーバーがクライアントにより多くの更新を送信することができなくなります。

マルチユーザーのリアルタイムアプリケーションにSSEを使用できますか？

はい、マルチユーザーのリアルタイムアプリケーションにはSSEを使用できます。ただし、各ユーザーがサーバーへの別の接続を開くことを忘れないでください。多数のユーザーがいる場合、これによりサーバーの負荷が過剰になる可能性があります。

サーバーから送信されたデータに「イベント」フィールドを含めることで、さまざまな種類のイベントを送信できます。クライアントは、EventSourceオブジェクトの

メソッドを使用して、これらの特定のイベントタイプを聞くことができます。 addEventListener()

SSEをREST APIで使用できますか？

はい、REST APIでSSEを使用できます。サーバーは、リソースが変更されたときにクライアントに更新を送信できます。これは、クライアントとサーバーの状態を投票せずに同期させるのに役立ちます。

以上がサーバーセントイベントを使用してプッシュテクノロジーを実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。