この記事はもともとリンクだった：https://cloud.tencent.com/developer/article/1194063
SSE技術を説明：新しいHTML5のイベント・サーバー・プッシュ技術を
序文
伝統的なAjaxのポーリング短い、彗星技術、WebSocketの技術：一般的には、限られたブラウザによるWeb端末のインスタントメッセージング技術の設計上の制約は、実装するのは容易ではないされている、最後の主流のWebインスタントメッセージングプログラムは、4種類の基本的、SSE（サーバー・送信されたイベント） 。技術的な強みと、これらの4つの方法の弱点は、を参照してください「のWebインスタントメッセージング技術のエンド在庫：短いポーリング、彗星、WebSocketを、SSE。」この記事では、SSE技術を捧げます。
サーバープッシュイベント（サーバー送信されたイベント）、SSEと呼ばれる、HTML 5仕様の不可欠な部分は、ブラウザにサーバーからリアルタイムにデータをプッシュするために使用することができています。同様にCOMETとのWebSocket技術に関して、サーバープッシュイベントの使用がより簡単に、サーバ側への変化は比較的小さいです。アプリケーションのいくつかのタイプのために、サーバープッシュイベントは、最良の選択肢です。
本論文では、サーバープッシュ（SSE）が詳細に記載されている、それは、対応する実装の詳細ブラウザ側とサーバー側が含まれ、実際に技術を使用するためのガイダンスを提供します。（同期に発表されたこの記事：http://www.52im.net/thread-335-1-1.html）
アウトライン
平均的なWebアプリケーション開発のために、ほとんどの開発者が精通していません。Webアプリケーションでは、ブラウザとサーバーの対話モード要求/応答の間で使用されます。ブラウザが要求を行い、サーバは、受信した要求に応じて対応する応答を生成します。ブラウザは、ユーザに提示受信した応答を処理します。応答の形式はHTML、XMLまたはJSONようなものであってもよいです。AJAXの人気とRESTアーキテクチャスタイル、レスポンスのデータ・フォーマットとして、JSONのサーバーより一層の活用と。Webアプリケーションは、XMLHttpRequestオブジェクトを使用するための要求を送信し、サーバから返されたデータは、コンテンツページが動的に更新されます。一般的には、ユーザーは、マウスのクリックや移動など、ページ上で動作し、対応するイベントがトリガされます。XMLHttpRequestオブジェクトによる部分ページ更新要求後にサーバの応答を取得します。サーバー側のデータ変更がブラウザに通知しますが、要求は、ブラウザを取得するためになされたもので、次回まで待つ必要が迅速に生成することができません。この方法の欠点は、ということです。データ・アプリケーションのためのいくつかの高いリアルタイムの要件については、この遅延は受け入れられません。
このようなアプリケーションのニーズを満たすために、我々は、ユーザーを最初に通知することができ、サーバ側でそのデータの変更を確実にするために、ブラウザにサーバーからデータをプッシュすることができるようにするいくつかの方法を持っている必要があります。現在、多くの一般的な解決策があり、それは主に2つのカテゴリに分けることができます。これらの2つの方法の違いは、HTTPプロトコルに基づいて実装するかどうかです。HTTPプロトコルのアプローチは、新しいHTML 5のWebSocketの仕様、および即興ポーリングなど、HTTPプロトコルを使用しての練習、HTML 5 COMETサーバ技術と、この記事では、プッシュイベントを紹介しますを使用することで、使用しないでください。技術のこれらのタイプの下に導入されます。
基本的な導入
HTML 5のサーバープッシュイベント（SSE技術）の導入前に、上記のいくつかのサーバー側プッシュ技術データの一部を紹介します。
最初はWebSocketのです。WebSocketの仕様は、HTML 5の重要な部分であり、多くの主流のブラウザでサポートされている、WebSocketの開発ベースの多くのアプリケーションがあります。名前が示すように、のように、ソケット接続を使用してのWebSocketは、TCPプロトコルに基づきます。WebSocketを使用した後、実際にサーバとブラウザの間のソケット接続を確立し、双方向のデータ伝送を行うことができます。WebSocketの機能は、また、さまざまなシナリオに適用することができます使用する柔軟な非常に強力です。しかし、WebSocketの技術は、サーバとブラウザは、一般的なWebアプリケーションから実現されているなど、より複雑です。オープンソースSocket.ioは、」を参照してください。そのようにウェブ終わりのような他の新しい技術、この技術的な制約に対処するために、幸いにも比較的成熟したパッケージオプションなどのWebSocketブラウザの互換性の問題、さらに多くの不幸がされているソケットを。 IOの説明：サポート用WebSocket、WEBの終わりのためのインスタント・メッセージング・フレームワーク」。
WebSocketのに加えて、他の実装では、HTTPプロトコルに基づいてリアルタイムプッシュ効果を達成することです。第1のアプローチは、データの更新があるかどうかを確認するために、単純なポーリング、すなわち、サーバへのブラウザリクエストのタイミングです。このアプローチは比較的単純で、ある程度の問題を解決することができます。しかし、ポーリング間隔を慎重に検討する必要があります。ポーリング間隔は、ユーザーが受信したデータをタイムリーに更新することができない原因となることができ、長すぎる、ポーリング間隔が短すぎる、クエリ要求は、サーバー側の負担が過度に上昇の原因となります。
単純なポーリングの欠点を改善するための彗星技術が（参照：彗星技術が説明：長いHTTPに接続されたWebベースのリアルタイム通信端末を）、ロングポーリングを使用しました。各要求ロングポーリング方式、サーバが応答が完了した直後に閉鎖さではなく、一定の期間のためのオープン接続を維持します。これの利点は、接続期間は、サーバー側の更新によって生成されたデータは速やかにブラウザに返すことができる、オープンであるということです。長い接続が閉じられた後、ブラウザがすぐに続行するには新しい長い接続要求を開きます。ただし、サーバー側でCOMET技術を達成し、ブラウザがサードパーティのライブラリのサポートが必要になります。
独自のの欠陥に上記の四つの異なる技術を、単純なポーリングの総合比較は、推奨されません。彗星の技術は、視点からの標準と互換性HTML 5規格の一部ではない、それは推奨されません。WebSocketの仕様とサーバープッシュが主流のブラウザでHTML 5標準の一部であるネイティブサポートを提供し、お勧めします。しかし、複雑なシーンの双方向データ通信を行うための必要性のために、より複雑なのWebSocketの仕様。単純なサーバーデータプッシュシナリオでは、使用するサーバープッシュ（SSE技術）イベントが十分です。
ブラウザのサポートでは、サーバープッシュイベント（SSE技術）はIEの以外のほとんどのデスクトップとモバイルのブラウザでサポートされています。Firefoxの6.0 +、クロム6.0 +、サファリ5.0 +、Androidの25.0 +のためのオペラ11.0 +、iOS版のSafari 4.0 +、Operaのモバイル11.1 +、クロム、アンドロイド19.0+のためのFirefoxと：サーバープッシュイベントブラウザとそのバージョンが含まをサポートしていますブラックベリーのブラウザ7.0以降のように。IEは、支持体上に、次のセクションで詳しくが記載されています。
サーバープッシュイベント（SSE技術）について、以下の仕様は、具体的に説明します。
そして、の比較のWebSocket
単純に、SSEは、サービスからクライアントへの頻繁な更新、低遅延やデータに適していている言っていません。
それは違いをWebSocketの：
便利な、任意の習慣を継続して使用することができるようになり、バックエンドの言語やフレームワークと、すべての新しいコンポーネントを追加する必要はありません、新しいIPまたは新規仮想マシンの新しいポート番号を取得し、気にしないでください。
サーバー側のシンプルさ。それは既存のプロキシサーバーと認証技術上で直接実行できるようにSSEは、既存のHTTP / HTTPSプロトコル上で動作させることができますので。
WebSocketの比較SSE最大の利点は、それが双方向の別のAjaxリクエストによってSSE全般がクライアントからサーバにデータを転送しながら、サーバは、サーバからデータを受信するような単純なデータを送信する通信手段、ので、相対的であるということですAjaxはオーバーヘッドが増加します使用のWebSocket。このように、必要ならば、一度、サーバーに2番目またはより高速な周波数データの送信ごとに、あなたはのWebSocketを使用する必要があります。
HTML 5の仕様と定義された中SSE（サーバー-送られるイベント）
サーバー送信されたイベント仕様HTML 5仕様、具体的な仕様書の不可欠な部分である、参考文献を参照してください。この仕様は、主に2つの部分で構成され、比較的簡単である：最初の部分は、第2の部分は、ブラウザ側のEventSourceのJavaScriptが使用され、サーバとブラウザの間の通信プロトコルです。通信プロトコルは、プレーンテキストに基づく単純なプロトコルです。サーバーの応答のコンテンツの種類は、「テキスト/イベント・ストリーム」です。応答のテキストコンテンツは、イベント、異なる組成のイベントのストリームとして見ることができます。各イベント・タイプ、及び二つの部分からのデータ、及び各イベントは、オプションの識別子を有することができます。我々は、様々なイベントの内容との間に空白行（「\ rをする\ n」）を含むだけキャリッジリターンおよび改行によって分離されています。各イベントデータは、複数の行から構成されてもよいです。リスト1は、サーバ応答の例を示しています。
1.サーバの応答をリスト例：
データ：最初のイベントデータ：第2のイベントID：100イベント：myeventデータ：第三のイベントID：101：第四のイベントデータ：これは、コメントデータである第四のイベントを継続します
リスト1に示すように、各イベントの間に空白行で隔てられています。各ラインについて、コロン（「：」）は、結腸の対応する値になった後、最前列のタイプを示します。可能なタイプは次のとおりです。
タイプは、行がコメントであり、処理中に無視されることを示す、空白になっています。
行にデータが含まれていることを示す、データを入力します。データで始まる行は複数回出現することができます。すべてのこれらの行は、イベントのデータです。
イベントの種類は、銀行はイベントの種類を宣言するために使用されていると述べました。ブラウザがデータを受信すると、そのイベントの対応するタイプを生成します。
IDを入力し、イベントを宣言するために使用さバンク識別子は述べています。
タイプの再試行は、銀行が切断後再接続までの時間を待って、ブラウザを宣言するために使用されていると述べました。
「イベントの第三のタイプが起こり、1リスト内の最初のイベントデータのみ「の最初のイベント」が含まれ、デフォルトのイベントが生成され、第2のイベント識別子100、「第2のイベント」のデータmyevent「イベント;のための最後のイベントのデータを」第4のイベントは\ nfourthイベントは、「継続。データの複数の行は、実際のデータは、データの各行を接続改行することによって形成されます。
サーバから返されたデータは、イベントの識別子が含まれている場合は、ブラウザが最後に受信したイベントの識別子を記録します。ブラウザが再び接続するときにサーバーへの接続が中断された場合、最後の識別子を宣言したHTTPヘッダ「ラスト・イベント-ID」を介してイベントを受信します。サーバーは、ブラウザから送信される接続識別子を通じてイベントを継続するために最初からどのイベントを決定することができます。
サーバが応答を返し、ブラウザはJavaScriptでのEventSourceを使用して処理する必要があります。標準のイベントリスナーモードを使用してのEventSource、単にオブジェクト上に適切なイベントハンドラメソッドを追加します。表1に示すようにのEventSourceは、3つの標準的なイベントを提供します。
表1のEventSource標準のイベントオブジェクトが用意されています。
前述のように、サーバーは、イベントのカスタムタイプを返すことができます。これらのイベントのために、あなたは、addEventListenerメソッドを使用して、対応するイベント処理メソッドを追加することができます。リスト2のEventSourceの使用例を示しています。
2.のEventSourceオブジェクトリスト例：
vares = newEventSource（ 'イベント'）。es.onmessage =関数（E）{にconsole.log（e.data）。}。es.addEventListener（ 'myevent'、関数（E）{にconsole.log（e.data）;}）;
EventSourceは、オブジェクトを作成し、指定されたURLの後に、リスト2に示すように、あなたはのonMessageとのaddEventListenerメソッドでイベントハンドラメソッドを追加することができます。サーバ側は、新たなイベントが発生している場合は、対応するイベントハンドラメソッドが呼び出されます。onMessageの役割のEventSourceオブジェクトは、addEventListenerを（「メッセージ」）と同様の属性が、onMessageのプロパティは、唯一つのイベント処理メソッドをサポートしています。
サーバープッシュイベントは、以下のサーバー側のプレゼンテーションの規定の内容を紹介した後。
SSE実用例：サーバーとブラウザ側の実装
プロトコルの説明から分かるように、サーバー側のプッシュイベントは、比較的単純なプロトコルです。サーバ側は、フォーマット規定のプロトコルに従って、コンテンツへの応答を返し、また、比較的単純です。あなたは、オープンソースコミュニティに対応する実装では、サーバー側の技術の様々を見つけることができます。独自の開発の難しさは大きくありません。本明細書で使用する場合、実装言語などのサーバーサイドJava。対応するオープンソース桟橋-のEventSource - サーブレットのプロジェクトに基づいて、リソースを参照してください。具体的な例を使って下の桟橋-のEventSource - サーブレットプログラムを使用する方法を説明します。例えば定義された空間内の疑似ランダム移動物体。ランダムな位置から目的は、ランダムに、上下、左右方向から方向移動及びランダム方向の距離を選択します。オブジェクト、およびブラウザに情報をプッシュする位置の位置を変更するサーバ側は、ブラウザによって表示されます。
1）サーバ側の実装
サーバは、2つの部分によって実現される：一つはorg.eclipse.jetty.servlets.EventSource実装データインターフェースを生成するために使用される、他のクラスorg.eclipse.jetty.servlets.EventSourceServletから継承されたエンドポイントにアクセスするためのブラウザのようになりますサーブレット実装。リスト3は、実装クラスのEventSourceインタフェースを示しています。
3.のEventSourceインタフェースの実装クラスMovementEventSourceリスト：
publicclassMovementEventSourceimplementsEventSource {privateintwidth = 800。privateintheight = 600; privateintstepMax = 5; privateintx = 0; privateinty = 0; privateRandomランダム= newRandom（）。privateLoggerロガー= Logger.getLogger（のgetClass（）のgetName（）。）。publicMovementEventSource（intwidth、intheight、intstepMax）{this.width =幅。this.height =高さ; this.stepMax = stepMax。this.x =にRandom.nextInt（幅）。this.y =にRandom.nextInt（高さ）。}
@Override publicvoidonOpen（エミッタエミッタ）throwsIOException {クエリ（エミッタ）; //位置情報生成を開始}
@Override publicvoidonResume（エミッタのエミッタストリングlastEventId）throwsIOException {updatePosition（lastEventId）; //は、位置更新クエリ（エミッタ）を起動; //位置情報生成を開始}
//根据ラストイベント-ID来更新起始位置privatevoidupdatePosition（文字列ID）{IF（！ID = NULL）{String []型POS = id.split（ ""）。IF（pos.length> 1）{intxPos = -1、YPOS = -1。試す{XPOS = Integer.parseInt（POS [0]、10）。YPOS = Integer.parseInt（POS [1]、10）。}キャッチ（NumberFormatExceptionが電子）{}
（ジェーンブック形式で参照、コード、詳細なコードは動作しないことができます：http：//www.52im.net/thread-335-1-1.html）
3リスト、クラスMovementEventSourceは、ブラウザに接続コール、OnCloseの方法での再確立に開く時の方法は、ブラウザの接続のオープン時に呼び出されるのEventSourceインターフェース開く時、onResumeとOnCloseの方法、onResumeメソッドを実装する必要がありますブラウザは、彼らが呼ばれた接続を閉じます。そしてこの方法は、開く時onResume EventSource.Emitterインタフェースの型パラメータを有し、データを送信するために使用することができます。この方法は、インターフェースのデータ、イベント、コメント、IDに含まEventSource.Emitterを含み、イベントの様々な通信プロトコルの異なるタイプに対応する、等を閉じます。onResumeプロセスは、さらに、パラメータlastEventId、最近最終-EVENT-IDヘッダが上送信されるイベントを表す識別子を含みます。
プロセスで生成されたメインイベントのクラスロジックMovementEventSourceクエリ。更新後の位置は、メソッドEventSource.Emitterデータインターフェースによりブラウザに送信されている間方法は、位置を変更するために2秒に1回、無限ループを含みます。各イベントは、対応する識別子を有し、識別子の値は、位置そのものです。切断後、再接続した場合、ブラウザは、オブジェクトが最後の位置から始まる移動し続けることができます。
サーブレットを対応する実装とMovementEventSourceクラスは比較的単純である、唯一のEventSourceServlet newEventSourceクラスから継承し、メソッドをオーバーライドする必要がありますすることができます。方法、リスト4に示すように、MovementEventSourceオブジェクトクラスを返す必要性を実現NewEventSource。ブラウザが接続を確立するたびに、サーブレットは、要求を処理するための新しいオブジェクトMovementEventSourceクラスを作成します。
4.サーブレット実装クラスMovementServletリスト：
publicclassMovementServletextendsEventSourceServlet {@Override protectedEventSource newEventSource（HttpServletRequestの要求は、文字列のclientId）{returnnewMovementEventSource（800,600,20）。}
}
サーバ側の実装では、音符は、対応するサーブレット・フィルタ・サポートを追加することです。これは、桟橋-のEventSource - サーブレットプロジェクトの要件突堤継続の枠組みによって異なり、それ以外の場合はエラーです。フィルタを追加5 web.xmlファイルをリストに示した構成の内容を追加することです。
5.桟橋継続の必要な構成サーブレットフィルタリスト：
（ジェーンブック形式で参照、コード、詳細なコードは動作しないことができます：http：//www.52im.net/thread-335-1-1.html）
2）ブラウザ側の実装
実現のブラウザは比較的簡単です、あなただけがのEventSourceを作成し、適切なイベントハンドラをすることができ追加する必要があります。リスト6は、対応する実現を示しています。ページ上のオブジェクトを表し、正方形を使用してください。、新しいイベントを受信するイベントデータに与えられた座標情報に基づいて、ページ上のブロックの位置を更新する際に。
ブラウザ側の実装コード6.リスト：
（ジェーンブック形式で参照、コード、詳細なコードは動作しないことができます：http：//www.52im.net/thread-335-1-1.html）
基本的なブラウザとサーバー側の実装に導入した後、ここではIEのより重要なサポートされています。
IEの互換性の問題
ブラウザのネイティブのEventSourceオブジェクトを使用して大きな問題は、IEのサポートを提供していませんです。IEで同じサポートを提供するために、2つの一般的な方法があります。第1のアプローチは、達成技術またはCOMET単純なポーリングIEを使用して、ネイティブのEventSourceオブジェクト他のブラウザを使用することである。別のアプローチは、すなわち、参照を遮蔽第三者によって提供されるJavaScriptライブラリを使用して、ポリフィル技術を使用することです異なるフィルタ。本明細書で使用する場合、ポリフィル技術は、唯一のページにサードパーティのJavaScriptライブラリをロードする必要があります。アプリケーション自体は、変更を行うために、ブラウザ側のコードを必要としません。その場合には、サーバー側でのみ実現できる技術を使用する必要があるので、第二のアプローチを使用することをお勧めします。
EventSourceは同様の元のオブジェクトがIEで達成することは簡単ではありません提供しています。理論的には、唯一のコンテンツサーバXMLHttpRequestオブジェクトによる応答を得るために、テキストを解析して、対応するイベントを抽出し、対応するイベント処理メソッドをトリガすることができます。しかし、問題はIE XMLHttpRequestオブジェクト上にあるフェッチ応答の内容の一部をサポートしていません。応答は、その内容を得るためには、完了した後にのみ。長い接続を使用してサーバープッシュイベントので。接続が開いたままで、応答の内容をトリガすることができないイベントに対応するXMLHttpRequestオブジェクトを介して得ることができない場合。より具体的には、responseTextプロパティを3（READYSTATE_INTERACTIVE）にreadyStateのXMLHttpRequestオブジェクトは、取得できない場合。
問題IE XMLHttpRequestオブジェクトを解決するために、我々はIE 8 XDomainRequestが導入されたオブジェクトを使用する必要があります。Effectオブジェクトは、AJAX XDomainRequestクロスドメインリクエストです。XDomainRequestオブジェクトはonprogressイベントを提供します。onprogressイベントが発生すると、あなたは、パーシャルレスポンスのコンテンツresponseTextプロパティにより得ることができます。これが最大の違いXDomainRequest対象とXMLHttpRequestオブジェクトでなく、XDomainRequestオブジェクトを使用して、ネイティブのEventSourceオブジェクトに似基礎となっています。サーバは新しいデータが生成されたサーバへの接続を開くために使用XDomainRequestオブジェクト後、処理方法onprogressイベントXDomainRequestオブジェクトによって処理することができ、受信されたデータは、トリガを対応するコンテンツデータが解析されイベント。
しかし、本来の目的XDomainRequestターゲットはより厳格を使用した場合、クロスドメインアクセス制限のセキュリティ問題は、オブジェクトXDomainRequest考慮して、クロスドメインAJAX要求を発行することです。これらの制限はのEventSourceオブジェクトとしてその実装に影響を与えます。次のように特定の制限や解決策は以下のとおりです。
サーバーの応答は、ドメインからのURLへのアクセスを可能にする宣言するために使用されるアクセス・コントロール・許可 - 起源ヘッダを、含まれている必要があります。「*」任意のドメインからのアクセスを許可することを示し、この値を使用することは推奨されません。通常、同じドメインを使用して、現在のアプリケーションは、現在のドメインからのアクセスのみを許可します。
リクエストを発行するXDomainRequestオブジェクト識別子は一度最近受信したイベント最終-イベントID文のブラウザを使用することはできません制限カスタムHTTPヘッダーを含めることはできません。コンテンツは、そののみ、そのようなGETリクエストやPOSTリクエストパラメータとして識別子、そうでない場合はHTTPリクエストを送信することができます。
コンテンツの種類（Content-Typeのは）要求されたオブジェクトのみが "text / plainの" することができXDomainRequest。これは、POST要求を使用して、サーバは、サーブレットとして、フレームを使用する場合、POST要求は自動的に解決されず、この方法は、POSTリクエストを取得するためのgetParameterのHttpServletRequestクラスを使用することができない、ということを意味します。サーバー側でのみ元の要求されたコンテンツを分析し、パラメータの値は、その中に得られました。
オブジェクトから発行されたXDomainRequest要求には、ユーザ認証に関連するすべての情報が含まれていない、などはクッキーが含まれます。これは、サーバーが認証を必要とする場合、ユーザ認証情報は、セッションID等の他のHTTPリクエストを透過する必要があることを意味します。
これらの制限によりXDomainRequestのオブジェクトに、サーバー側では、対応する変更を行うことも必要です。これらの変化は、バックアクセス制御 - 許可由来のヘッダを含む、ブラウザによって送信される「text / plainの」タイプ・パラメータを解析するため、処理要求は、ユーザ認証に関連する情報を含みます。
この記事を使用しているポリフィルライブラリの例は、GitHubの上にあるのEventSourceプロジェクトを開発しYaffle。このポリフィルライブラリを使用した後、およびサーバー側の変更を実装するには、IE 8にし、ブラウザ上でサーバープッシュイベントを使用することができます。あなただけの単純なポーリングや彗星の技術を使用して、IE 7をサポートする必要がある場合。サンプルコードリソースが参照ここを参照してください。
結論
あなたが使用することができ、ブラウザベースのHTML 5仕様の標準的な技術へのサーバからデータをプッシュする必要がある場合のWebSocketサーバプッシュとイベントが含まれます。開発者は、アプリケーションの特定のニーズに応じた適切な技術を選択することができます。あなただけのサーバーからデータをプッシュする必要がある場合は、サーバープッシュイベント仕様は単純で実装が簡単です。本論文では、サーバープッシュイベント、およびサーバー側のブラウザの実装の規定の内容も詳細な分析を行ってIEブラウザをサポートする方法の詳細な説明を行いました。