サーバーセントイベント-jsチュートリアル-php.cn

Server-sent Events

コアポイント

サーバー送信イベント（SSE）は、ストリームを使用してサーバーからクライアントにデータやDOMイベントをプッシュする方法であり、スポーツスコアや在庫見積など、データを定期的に更新する必要がある状況に最適です。
Eventsourceオブジェクトの作成により、イベントストリームを購読し、オープン、メッセージ、およびエラーイベントを処理できます。
サーバーからイベントを送信するには、Content-typeヘッダー（valuetext/event-stream）およびUTF-8文字エンコードを使用してコンテンツを提供する必要があります。サーバーがイベントを送信するための構文には、データ、イベントタイプ、イベント識別子、および再試行間隔が含まれます。
イベントの処理では、onmessage関数（メッセージイベントを送信するアプリケーションのみ）を使用できますが、addEventListenerメソッドはカスタムイベントの処理に柔軟に対応します。
ほとんどの最新のブラウザー（Chrome、Firefox、Safariを含む）サポートサーバー送信イベント（SSE）ですが、インターネットエクスプローラーはそうではありません。すべてのブラウザーのサポートを必要とするアプリケーションの場合、ウェブケットまたは長いポーリングがより適切かもしれません。

はじめに

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

IDフィールドを使用して、

イベントの処理

エラーの処理

ブラウザの実装の違い

ブラウザのサポートとフォールバック戦略

あなたの国の全国バスケットボールチームが世界のバスケットボール選手権に参加していると仮定します。ゲームをフォローしたいのですが、ゲーム時間が勤務時間と競合するため、見ることができません。

幸いなことに、ナショナルニュースサービスには非常に優れたWeb開発チームがあります。彼らは、ファウルやスコアが発生するたびに更新するスポーツ情報スクロールディスプレイを構築しました。 URLにアクセスすると、更新はブラウザに直接プッシュされます。もちろん、あなたは彼らがそれをどのようにしたかを知りたいと思うでしょう。答えは次のとおりです。サーバーはイベントを送信します。

サーバーの送信イベントは、ストリームを使用してサーバーからクライアントにデータやDOMイベントをプッシュする方法です。在庫の見積もり、スポーツスコア、フライトトラッキング、電子メール通知 - データを定期的に更新する必要がある状況に適しています。

待ってください！あなたが言うのを聞いた、xmlhttprequestまたはwebsocketsを使用してこれをすでに行うことはできませんか？はい、はい。ただし、そうするためには、これらのオブジェクトを拡張して、Events Source自体の機能を実装する必要があります。サーバー側での予防策

サーバーはイベントを送信するため、データストリームであるため、長期的な接続が必要です。多数の同時接続を処理できるサーバーを使用する必要があります。もちろん、イベント駆動型サーバーは、ストリーミングイベントに特に適しています。これらには、node.js、juggernaut、twistedが含まれます。 nginxの場合、nginx-push-stream-moduleモジュールを使用できます。ただし、サーバーの構成はこの記事の範囲外であり、使用しているサーバーによって異なります。

eventsourceオブジェクトを使用してストリームをサブスクライブする方法を見てみましょう。次に、イベントがどのように送信および処理されるかを確認します。

イベントストリームを購読する：eventsourceオブジェクト

eventsourceオブジェクトを作成するのは簡単です。

var evtsrc = new EventSource('./url_of/event_stream/',{withCredentials:false});

ログイン後にコピー

eventSourceコンストラクターは、最大2つのパラメーターを受け入れます

a
属性の値を定義するために使用される辞書パラメーター。 withCredentials

は唯一の可能な辞書メンバーです。その値は真または偽である可能性があります。（辞書の詳細については、Web IDLの仕様を参照してください。）

withCredentials辞書パラメーターは、ユーザー資格情報（Cookie）のクロスドメイン要求の場合にのみ必要です。これまでのところ、クロスドメインのEventsourceリクエストをサポートするブラウザはありません。したがって、この例には2番目のパラメーターは含まれません。

eventsource接続が開いている場合、

イベントがトリガーされます。

プロパティを設定して、イベントを処理する関数を定義できます。 open onopen

接続に問題がある場合、エラーがトリガーされます。これらのイベントのハンドラー関数を定義するには、

var evtsrc = new EventSource('./url_of/event_stream/');
evtsrc.onopen = function(openevent){
    // 连接打开时执行的操作
}

ログイン後にコピー

プロパティを使用できます。「トレーニングエラー」セクションで、いくつかのエラーイベントの原因について説明します。

onerror

ストーリーイベントはデフォルトでメッセージイベントになります。メッセージイベントを処理するために、

evtsrc.onerror = function(openevent){
    // 发生错误时执行的操作
}

ログイン後にコピー

属性を使用してハンドラー関数を定義できます。

onmessage

イベントを聴くために

evtsrc.onmessage = function(openevent){
    // 接收到消息事件时执行的操作
}

ログイン後にコピー

を使用することもできます。これは、処理イベントセクションで表示されるように、カスタムイベントを処理する唯一の方法です。

addEventListener()

接続を閉じるには、

var onerrorhandler = function(openevent){
    // 执行的操作
}
evtsrc.addEventListener('error',onerrorhandler,false);

ログイン後にコピー

メソッドを使用します。

