Server-Sent Eventsの利用 (4/5)

Server Sent Eventでは、onmessageというイベントを使ってサーバーからのイベントを受け取ります。これはこれで便利なのですが、送られてきた情報に応じて細かな処理をする場合、JavaScript側で細かな分岐処理を実装しないといけません。あまり複雑になってくると、コーディングもかなりわかりにくくなりがちです。

こうした場合には、「カスタム・イベント」を利用するとよいでしょう。すなわち、「独自に用意されたイベント」です。Server Sent Eventsでは、独自のイベントを設定し利用するのがとても簡単に行えるのです。

これは、先ほどのサンプルを修正して、実際に作りながら説明をしていくことにします。まずは、サーバー側からです。先ほどのevent.phpを、下のリスト欄のように書き換えてください。これがカスタム・イベントを利用するようにしたサンプルです。

PHPがわかる人およびサーバー側のプログラムを作成する人向けに簡単に説明をしておきましょう。カスタム・イベントは、サーバー側で送信する内容によって設定されます。通常、サーバー側のプログラムから送信される内容は、以下のような形になっています。

Content-Type: text/event-stream
Cache-Control: no-cache

data: ……送信内容……

冒頭のContent-TypeとCache-Controlはヘッダー情報として送られるため、実際にコンテンツとして送信されるのは「data:……」という部分になります。このように、data:で始まるテキストが送られら場合（すなわち、何のイベント名も設定されていない場合）、EventSourceではonmessageイベントが発生します。

Content-Type: text/event-stream
Cache-Control: no-cache

event: イベント名
data: ……送信内容……

これが、カスタム・イベントを利用する場合の出力です。ヘッダー部分は全く同じですが、コンテンツの部分が違っています。まず「event:……」という文が送られ、それから「data:……」が送られます。この「event:」の後に記述されるのが、イベント名です。このようにして送られたメッセージは、EventSourceオブジェクトでは、event:で指定されたイベントが発生したものとして扱われます。

例えばここでは、ランダムに取得された値によって、「event:start」や「event:end」というものが出力されるようになっています。このような場合、EventSource側では、onmessageイベントは発生しません。onstartやonendといったイベントが発生したものとして扱われるのです。

(by. SYODA-Tuyano.)

※リストが表示されない場合

AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。

※event.phpの修正

<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
$msgs = array("Hello","Welcome.","こんにちは。","やっほ～",
	"ではでは。","お元気？","ニーハオ","ボンジュ～ル","スパシーボ♥","ばいば～い!!");
$n = rand(0,9);
if ($n == 0){ echo "event: start\n"; }
if ($n == 9){ echo "event: end\n"; }
echo "data: " . $msgs[$n] . "\n\n";
flush();
?>