コアポイント

• サーバーセントイベント（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オブジェクトを使用して実裝します。これは、グローバルオブジェクトのプロパティです。次の関數(shù)は、EventSourceコンストラクターがブラウザで利用可能であるかどうかを検出します。関數(shù)がtrueを返す場合、SSEを使用できます。それ以外の場合は、ポーリングなどのバックアップメカニズムを使用する必要があります。

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

接続

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

EventSource(url);

イベントハンドラーonopen

接続を確立した後、eventsourceの

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

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

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

メソッドを使用して記述することもできます。この代替構文は、複數(shù)のハンドラーを同じイベントに添付できるため、addEventListener()よりも優(yōu)れています。以下は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つの狀態(tài)のいずれかに、オン、オン、およびオフになります。次のリストは、各狀態(tài)について説明しています。

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

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

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を使用できます。ただし、各ユーザーがサーバーへの別の接続を開くことを忘れないでください。多數(shù)のユーザーがいる場合、これによりサーバーの負荷が過剰になる可能性があります。

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

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

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

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

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