libro
www.tuyano.com
JavaScriptによるHTML5プログラミング入門

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

作成:2012-05-06 11:01
更新:2012-05-06 11:01

■サーバーからイベントを受け取る

では、作成したevent.phpからServer Sent Eventsを受け取り、処理するページを作成してみましょう。下のリスト欄に簡単なサンプルを挙げておきます。これを「sample.html」というHTMLファイルとして保存し、先ほどのevent.phpと同じ「htdocs」フォルダ内に保管しましょう。そしてXAMPPサーバーを起動し、http://localhost/sample.htmlにアクセスをします。

このサンプルは、event.phpにアクセスしてメッセージを受け取り表示します。ランダムにメッセージが送られてくるメッセージをチェックし、「Bye」が送られてきたら接続を終了します。

ここでは、基本的な処理はinitial関数としてまとめておき、それを<body>タグのonloadで呼び出すようになっています。が、この関数が呼び出される前に、こんな文だけが実行されているのがわかりますね。
var EventSource = window.EventSource || window.MozEventSource;
実は、EventSourceオブジェクトは、すべてのブラウザでこの名前のオブジェクトとして用意されているわけではありません。FirefoxなどのMozilla系ブラウザでは、window.MozEventSourceとして、それ以外のブラウザではwindow.EventSourceとして用意されているのです。そこで、このどちらかをEventSourceに設定するようにしてあるのですね。

initial関数では、まずEventSourceがnullなら未対応として処理を抜けるようになっています。そして、EventSourceオブジェクトを作成し、onmessageに関数を設定します。この当たりは前回の説明のとおりですね。

サンプルでは、event.dataを取り出して<ol>タグのol.innerHTMLに追加をしていますが、その後で、送られてきた値をチェックしています。
if (event.data == "Bye"){
    event.target.close();
    alert('終了しました。');
}
event.dataが"Bye"だった場合には、event.targetの「close」を呼び出しています。このevent.targetには、メッセージが送信されてきたEventSourceオブジェクトが設定されています。そのcloseを呼び出すことで、サーバーとの接続を終了することができるのです。

※プログラムリストが表示されない場合

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

●プログラム・リスト●

※HTML側

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<title>タイトル</title>
	<style>
	h1 { font-size: 14pt; padding: 1px 10px;
		border-style: solid; border-width: 0px 0px 2px 7px; border-color:green; }
	body { background: #EEFFEE; }
	article { background: white; margin: 10px 0px;  padding: 10px; }
	</style>
	<script type="text/javascript">
	var EventSource = window.EventSource || window.MozEventSource;
	function initial(){
		if (!EventSource){
			alert("EventSourceが利用できません。");
			return;
		}
		var source = new EventSource('event.php');
		source.onmessage = function(event){
			var ol = document.getElementById('msgs');
			ol.innerHTML = '<li>' + event.data + '</li>' + ol.innerHTML;
			if (event.data == "Bye"){
				event.target.close();
				alert('終了しました。');
			}
		};
	}
	</script>
</head>
<body onload="initial();">
	<header>
		<h1>Sample</h1>
	</header>
	<article>
		<ol id="msgs"></ol>
	</article>
</body>
</html>
※関連コンテンツ

「JavaScriptによるHTML5プログラミング入門」に戻る