クライアント側を実装するには？

クライアント側を実装するには？

解説

クライアント側の実装方法は単純で、EventSourceオブジェクトを接続先のurlを引数にしてインスタンス化すると、サーバー側イベントの受信と解析がバックグラウンドで自動的に開始されます。

サーバー側でイベントが発生すると、同じ名前のイベントがEventSourceオブジェクトでリアルタイムで発生します。クライアント側のコードでは、このイベントを、通常のイベントと同じようにハンドラを定義することで処理します。

イベントの種類はサーバー側で自由に定義・指定できますが、指定のない場合は「message」イベントとして扱われます。

なお、Server-Sent Eventsでは、ドメインを越えた通信は許可されていません。そのため、サーバーと通信するコードが記述されたHTMLファイルは、接続先と同一ドメインのURLに格納されている必要があります。

以下の例では、サーバー側CGIから送られてくるイベントについて、type属性（イベントの種別）とdata属性(イベントの内容)を画面に表示しています。この例では既定のmessageイベントと、サーバー側で定義した独自イベント「custom_event」イベントがハンドリングの対象になっています。

// infoは情報表示用のDIV要素への参照

// 接続開始
var eventSource = new EventSource("http://www.example.com/update.cgi");

// サーバー側イベントの共通ハンドラを定義
function eventLogger(event){
  info.innerHTML += "type: " + event.type + " data: " + event.data + "<br>"; 
}

// messageイベントのハンドラを設定
eventSource.onmessage = eventLogger;

// 独自イベントcustom_event処理のハンドラの登録
eventSource.addEventListener("custom_event", eventLogger,false);

既定値であるmessageイベントにはonmessageイベントハンドラが用意されていますが、それ以外のサーバー側イベントに対応するクライアント側のイベントを取り扱うには、「addEventListener(event, listener, useCapture)」メソッドを使用して、イベントによって呼び出されるコールバック関数を登録する必要があります。

「addEventListener(event, listener, useCapture)」メソッドの第１引数は対象となるイベントの種別を文字列で指定します。第２引数には、イベントハンドラとなる関数の参照を指定します。最後の引数はイベントをHTMLの内側の要素へ波及させたい場合にtrueを指定します。通常はfalseで構いません。

登録したイベントハンドラ内で、イベントの情報を取得するには、システムから渡される引数であるeventオブジェクトを参照します。このオブジェクトはMessageEvent型のオブジェクトで、サーバ側のイベントの情報が格納された属性を持っています。

エラー時のハンドリングも、同様にonerrorイベントのハンドラで行います。エラー時のevent引数に特に追加の属性は存在しません。

関連項目

• サーバー側を実装するには？
• Server-Sent Events関連の定数、属性、メソッド一覧