HTML5 SSE
HTML5 サーバー送信イベント
HTML5 サーバー送信イベントを使用すると、Web ページがサーバーから更新を取得できるようになります。
Server-Sent イベント - 一方向メッセージング
Server-Sent イベントは、Web ページがサーバーから更新を自動的に取得することを指します。
これは、ウェブページでアップデートが利用可能かどうかを尋ねる必要があった場合、以前も可能でした。サーバー経由でイベントを送信することで、更新を自動的に受信できます。
例: Facebook/Twitter の更新、評価の更新、新しいブログの投稿、イベントの結果など。
ブラウザのサポート
Internet Explorer を除くすべての主要なブラウザは、サーバー送信イベントをサポートしています。
サーバーから送信されたイベント通知を受信する
EventSource オブジェクトは、サーバーから送信されたイベント通知を受信するために使用されます。インスタンス
インスタンス分析:
新しい EventSource オブジェクトを作成し、更新を送信するページの URL (この場合は「demo_sse.php」)を指定します更新を受信するたびに、 onmessage イベントが発生します
- onmessage イベントが発生したら、受信したデータを ID「result」の要素にプッシュします
- Server-Sent イベントのサポートを検出します 次の例では、追加の部分を書きましたサーバーによって送信されたイベントを検出するためのコード ブラウザーのサポート:
if(typeof(EventSource)!=="unknown")
{ // ブラウザーは Server-Sent をサポートします
いくつかのコード... }
else
{// ブラウザはサーバー送信をサポートしていません..
}
onopenサーバーへの接続が開かれたとき
サーバー側のコード例
上記の例が機能するには、データ更新を送信できるサーバー (PHP や ASP など) も必要です。
サーバーサイドイベントストリーミングの構文は非常に簡単です。 「Content-Type」ヘッダーを「text/event-stream」に設定します。これで、イベント ストリームの送信を開始できるようになりました。 L 例
& lt;? Php
コードの説明:header (
'Content-Type: Text/Event-Stream');
$time = date('r'
);echo "data: サーバー時間は: { $time }nn
";flush () ;?>
ASP コード (VB) (demo_sse.asp):<% Response.ContentType ="text/event-stream"
Response.Expires=-1Response .Write("data: " & now())Response.Flush()%>
'Content-Type: Text/Event-Stream');
$time = date('r'
);echo "data: サーバー時間は: { $time }nn
";flush () ;?>
ASP コード (VB) (demo_sse.asp):<% Response.ContentType ="text/event-stream"
Response.Expires=-1Response .Write("data: " & now())Response.Flush()%>
ヘッダー「Content-Type」は「text/event-stream」に設定されます
ページがキャッシュされないことを指定します
ページがキャッシュされないことを指定します
出力送信日 (常に "data: " で始まります)
出力データを Web ページに更新します
- EventSource オブジェクト
- 上の例では、onmessage イベントを使用してメッセージを取得します。ただし、他のイベントも使用できます:
Event
Description
onopenサーバーへの接続が開かれたとき
onmessage | メッセージが受信されたとき |
---|---|
onerror | エラーが発生しました |