close() したがって、

eventsourceオブジェクトを作成し、オープニング、メッセージ、エラーイベントのハンドラーを定義しました。ただし、この方法が機能するためには、ストリーミングイベント用のURLが必要です。

evtsrc.close();

ログイン後にコピー

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

サーバーは、イベントを送信します。これは、URLからストリームの一部として配信されるテキストのスニペットです。ブラウザがデータをストリームとして扱うためには、次のことが必要です。

ヘッダー（値は

UTF-8文字エンコードを使用します。 Content-type text/event-stream

：送信されるメッセージ。

：発送されるイベントの種類。 data:
：クライアントが再接続するときに使用されるイベント識別子。 event:
：ブラウザがURLに再接続しようとする前に、何ミリ秒を通過すべきか。 id:
の間では、retry:フィールドのみが必要です。

メッセージイベントを送信

var evtsrc = new EventSource('./url_of/event_stream/',{withCredentials:false});

ログイン後にコピー

フィールドの値は、メッセージイベントのdata属性の値になります。上記のように、サーバーはデフォルトでイベントを送信しますメッセージイベントです。ただし、後で説明するように、dataフィールドを含めることでカスタムイベントを発送することもできます。 event

var evtsrc = new EventSource('./url_of/event_stream/');
evtsrc.onopen = function(openevent){
    // 连接打开时执行的操作
}

ログイン後にコピー

dataイベント間の空白線に注意してください。クライアントがイベントを受け取るためには、イベントの後に空白の行が必要です。コメントはコロンから始まります。

カスタムイベントを送信

特に指定しない限り、イベントのタイプはメッセージです。これを行うには、A イベントを追加し、JSON形式の文字列としてデータを送信します。

event startingfiveここでは、メッセージイベントの代わりに

イベントを聴く必要があります。ただし、私たちの

evtsrc.onerror = function(openevent){
    // 发生错误时执行的操作
}

ログイン後にコピー

フィールドは、イベントの

プロパティの価値になります。 startingfive data「処理イベント」セクションでdataプロパティとMessageEventインターフェイスについて説明します。

接続を管理し、再接続data

今、サーバーはイベントをブラウザにプッシュしますが、現実はより微妙です。サーバーが接続を開いたままにした場合、EventSource要求は拡張リクエストになります。閉じている場合、ブラウザは再接続する前に数秒待ちます。たとえば、URLがファイル終了タグを送信すると、接続が閉じられる場合があります。

各ブラウザには、独自のデフォルトの再接続間隔があります。ほとんどは3〜6秒後に再接続します。ただし、この間隔を制御することは

フィールドを含めることができます。

フィールドは、URLに再接続する前にクライアントが待つ必要があるミリ秒数を示します。上記の例からイベントを構築して変更して、5秒（5000ミリ秒）の再試行間隔を含めましょう。

retry クライアントが接続されている限り、イベントストリームはアクティブに保つことができます。アーキテクチャとアプリケーションに応じて、サーバーが定期的に接続を閉じることをお勧めします。 retry IDフィールドを使用して、

一意の識別子を設定します

evtsrc.onmessage = function(openevent){
    // 接收到消息事件时执行的操作
}

ログイン後にコピー

ブラウザがURLに再接続すると、接続ポイントで利用可能なデータが受信されます。ただし、ゲーム情報スクロールディスプレイの場合、訪問者に見逃したものを知らせたい場合があります。これが、各イベントにIDを設定するためのベストプラクティスです。次の例では、スコアリングイベントの一部としてIDを送信しています。

var evtsrc = new EventSource('./url_of/event_stream/',{withCredentials:false});

ログイン後にコピー

値はストリームに固有のものでなければなりません。この場合、ショットスコアの時間を使用しています。

idフィールドは、このイベントオブジェクトのlastEventIdプロパティになります。しかし、それには別の目的があります。接続が閉じられている場合、ブラウザには次のリクエストにLast-Event-IDヘッダーが含まれます。それをストリームのブックマークと考えてください。 Last-Event-IDヘッダーが存在する場合、アプリケーションの応答を調整して、それに続くイベントのみが送信されるようにすることができます。

イベントの処理

上記のように、すべてのイベントはデフォルトのメッセージイベントになります。各メッセージイベントには、MessageEventインターフェイスで定義された3つのプロパティがあります。

event.data: メッセージイベントの一部として送信されたメッセージまたはメッセージを返します。
event.origin: メッセージのソースを返します。これは、通常、メッセージを送信するスキームを含む文字列です（たとえば：http、https）、hostname、およびport。
event.lasteventid: 最後のイベントの一意の識別子を返します。

メッセージイベントがトリガーされるたびに、onmessage関数が呼び出されます。これは、メッセージイベントを送信するだけのアプリケーションに最適です。ただし、スコアまたはイベントを送信する場合（例に示すように）、その制限が明らかになります。 を使用してより柔軟に対応します。次のコードでは、startingfiveイベントを処理するためにaddEventListenerを使用しています。 addEventListener startingfive

（2番目の部分、スペースの制限が原因で、段落で質問してください。）

var evtsrc = new EventSource('./url_of/event_stream/');
evtsrc.onopen = function(openevent){
    // 连接打开时执行的操作
}

ログイン後にコピー

以上がサーバーセントイベントの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。