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

では、実際にServer Sent Eventsを使ってみましょう。まずは、サーバー側の準備が必要になります。

EventSourceでアクセス先に設定できるアドレスは、どんなものでも構いません。ただし、実行するJavaScriptと同じホストである必要があります。この点は、Ajaxなどと同様の制約を受けると考えてください。

また、「とりあえずHTMLファイルかテキストファイルを用意して、それにアクセスしてテストしよう」と考えている人もいるかも知れませんが、これもできません。Server Sent Eventsでサーバーから受け取るイベントは、通常のテキストやHTMLとは異なるコンテンツタイプとして送られます。このため、普通のHTMLページではなく、サーバーにプログラムを用意して出力させる必要があります。

ここでは、比較的簡単なサーバーサイドプログラムの実行環境として、「XAMPP」を紹介しておきましょう。XAMPPは、Webやメール、FTPなど各種のサーバー環境を一式まとめてインストールし使えるようにしてくれるパッケージです。インストーラとして配布されており、面倒な設定など必要とせず、デフォルトの設定のまま何も考えずにインストールすれば、すぐにローカル環境にWebサーバーを構築できます。――このXAMPPは以下のアドレスにて配布されています。

http://www.apachefriends.org/

XAMPPでは、Apache HTTP Serverを使ってWebサーバーを組み込んでいます。インストールされる「XAMPP Control Panel」というプログラムを実行し、ボタンを押すだけでサーバーが使えるようになります。

このXAMPPでは、標準でPHPが利用可能になっています。PHPは、普通のテキストファイルとしてスクリプトを書いて設置するだけで、サーバーで実行するプログラムを用意することができます。アマチュアが手っ取り早く利用するには最適なサーバー用スクリプト言語といえます。

では、下のリスト欄に、簡単なサーバー用スクリプトのサンプルを挙げておきましょう。テキストエディタでこれを既述し、XAMPPのフォルダ内にある「htdocs」というフォルダの中に、「event.php」というファイル名で保存してください。これでサーバー側のプログラムは完了です。このevent.phpにアクセスして、Server Sent Eventsを利用します。

このスクリプトは、あらかじめ用意しておいた簡単なテキストからランダムに１つを選んでクライアントに送るという、ごく単純なプログラムです。PHPを多少分かる人にむけて少し説明しておくと、最初にヘッダー情報を送る文が用意されています。

header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');

この２文は、必ず最初に実行してください。ここで「text/event-stream」というコンテンツタイプで、キャッシュを使わず情報が送信されるように設定されます。実際にサーバーからクライアントへと送る内容は、

echo "data: ……ここに送る内容を書く……\n\n";

こんな感じで既述しておけばOKです。かならず、一番最初に「data: 」と書き、最後には「\n\n」をつけてください。後は、どういう内容を出力してもOKです（テキストならね）。

(by. SYODA-Tuyano.)

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

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

※event.php

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