HTML5 基礎教程

HTML5 API

HTML5 サーバー送信イベント（server-sent event）を使用すると、ウェブページがサーバーからの最新データを取得し、ウェブページをリフレッシュしなくても最新データを動的に取得できます。

サーバー-Sent イベントとは、ウェブページが自動的にサーバーからのデータ更新を取得する方法です。

従来のサーバー側の最新データ取得方法は、リフレッシュやタイマーをトリガーして最新データを取得する方法でした。しかし、現在ではサーバー送信Server-Sentイベントを使用すると、最新データを自動的に取得できます。

例：Facebook/Twitterの更新、株価情報、微博、スポーツ試合結果、動的メッセージ、コメントなど。

すべての主要ブラウザがサーバー送信イベントをサポートしていますが、Internet Explorerを除いています。

EventSource オブジェクトはサーバーから送信されるイベント通知を受信するために使用されます：

例

!DOCTYPE　html>
<html>
<head>
<meta　charset="utf-8">
<title>基础教程网(oldtoolbag.com)</title>


获取服务端最新数据

示例解析：

以下示例，我们编写了一段额外的代码来检测服务器发送事件的浏览器支持情况：

if(typeof(EventSource)!=="undefined")
{
　　　　//　浏览器支持　Server-Sent
　　　　//　一些代码.....
}
else
{
　　　　//　浏览器不支持　Server-Sent..
}

为了让上面的示例可以运行，您还需要能够发送数据更新的服务器（比如 PHP 和 ASP）。

服务器端事件流的语法是非常简单的。把 "Content-Type" 报头设置为 "text/event-stream"。现在，您可以开始发送事件流了。

ASP コード (VB) (demo_sse.asp):

<%
Response.ContentType="text/event-stream"
Response.Expires=-1
Response.Write("data: The server current time" & now())
Response.Flush()
%>

コード解説:

上記の例では、onmessage イベントを使用してメッセージを取得します。他のイベントも使用できます：