サーバーとクライアントの間で通信を行い、サーバーから必要に応じて値を受け取る――HTML5が登場するまで、こうしたことが可能な技術は「Ajax」があるのみでした。しかしAjaxは、クライアントからサーバーに接続し、結果を受け取って終了……といったものであり、「接続を維持して、必要があればサーバーからクライアントへ情報を送ってくれる（いわゆる、PUSH送信）」などは行えません。

サーバーと常時接続を維持するものとして、HTML5では新たに「Web Socket」という機能が追加されました。これを使えばサーバーとの通信も完璧です。が、このWeb Socketは、HTTPではなく独自のプロトコルを利用して通信を行うため、Webサーバーとは別に専用のサーバーを用意しなければいけません。現時点ではWeb Socketサーバーに対応するレンタルサーバーやクラウドサービスもほとんどなく、利用は狭き門といわざるを得ません。

もっと手軽に、サーバーから必要に応じて情報が送られてくるようなPUSH送信を実現したい――そうした要望に、まさにうってつけなのが「Server-Sent Event」と呼ばれる機能です。

Server-Sent Eventsとは、文字通り「サーバーから送られてくるイベント」です。HTMLで用いられている一般的なイベント処理と全く同じ感覚でイベントを設定するだけで、サーバーから何か送信されてきたときのイベント処理を行わせることが可能になるのです。



では、このServer-Sent Eventsは、実際にどのようにして利用するのでしょう。その基本を整理しておきましょう。


1. 「EventSource」オブジェクトを用意する

変数 = new EventSource( アクセス先のアドレス );

まず最初に行うのは、「EventSource」というオブジェクトの用意です。これは、名前の通り、Server-Sent Eventがどこから送られてくるかというイベントの発生源を設定するためのオブジェクトです。作成時に、アクセス先のアドレスを指定することで、そのアドレスからのイベントを受け取るためのオブジェクトが用意できます。


2. イベントを設定する

《EventSource》.onmessage = 関数;
《EventSource》.addEventListener('message', 関数 );

作成したEventSourceに、サーバーからのイベントに対応する処理を組み込みます。サーバーから送られてくるイベントは、デフォルトで「onmessage」というものとして用意されています。onmessageプロパティに関数を割り当てるか、あるいはaddEventListenerでmessageに関数を組み込むことで、イベント処理を設定できます。


3. 関数を定義する

function 関数名(《MessageEvent》){ ……略…… }

onmessageイベントに設定される関数では、引数が１つ用意されます。この引数には「MessageEvent」というオブジェクトが渡されます。これが、発生したイベントに関する情報を管理しています。このオブジェクトには「data」というプロパティがあり、ここにサーバーから送られてきた値が保管されています。サーバーからの情報は、基本的にすべてテキストです。これを取り出して処理をします。


――全体の流れとして、サーバーとの接続を開始する際にEventSourceオブジェクトの準備をし、後はサーバーからイベントが送られてくるのを待つ、という感じの処理になります。そしてサーバーから何かのイベントが送られてきたら、定義してあった関数が呼び出され、そこにある処理が実行される、というわけです。