HTML5-サーバー送信イベント
従来のWebアプリケーションは、Webサーバーにディスパッチされるイベントを生成します。たとえば、リンクをクリックするだけで、サーバーに新しいページが要求されます。
WebブラウザからWebサーバーに流れるイベントの種類は、クライアント送信イベントと呼ばれる場合があります。
HTML5に加えて、WHATWG Web Applications 1.0は、WebサーバーからWebブラウザーに流れるイベントを導入し、それらはサーバー送信イベント（SSE）と呼ばれます。SSEを使用すると、DOMイベントをWebサーバーから訪問者のブラウザーに継続的にプッシュできます。
イベントストリーミングアプローチは、サーバーへの永続的な接続を開き、新しい情報が利用可能になったときにクライアントにデータを送信し、継続的なポーリングの必要性を排除します。
サーバー送信イベントは、サーバーからクライアントにデータをストリーミングする方法を標準化します。
SSE用のWebアプリケーション
Webアプリケーションでサーバー送信イベントを使用するには、ドキュメントに<eventsource>要素を追加する必要があります。
ザ・ src <eventsource>要素の属性は、イベントを含むデータストリームを送信する永続的なHTTP接続を提供するURLを指している必要があります。
URLは、イベントデータの一貫した送信を処理するPHP、PERL、または任意のPythonスクリプトを指します。以下は、サーバー時間を期待するWebアプリケーションの簡単な例です。
<!DOCTYPE HTML>
<html>
<head>
<script type = "text/javascript">
/* Define event handling logic here */
</script>
</head>
<body>
<div id = "sse">
<eventsource src = "/cgi-bin/ticker.cgi" />
</div>
<div id = "ticker">
<TIME>
</div>
</body>
</html>SSEのサーバーサイドスクリプト
サーバーサイドスクリプトは送信する必要があります Content-type次のようにタイプtext / event-streamを指定するヘッダー。
print "Content-Type: text/event-stream\n\n";Content-Typeを設定した後、サーバーサイドスクリプトは Event：タグの後にイベント名が続きます。次の例では、改行文字で終了するイベント名としてServer-Timeを送信します。
print "Event: server-time\n";最後のステップは、を使用してイベントデータを送信することです Data：次のように改行文字で終了する文字列値の整数が後に続くタグ-
$time = localtime();
print "Data: $time\n";最後に、以下はPerlで書かれた完全なticker.cgiです-
#!/usr/bin/perl
print "Content-Type: text/event-stream\n\n";
while(true) {
print "Event: server-time\n";
$time = localtime();
print "Data: $time\n";
sleep(5);
}サーバー送信イベントの処理
サーバー送信イベントを処理するようにWebアプリケーションを変更してみましょう。以下は最後の例です。
<!DOCTYPE HTML>
<html>
<head>
<script type = "text/javascript">
document.getElementsByTagName("eventsource")[0].addEventListener("server-time",
eventHandler, false);
function eventHandler(event) {
// Alert time sent by the server
document.querySelector('#ticker').innerHTML = event.data;
}
</script>
</head>
<body>
<div id = "sse">
<eventsource src = "/cgi-bin/ticker.cgi" />
</div>
<div id = "ticker" name = "ticker">
[TIME]
</div>
</body>
</html>Server-Sentイベントをテストする前に、Webブラウザーがこの概念をサポートしていることを確認することをお勧めします。