Server-Sent Eventsの利用 (5/5)
作成:2012-05-06 11:08
更新:2012-05-06 11:08
更新:2012-05-06 11:08
■カスタム・イベントを受け取り処理する
では、カスタム・イベントを受け取って処理するHTMLを作成しましょう。下のリスト欄に簡単なサンプルをあげておきます。このようにHTMLを修正し、ブラウザからアクセスして動作を確かめてみましょう。
ここでは、EventSourceにonmessage/onstart/onendの３つのイベントをaddEventListenerで組み込んであります。onmessageでは、カウント数と受信メッセージを画面に追加表示します。onstartの場合、それまでの表示をクリアし、カウント数をゼロに戻します。onendイベントでは、Server Sent Eventsの通信を終了します。
ここでは、EventSourceオブジェクトを作成した後、以下の３つの文が実行されイベントが組み込まれています。
Server Sent Eventは、このように独自のイベントを定義し、ごく簡単にサーバーからPUSH送信を受け付けることができる、実に便利な仕組みです。が、「だったらWeb Socketなんていらないじゃん」と思ってはいけません。
Server Sent Eventは、実はあくまで「擬似的なPUSH」に過ぎません。これは、種を明かせば「Ajax通信のアレンジ」に過ぎません。Ajaxでサーバーに接続し、サーバーとの接続を維持し続け、サーバーから返事が返ってきたら処理をしてすぐさままたAjaxで繋ぎ直す――これを繰り返して、擬似的にサーバーとの接続を維持し続けているように見せかけているだけなのです。ですから、例えばサーバー側のプログラムに変数などを用意しておいても、それらは毎回初期化され、値を保ち続けることなどできません。あくまで「通信し続けているように見せかけているだけ」なのですから。
ですから、本格的な双方向通信などは行えませんし、実際には毎回サーバーとの接続は切れて（つなぎ直して）います。そういう性質のものであるということを納得の上で利用するようにしましょう。それでは困る、という場合は、おとなしくWeb Socketを利用すべきなのです。
Server Sent Eventsは、手軽に擬似PUSHを利用できるという点で、非常に重宝する機能です。Web Socketとは役割も用途も異なるものなのだ、ということを理解した上で活用しましょう。
ここでは、EventSourceにonmessage/onstart/onendの３つのイベントをaddEventListenerで組み込んであります。onmessageでは、カウント数と受信メッセージを画面に追加表示します。onstartの場合、それまでの表示をクリアし、カウント数をゼロに戻します。onendイベントでは、Server Sent Eventsの通信を終了します。
ここでは、EventSourceオブジェクトを作成した後、以下の３つの文が実行されイベントが組み込まれています。
source.addEventListener('message', function(event){…略…});
source.addEventListener('start', function(event){…略…});
source.addEventListener('end', function(event){…略…});これで、それぞれの関数に各イベント用の処理を用意すればよい、というわけです。カスタム・イベントを利用することで、それぞれの処理をそれぞれの関数に定義するようになります。onmessageのイベント用関数内で何もかも処理する必要はありません。必要に応じて送信するイベントを変更し、受け取る側で各イベントごとに処理を分ければ良いのです。また、このやり方なら、特定のイベントだけ処理を省いたりすることも容易になります。■Server Sent Eventの限界
Server Sent Eventは、このように独自のイベントを定義し、ごく簡単にサーバーからPUSH送信を受け付けることができる、実に便利な仕組みです。が、「だったらWeb Socketなんていらないじゃん」と思ってはいけません。
Server Sent Eventは、実はあくまで「擬似的なPUSH」に過ぎません。これは、種を明かせば「Ajax通信のアレンジ」に過ぎません。Ajaxでサーバーに接続し、サーバーとの接続を維持し続け、サーバーから返事が返ってきたら処理をしてすぐさままたAjaxで繋ぎ直す――これを繰り返して、擬似的にサーバーとの接続を維持し続けているように見せかけているだけなのです。ですから、例えばサーバー側のプログラムに変数などを用意しておいても、それらは毎回初期化され、値を保ち続けることなどできません。あくまで「通信し続けているように見せかけているだけ」なのですから。
ですから、本格的な双方向通信などは行えませんし、実際には毎回サーバーとの接続は切れて（つなぎ直して）います。そういう性質のものであるということを納得の上で利用するようにしましょう。それでは困る、という場合は、おとなしくWeb Socketを利用すべきなのです。
Server Sent Eventsは、手軽に擬似PUSHを利用できるという点で、非常に重宝する機能です。Web Socketとは役割も用途も異なるものなのだ、ということを理解した上で活用しましょう。
(by. SYODA-Tuyano.)
※プログラムリストが表示されない場合
AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。
●プログラム・リスト●
※sample.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 counter = 0;
var EventSource = window.EventSource || window.MozEventSource;
function initial(){
if (!EventSource){
alert("EventSourceが利用できません。");
return;
}
var source = new EventSource('event.php');
source.addEventListener('message', function(event){
var ul = document.getElementById('msgs');
ul.innerHTML = '<li>' + counter++ + ":" + event.data +
'</li>' + ul.innerHTML;
});
source.addEventListener('start', function(event){
var ul = document.getElementById('msgs');
ul.innerHTML = '<p>※開始します。</p>';
counter = 0;
});
source.addEventListener('end', function(event){
var ul = document.getElementById('msgs');
ul.innerHTML = '<p>※終了しました。</p>' + ul.innerHTML;
event.target.close();
});
}
</script>
</head>
<body onload="initial();">
<header>
<h1>Sample</h1>
</header>
<article>
<ul id="msgs"></ul>
</article>
</body>
</html>
※関連コンテンツ
「JavaScriptによるHTML5プログラミング入門」に戻る