Server-Sent Eventsは、HTTP上で疑似サーバプッシュを行う場合のデータ形式とクライアントに関する仕組み(API)です。
つまり、サーバから送信(PUSH)されたイベントを受信する仕組みです。

これは、「Comet」(彗星)または「Long-Time Polling」と呼ばれる疑似サーバプッシュ技術です。
「Polling」(ポーリング)とは、定期的なリクエスト(要求)のリトライを繰り返すことです。
「Long-Time Polling」では、クライアントからポーリング処理を行うのですが、サーバ空のレスポンス(返事)を長時間終わらせないことで、レスポンスをサーバからの送信(PUSH)の経路として用いるものです。
Server-Sent Eventsは、この技術を標準化させたものと言えます。

「Web Socket」の方が、より本格的な双方向通信を実現する技術です。
しかし、Web Socketでは専用のサーバを必要とします。
Server-Sent Eventsは、既存のサーバサイド技術で実現が可能なため、手軽に利用が可能と言えます。
そのため、WEBサーバとFTPサーバなどしか使えないレンタルサーバでは、Web Socketは利用できない場合がありますが、Server-Sent Eventsなら利用が可能です。

各ブラウザの対応

Server-Sent Eventsは、2011年8月現在以下のブラウザで対応しています。
FireFox 6～、Safari 5～、Opera 10.62～、Google Chrome 6～

Server-Sent Eventsは、サーバからクライアントにプッシュするデータ形式が定められています。
データ形式はテキストですので、JavaやPHP、Perl、Ruby、Pythonあるいはシェルなど、既存のサーバサイド技術で対応が可能です。

プッシュするデータ形式

MIMEタイプは、「text/event-stream」とします。
文字コードは、「UTF-8」です。
(内部文字コードが、shift_jisやEUC-JPのサーバでは文字コード変換が必要です。)
改行コードは、LF(\n)とCR(\r)のいずれの組み合わせでも対応します。
(「\r\n」、「\n」のみ、「\r」のみ)
「:」(コロン)で始まる行は、コメント行です。
空行と末尾は、イベント(送信)の区切りとなります。

行指向のデータ形式で、1行に「フィールド名:フィールド値」となるようにします。
1回の送信は、数行の「フィールド名:フィールド値」を1ブロックとして行います。
フィールド値の前には、空白を一つだけ挿入可です。
定義できるフィールド名は、以下の通りです。

event

イベント名を変更します。
デフォルトは「message」です。

data

送信データです。
ブロック内にdataフィールドがないと、送信イベントそのものが発生しません。

id

イベントのIDです。
最後に受信したidの値が、クライアント側のMessageEventオブジェクトの「lastEventId」プロパティに格納されます。
再接続の際には、リクエストヘッダの「Last-Event-ID」に最後のidの値が記載され、クライアントから送信されます。

retry

クライアントからの再接続時の待ち時間を指定します。
単位はミリ秒です。
指定しない場合は、ブラウザによります。

:コメント
id: event1
data: data1
retry: 1000

受信方法

EventSourceオブジェクトを生成することで、受信を開始します。
生成時の第1引数が、プッシュするサーバのURLです。
サーバからメッセージを受け取ると、EventSourceオブジェクトの「message」イベントが発生します。

EventSourceオブジェクトのプロパティは、以下の通りです。

URL

接続先URLです。

readyState

接続状態です。
0:コネクション中(CONNECTING)
1:接続(OPEN) 2:切断(CLOSE)

EventSourceオブジェクトのメソッドは、以下の通りです。

close()

サーバとの接続を切断します。

EventSourceオブジェクトのイベントは、以下の通りです。

open

接続開始時に発生します。

message

イベントブロックを受信した時に発生します。

error

エラー時に発生します。

// EventSourceオブジェクトを生成
var evtsrc = new EventSource("srv-sent.php");

// 受信結果の表示先を準備
var rcv =  document.getElementById('rcv');
rcv.innerHTML = "受信を開始します。
";

// 受信回数のカウンタ
var cnt = 0;

// 受信イベントの処理
evtsrc.onmessage = function( evt ){
	//結果の表示
	rcv.innerHTML += cnt + ":" + evt.data + "
";

	//リミッタ
	if( cnt > 5 ){
		evtsrc.close();
		rcv.innerHTML += "受信終了
";
		return;
	}
	cnt++;
}