當前位置 : IT培訓網 > Web前端 > Web教程 > 什么是HTML5 SSE

什么是HTML5 SSE

時間:2016-12-13 11:49:51??來源:web前端培訓網??作者:IT培訓網??已有:名學員訪問該課程
對于HTML5 SSE方面的知識點你學會了嗎,對你學習HTML5有沒有幫助呢,如果你還想學習其他HTML5方面的知識點,趕緊加入我們吧,學會了html5,高職不愁,高薪不愁,生活一路無憂哦!

HTML5 SSE是什么意思呢,想必很多學員都不知道吧,學習網頁設計,這方面知識點也是不可少的,下面就讓小編帶著大家一起學習下吧!

所謂HTML5 SSE就是HTML5 服務器發送事件(Server-Sent Events),允許網頁獲得來自服務器的更新。

EventSource 對象

在上面的例子中,我們使用 onmessage 事件來獲取消息。不過還可以使用其他事件:

事件

描述

onopen

當通往服務器的連接被打開

onmessage

當接收到消息

onerror

當發生錯誤

 

Server-Sent 事件 - 單向消息傳遞

Server-Sent 事件指的是網頁自動獲取來自服務器的更新。

以前也可能做到這一點,前提是網頁不得不詢問是否有可用的更新。通過服務器發送事件,更新能夠自動到達。

例子:Facebook/Twitter 更新、估價更新、新的博文、賽事結果等。

瀏覽器支持

Internet ExplorerFirefoxOperaGoogle ChromeSafari

所有主流瀏覽器均支持服務器發送事件,除了 Internet Explorer。

接收 Server-Sent 事件通知

EventSource 對象用于接收服務器發送事件通知:

實例

var source=new EventSource("demo_sse.php");

source.onmessage=function(event)

{

    document.getElementById("result").innerHTML+=event.data + "<br>";

};

源代碼:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>IT培訓網(www.oalvodamoda.com)</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>

運行結果:

獲取服務端更新數據

The server time is: Tue, 13 Dec 2016 11:48:55 +0800

The server time is: Tue, 13 Dec 2016 11:48:58 +0800

The server time is: Tue, 13 Dec 2016 11:49:01 +0800

The server time is: Tue, 13 Dec 2016 11:49:04 +0800

The server time is: Tue, 13 Dec 2016 11:49:07 +0800

實例解析:

•       創建一個新的 EventSource 對象,然后規定發送更新的頁面的 URL(本例中是 "demo_sse.php")

•       每接收到一次更新,就會發生 onmessage 事件

•       當 onmessage 事件發生時,把已接收的數據推入 id 為 "result" 的元素中

檢測 Server-Sent 事件支持

以下實例,我們編寫了一段額外的代碼來檢測服務器發送事件的瀏覽器支持情況:

if(typeof(EventSource)!=="undefined")

{

  // 瀏覽器支持 Server-Sent

  // 一些代碼.....

}

else

{

// 瀏覽器不支持 Server-Sent..

}

服務器端代碼實例

為了讓上面的例子可以運行,您還需要能夠發送數據更新的服務器(比如 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: " 開頭)

•       向網頁刷新輸出數據

對于HTML5 SSE方面的知識點你學會了嗎,對你學習HTML5有沒有幫助呢,如果你還想學習其他HTML5方面的知識點,趕緊加入我們吧,學會了html5,高職不愁,高薪不愁,生活一路無憂哦!

頂一下
(0)
0%
踩一下
(0)
0%
------分隔線----------------------------
------分隔線----------------------------
Web 教程
1、HTML 教程
1.1 HTML 簡介
1.2 HTML 編輯器
1.3 HTML 基礎
1.4 HTML 元素
1.5 HTML 屬性
1.6 HTML 標題
1.7 HTML 段落
1.8 HTML 文本格式化
1.9 HTML 鏈接
1.10 HTML 頭部
1.11 HTML CSS
1.12 HTML 圖像
1.13 HTML 表格
1.14 HTML 列表
1.15 HTML 區塊
1.16 HTML 布局
1.17 HTML 表單
1.18 HTML 框架
1.19 HTML 顏色
1.20 HTML 顏色名
1.21 HTML 顏色值
1.22 HTML 腳本
1.23 HTML 字符實體
1.24 HTML URL
1.25 HTML 速查列表
1.26 HTML 總結
1.27 HTML 簡介
2、HTML5
2.1 HTML5 教程
2.2 HTML5 瀏覽器支持
2.3 HTML5 新元素
2.4 HTML5 Canvas
2.5 HTML5 內聯 SVG
2.6 HTML5 MathML
2.7 HTML5 拖放
2.8 HTML5 地理定位
2.9 HTML5 Video(視頻)
2.10 HTML5 Audio(音頻)
2.11 HTML5 Input 類型
2.12 HTML5 表單元素
2.13 HTML5 表單屬性
2.14 HTML5 語義元素
2.15 HTML5 Web 存儲
2.16 HTML5 Web SQL
2.17 HTML5 應用程序緩存
2.18 HTML5 Web Workers
2.19 HTML5 SSE
2.20 HTML5 WebSocket
2.21 HTML5 代碼規范
3、HTML 媒體
3.1 HTML 媒體(Media)
3.2 HTML 插件
3.3 HTML 音頻(Audio)
3.4 HTML視頻(Videos)播放
五月情天