当前位置 : 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.cnitedu.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>

运行结果:

获取服务端更新数据

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)播放