HTTPはリクエスト/レスポンスモデルによって制限されるという事実に慣れています。つまり、クライアントはHTTPリクエストを送信し、HTTPレスポンスを期待します。 実際、サーバーは、クライアントが「要求する」までクライアントに何も伝えることができません。 オンラインユーザーステータスのような些細なことでも、さまざまなトリックに頼る必要があります。 まあ、あなたは知っています-愛好家の落ち着きのない創意工夫は、多くのそのような決定を生み出しました。 しかし、専門家の言葉を引用すると、 「コメットは巨大なハックに過ぎません 。 」 HTML 5は、現在使用されているCometを置き換えるネイティブ機能で私たちを豊かにすることを目的としているようです。 SSEの場合、HTML5は、サーバーから通知を受信するための特別なHTTP接続を開くためのAPIを提供します。 シンプルなインターフェースを見てみましょう ：
var source = new EventSource('updates.php');
source.onmessage = function (event) {
alert(event.data);
};
サーバー側では、スクリプトは次の形式でメッセージを送信します（予期されるMIMEタイプtext / event-stream）：
data: TROLOLOLOLOLOLOLOLOLOLO
data: Lorem ipsum dolor sit amet
data: consectetur adipiscing elit.
data: Vestibulum rutrum nisi in diam dapibus eget tempor mauris sollicitudin
さらに、スクリプト内で無限ループも必要ありません。 接続を開くと、スクリプトの実行が自動的に要求されているようになります。
<?php
header("Content-Type: text/event-stream\n\n");
echo 'data: ' . time() . "\n";
?>
それでは、どのように機能しますか？ クライアントは、パラメーターでイベントソースのアドレスを取得するEventSourceを作成することにより、イベントのストリームを開きます。 onmessageイベントハンドラは、ソースから新しいデータが到着するたびに呼び出されます。 ご覧のとおり、AJAXを使用すると、クライアントからサーバーに非同期でアクセスでき、逆に、SEEを介してサーバーからクライアントに非同期でアクセスできます。
HTML5は、とりわけWebWorkerのようなテクノロジーを記述しています。 バックグラウンドで、互いに独立して実行するスクリプトを実行できます。 したがって、EventSourceが多数開いているために、ブラウザで開いている接続の許容限度を超えた場合、問題ではありません-これは簡単に解決できます。 いずれの場合も、EventSource接続を提供する同じWebWorkerを参照します。
そして、これはすべて本当に使用可能ですか？ SSEは、Google Chrome 6の開発バージョン 、Safari 5.0、およびOpera 9.xに実装されています 。 ただし、最後の実装は、上記の例で示したものとはまったく異なります。 Operaでは、HTMLで特別な要素を作成し、リスナー（リスナー）を「ハング」させる必要があります。
<event-source src="events.php" />
さらに、さまざまなリスナーに宛てられたイベントはサーバー側から来ることができます
document.getElementsByTagName("event-source")[0]
.addEventListener("server-time", function (event) {
alert(event.data);
}, false);
コントローラーは次のようになります。
<?php
header("Content-Type: application/x-dom-event-stream");
echo "Event: server-time\n";
echo "data: " . time() . "\n";
flush();
?>
次に、 ブラウザでSSEがどのように機能するかを確認できる例を作成しました 。 そのため、コンソールは使用されないため、サーバーから送信されるメッセージをどこでも探す必要はありません。ページ上に表示されます。