HTML5 SSE
HTML5 サーバー送信イベント
HTML5 サーバー送信イベントを使用すると、Web ページがサーバーから更新を取得できるようになります。
Server-Sent イベント - 一方向メッセージング
Server-Sent イベントは、Web ページがサーバーから更新を自動的に取得することを指します。
これは、ウェブページでアップデートが利用可能かどうかを尋ねる必要があった場合、以前も可能でした。サーバー経由でイベントを送信することで、更新を自動的に受信できます。
例: Facebook/Twitter の更新、評価の更新、新しいブログの投稿、イベントの結果など。
ブラウザのサポート
Internet Explorerを除くすべての主要なブラウザは、サーバー送信イベントをサポートしています。
サーバーから送信されたイベント通知を受信する
EventSource オブジェクトは、サーバーから送信されたイベント通知を受信するために使用されます:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<h1>获取服务端更新数据</h1>
<div id="result"></div>
<script>
if(typeof(EventSource)!=="undefined")
{
var source=new EventSource("demo_sse.php");
source.onmessage=function(event)
{
document.getElementById("result").innerHTML+=event.data + "<br>";
};
}
else
{
document.getElementById("result").innerHTML="抱歉，你的浏览器不支持 server-sent 事件...";
}
</script>
</body>
</html>demo_sse.php コード
<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
$time = date('r');
echo "data: The server time is: {$time}\n\n";
flush();
?>プログラムを実行して試してください
分析例:
新しい EventSource オブジェクトを作成し、更新を送信するページの URL (この場合は「demo_sse.php」) を指定します
更新を受信するたびに、onmessage イベントが発生します
onmessage が送信されると、イベントが発生すると、受信したデータが ID「result」の要素にプッシュされます
サーバー送信イベントのサポートの検出
次の例では、サーバーのブラウザーのサポートを検出する追加のコードを作成しました-sent events:
if(typeof(EventSource)!=="未定義")
{
// ブラウザは Server-Sent をサポートしています
// いくつかのコード...
}
else
{
//ブラウザはサーバー送信送信をサポートしていません..
}
サーバー側のコード例
上記の例が機能するには、データ更新を送信できるサーバー (PHP や ASP など) も必要です。
サーバーサイドイベントストリーミングの構文は非常に簡単です。 「Content-Type」ヘッダーを「text/event-stream」に設定します。これで、イベント ストリームの送信を開始できるようになりました。
例
<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
$time = date('r');
echo "data: The server time is: {$time}\n\n";
flush();
?>ASP コード (VB) (demo_sse.asp):
<%
Response.ContentType="text/event-stream"
Response.Expires=-1
Response .Write("data: " & now())
Response.Flush()
%>
コードの説明:
ヘッダー「Content-Type」を「text/event-stream」に設定します"
ページがキャッシュされないことを指定します
出力送信日 (常に "data: " で始まります)
出力データを Web ページに更新します
EventSource オブジェクト
上記の例では、onmessage イベントを使用してメッセージを取得します。ただし、他のイベントも使用できます:
![フロントエンドプロジェクト-Shangyou [HTML/CSS/JS技術総合演習]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
