ヤフーユーザーインターフェイスブログ（YUIBlog）

サーバー送信イベント：YUI 3ギャラリーで

上の興奮で明らかなように、人気が高まっているWeb上でプッシュ通知のWebソケット 、良い理由があります。 観客がリアルタイム株式のアップデート、ニュース、スポーツ、さらには、インターネットに頼るようにWebは、より正確かつ最新の情報に向かって動いています。 ：ウェブソケットはプッシュ通知の分野で大きな飛躍を表しますが、前方に小ジャンプと考えることができる、あまり知られて仕様が存在するサーバー送信イベント 。

サーバに送信されたイベント（SSE）は、開発者が既に使用している技術の上に建物からのプッシュ通知が容易にターゲットにしています。 としてWebソケットとは対照的に、SSEは、サーバと通信するために通常のHTTPを使用し、使用するかどうかを決定することができますHTTPストリーミング 、 長いポーリング 、新しいデータを取得するために、あるいは定期的なポーリングを（これは推奨されていませんが）。

SSEの中心であるEventSourceオブジェクト。 YUI 3ギャラリーEventSourceのモジュールは、クロスブラウザの実装が作成さEventSourceサポートするすべてのブラウザにサーバー送信イベントのサポートを持って、 XMLHttpRequest （現在Safariのそれを持っているブラウザでネイティブ実装にフォールバックしながら、Internet Explorer 6を含む、 5、クローム7、およびOpera 10.7）。

EventSourceイベントストリーム（ "テキスト/イベント·ストリーム"のコンテンツタイプによって示される）のような応答を解釈し、適切なイベントを発生させます。 3つの定義済みイベントがあります。

• open -サーバーとの接続が確立されている火災。
• message -新しいメッセージがサーバから受信される発生します。 event.dataプロパティは、新しいデータが含まれています。
• error -エラーがイベントストリームを処理する際に発生した火災。 このイベントが発生したら、それ以上のイベントが処理されませんとサーバーの接続は永久に閉じられます。

単一の行にいくつかのデータが続いています。イベントストリーム自体は、キーワード "データ"で構成されたプレーンテキストのデータです。 接頭辞：あなたは複数行にしたい場合には、 "データ"を持つ複数の行を含める必要があります。 空行はイベントの間の境界と見なされます。 ここで簡単な例を示します。

 data: hello data: hello data: world 

二つmessageイベントがこのイベントストリームに起動されます。 第一したevent.data秒ている間に"hello"に設定されevent.data "こんにちは\ nworld"（新しい行に注意してください）に設定されています。

ここで新しいの作成 ​​例ですEventSourceインスタンスは：

 YUI({ gallery: 'gallery-2010.11.17-21-32' }).use('gallery-eventsource', function(Y) { var src = new Y.EventSource("stream.php"); src.on("open", function(event){ console.log("Connection opened!"); }); src.on("message", function(event){ console.log("Data received: " + event.data); }); src.on("error", function(event){ console.log("Error!"); }); }); 

コンストラクタは、イベント·ストリームのURLである単一の引数を受け入れます。 の興味深い、有用な部分EventSource接続が何らかの理由で失われた場合、自動的にサーバーに再接続することです。 そうすることで使用する場合は切断して、頻繁に苦情を再接続することを心配する必要から開発者を解放しXMLHttpRequestプッシュ通知のために。

YUI 3ギャラリーEventSourceモジュールはHTTPストリーミング、ロングポーリングをサポートするように仕様と一致し、定期的なポーリングにもかかわらず、すべてのブラウザでは、3つすべてをサポートしています。 それは簡単に長い​​または定期的なポーリングを扱うことができますが、Internet Explorerが（最大およびバージョン9を含む）、HTTPストリーミングをサポートしていません。 このモジュールの推奨される使用法は、最高のパフォーマンスと互換性のために長いポーリングの実装であなたの経験を構築することです。

あなたはHTTPストリーミングをサポートするブラウザに最適化したい場合、モジュールは特別な設定X-YUIEventSource-PollOnlyは、HTTPストリーミングを使用することはできませんブラウザを検出したときにヘッダを。 あなたがデータを提供するための正しい方法を決定するためにサーバー上でこのヘッダをチェックすることもできます。 ここではJSPを使用しての実装例は次のとおりです。

 <%@page contentType="text/event-stream" buffer="none"%> <% //check for poll-only header String header = request.getHeader("X-YUIEventSource-PollOnly"); //check every so often to see if there's new data while(true) { //sleep for a second - simulate waiting for data Thread.sleep(1000); //output the current time, ensure there are two trailing newlines out.print("data: " + (new java.util.Date()).toString() + "x\n\n"); out.flush(); //if it's a poll-only request, break the loop, //which ends the request - the client will reconnect if (header != null){ break; } } %> 

これは、データの形式は単純である限り、SSEを使用するように既存の長いポーリングソリューションを移行するのはとても簡単です。 イベントストリームの形式は、行ベースであるため、その代わりに、複数行の一行上に座るためにいくつかのデータを再フォーマットを意味します。

SSEは、HTTPを使用するため、Webソケットと同じパフォーマンス特性を持つことはありませんが、それはブラウザでプッシュ通知の論理的な進化を表しています。 SSEは、古い置き換えることができますXMLHttpRequestすべて同じ認証のパラダイムを保ちながら、少ないコードと優れたエラー処理とベースのソリューションを提供しています。

YUI 3ギャラリーEventSourceモジュールは、ほとんどSSE仕様（この部分はまだ "TODO"コメントを検索することによって実装されていないソースコードで見ることができます）のすべてを実装しています。 機能の一部が漠然と説明されているためです。 モジュールには、以下の機能をサポートしています。

• 単純イベント（火災messageイベント）。
• カスタム·イベント（ "イベント"で指定された名前に一致するイベントを発生させる）
• イベントID（に取り込まevent.lastEventId 、サーバーに送信されます）

まだ実装されている部分は、再接続の時間とのサポートですevent.originプロパティです。 それ以外の場合は、他のすべてがネイティブ実装と同じように動作する必要があります。

参考文献

• サーバー送信イベントの紹介
• サーバー送信イベントの長い旅

会話を検索： Bloglinesの | テクノラティ

共有および拡張： del.icio.usでブックマーク | Diggそれ！ | reddit！