サンプル
Server-Sent Eventsでは、ドメインを越えた通信は許可されていません。そのため、以下のサンプルのHTMLファイルとCGIは、同一ドメインのURLに格納されている必要があります。HTMLファイルをローカルファイルとして実行することはできません。
サンプル サーバー側(Perl)
このサンプルを試すにはサーバー側とクライアント側の準備が必要です。
まず、Perl(Windowsの場合はActive Perl)がウェブサーバーにインストールされていない場合は、インストールしてください。
以下のソースをCGIが実行可能なディレクトリに、適切な権限を付与して、sse_test.cgiという名前で配置してください。
1行目の「!#」以降は、Perlの実行ファイルがインストールされた場所になります(このサンプルの場合、c:\perl\bin\perl.exe)。このパスは実行環境に合わせて変更する必要があります。
#!c:\perl\bin\perl.exe
use strict;
use CGI;
my $cgi = CGI->new;
#ヘッダーの設定
print $cgi->header(
-type => "text/event-stream"
,-charset => "utf-8"
);
#前回の接続の最後のイベントIDを取得
my $id = $cgi->http('Last-Event-ID') + 0;
#続きのイベントIDから開始
$id = $id + 1;
print "event:ping\n";
my $time = localtime();
print "data: $time\n";
print "id:$id\n";
print "retry:1000\n";
print "\n";
#eventフィールドを省略するとmessageイベント
$id = $id + 1;
print "data: データ\n";
print "id:$id\n";
print "retry:1000\n";
print "\n";
サンプル クライアント側
16行目でサーバー側のスクリプトのURLを"http://localhost/cgi/sse_test.cgi"のように指定していますが、このURLは実行環境に合わせて変更してください。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Server-Sent Events サンプル (IE未実装)</title>
</head>
<body>
<p>サーバーから送られてきたイベントのデータを取得して表示します</p>
<ul id="info">
</ul>
<script type="text/javascript">
var info = document.getElementById("info");
// クライアントをインスタンス化
var evtSource = new EventSource("http://localhost/cgi/sse_test.cgi");
// イベントに対するコールバック関数
function SrvHandler(event){
// イベント種別を取得
var type = document.createElement("li");
type.innerHTML = "イベント種別:" + event.type;
info.appendChild(type);
// イベントデータを取得
var data = document.createElement("li");
data.innerHTML = "イベントデータ:" + event.data;
info.appendChild(data);
// 最新のイベントIDを取得
var lastEventId = document.createElement("li");
lastEventId.innerHTML = "最後にサーバーから送られたイベントID:" + event.lastEventId;
info.appendChild(lastEventId);
info.appendChild(document.createElement("hr"));
// 接続を切断。
if(event.lastEventId > 10){
evtSource.close();
}
}
// messageイベントとpingイベントにコールバックを設定
evtSource.addEventListener("message",SrvHandler, false);
evtSource.addEventListener("ping",SrvHandler, false);
</script>
</body>
</html>
関連項目
(関連する項目はありません)