<!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 服務(wù)器端腳本

服務(wù)器端腳本應(yīng)該發(fā)送 Content-type 頭指定類(lèi)型為 text/event-stream，如下所示：

print "Content-Type: text/event-stream\n\n";

設(shè)置 Content-type 之后，服務(wù)器端腳本將發(fā)送一個(gè)后面緊跟事件名稱(chēng)的 Event: 標(biāo)簽。下面的示例將會(huì)發(fā)送一個(gè)以換行符結(jié)束的 Server-Time 作為事件名稱(chēng)。

print "Event: server-time\n";

最后一步是使用 Data: 標(biāo)簽發(fā)送事件數(shù)據(jù)，緊隨其后的是以換行符結(jié)束的整數(shù)字符串值，如下所示：

$time = localtime();
print "Data: $time\n";

下面是用 perl 編寫(xiě)的完整 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);
}

處理服務(wù)器推送事件

讓我們修改一下我們的 Web 應(yīng)用程序來(lái)處理服務(wù)器推送時(shí)間。下面是最終示例：

<!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>

在測(cè)試服務(wù)器推送事件之前，建議你確保你的 Web 瀏覽器支持這一概念。

上一篇：HTML5 音頻和視頻下一篇：HTML5 過(guò)時(shí)標(biāo)簽和屬性

在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

HTML5 服務(wù)器推送事件

SSE Web 應(yīng)用程序

SSE 服務(wù)器端腳本

處理服務(wù)器推送事件