コアポイント

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

websocketsとの比較

多くの人々は、より強(qiáng)力なWebSockets APIによってしばしば不明瞭になっているため、SSEの存在を完全に認(rèn)識(shí)していません。 WebSocketsを使用すると、クライアントとサーバー間の雙方向のフルダップレックス通信が可能になりますが、SSEはサーバーがクライアントにメッセージをプッシュすることのみを許可します。ほぼリアルタイムのパフォーマンスまたは雙方向通信を必要とするアプリケーションは、WebSocketに適している場(chǎng)合があります。ただし、SSEにはWebSocketよりもいくつかの利點(diǎn)があります。たとえば、SSEはカスタムメッセージタイプと自動(dòng)再接続切斷をサポートしています。これらの機(jī)能はWebSocketsで実裝できますが、デフォルトではSSEで使用できます。 WebSocketsアプリケーションには、WebSocketsプロトコルをサポートするサーバーも必要です。対照的に、SSEはHTTP上に構(gòu)築されており、標(biāo)準(zhǔn)のWebサーバーに実裝できます。

検出サポート

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

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

接続

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

EventSource(url);

イベントハンドラーonopen

接続を確立した後、eventsourceの

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

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

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

メソッドを使用して記述することもできます。この代替構(gòu)文は、複數(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が含まれています。原點(diǎn)を確認(rèn)して、メッセージが予想されたソースからのみ受信されることを確認(rèn)する必要があります。最後に、LastEventidプロパティには、イベントストリームで見られる最後のメッセージ識(shí)別子が含まれています。サーバーは、このプロパティを使用して、個(gè)々のメッセージに識(shí)別子を追加できます。識(shí)別子が見られない場(chǎng)合、LastEventidは空の文字列になります。 onmessageイベントハンドラーは、addEventListener()メソッドを使用して記述することもできます。次の例は、addEventListener()を使用して書き直されたonmessageイベントハンドラーを示しています。

EventSource(url);

イベントの命名

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

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

エラーの処理

イベントフローに問(wèn)題がある場(chǎng)合、eventsourceのonerrorイベントハンドラーがトリガーされます。エラーの一般的な原因は、接続の中斷です。 EventSourceオブジェクトは自動(dòng)的にサーバーに再接続しようとしますが、接続が切斷されるとエラーイベントもトリガーされます。次の例は、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()の構(gòu)文を以下に示します。 close()メソッドはパラメーターを受け入れず、値を返しません。 close()

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

接続ステータス

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

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

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

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

結(jié)論

この記事では、SSEのクライアントの側(cè)面を紹介します。 SSEについてもっと知りたい場(chǎng)合は、サーバーSSEを読むことをお?jiǎng)幛幛筏蓼埂￥蓼?、node.jsでSSEに関するより実用的な記事を書きました。楽しむ！

SSEを?qū)g裝するための前提條件は何ですか？

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

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

SSEはサーバー側(cè)の言語(yǔ)で使用できますか？

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

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

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

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

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

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

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

SSE接続を閉じる方法は？

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

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

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

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

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

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

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

以上がサーバーセントイベントを使用してプッシュテクノロジーを?qū)g裝しますの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。