HTML5 Server-Sent Events(SSE)是一种新的技术,它允许服务器向客户端发送事件。它使用HTTP协议来传输数据,但是与传统的HTTP请求不同,它只需要一个连接就可以实现服务器到客户端的单向通信。这意味着服务器可以在不需要客户端请求的情况下将数据发送到客户端。
CSS3是CSS语言的最新版本,其中包含了一些新特性,如多列布局、圆角、阴影、背景图片、文字阴影、多背景图片、文字装饰等。CSS3还包含了一些新的选择器,如伪元素选择器、伪类选择器、子元素选择器等。此外,CSS3还包含了一些新的功能,如2D/3D转换、动画效果、多栏布局等。
SASS是一门强大而弹性的CSS扩展语言,它使得CSS代码变得易读易写。SASS使用Ruby语法来书写样式表,并且允许使用变量、函数以及条件判断来书写样式表。SASS还允许使用@import命令将多个样式表合并成一个样式表,从而减少HTTP请求数量。
Sassy CSS是一门CSS扩展语言,既可以作为独立的语言使用也可以作为SASS库中的扩展库使用。Sassy CSS包含了大量的函数库供开发者使用,例如color函数库、math函数库、string函数库等。此外,Sassy CSS还包含了大量的mixin库供开发者使用,例如box-shadow mixin库、border-radius mixin库等。
服务器发送事件(Server-sent Events)是基于 WebSocket 协议的一种服务器向客户端发送事件和数据的单向通讯。
HTML5 服务器发送事件(server-sent event)允许网页获得来自服务器的更新。
Server-Sent 事件指的是网页自动获取来自服务器的更新。
以前也可能做到这一点,前提是网页不得不询问是否有可用的更新。通过服务器发送事件,更新能够自动到达。
例子:Facebook/Twitter 更新、估价更新、新的博文、赛事结果等。
所有主流浏览器均支持服务器发送事件,除了 Internet Explorer。
EventSource 对象用于接收服务器发送事件通知:
实例解析:
创建一个新的 EventSource 对象,然后规定发送更新的页面的 URL(本例中是 "demo_sse.php")
每接收到一次更新,就会发生 onmessage 事件
当 onmessage 事件发生时,把已接收的数据推入 id 为 "result" 的元素中
以下实例,我们编写了一段额外的代码来检测服务器发送事件的浏览器支持情况:
为了让上面的例子可以运行,您还需要能够发送数据更新的服务器(比如 PHP 和 ASP)。
服务器端事件流的语法是非常简单的。把 "Content-Type" 报头设置为 "text/event-stream"。现在,您可以开始发送事件流了。
<pPHP 代码 (demo_sse.php):
ASP 代码 (VB) (demo_sse.asp):
代码解释:
把报头 "Content-Type" 设置为 "text/event-stream"
规定不对页面进行缓存
输出发送日期(始终以 "data: " 开头)
向网页刷新输出数据
在上面的例子中,我们使用 onmessage 事件来获取消息。不过还可以使用其他事件:
事件 | 描述 |
---|---|
onopen | 当通往服务器的连接被打开 |
onmessage | 当接收到消息 |
onerror | 当发生错误 |
在本节的开头我们介绍过服务器发送事件(Server-sent Events)是基于 WebSocket 协议的,那么在本教程的下节内容中,我们将继续向你介绍 HTML WebSocket!
实例HTML5 br 标签用来对文档中的文本进行换行的处理,请参考下面的这个例子:以下代码标记一个换行:p 使用 br 元素br在文本中b...
实例HTML5 col 标签用于控制表格中的列,使你更加方便的为表格中的列应用样式。colgroup 和 col 标签为表格中的三个列设置了背景...
实例带有两个输入字段和一个提交按钮的 HTML 表单:form action="demo_form.php" method="get"First name: input type="text" na...
实例HTML5 img标签用于向网页中添加相关图片。如何插入图像:img src="smiley-2.gif" alt="Smiley face" width="42" height="42"...
SQL CREATE INDEX 语句CREATE INDEX 语句用于在表中创建索引。在不读取整个表的情况下,索引使数据库应用程序可以更快地查找数据...