您的位置:MYSQL中文网 > html5sse SASS、CSS3和SassyCSS HTML5 SSE

html5sse SASS、CSS3和SassyCSS HTML5 SSE

2023-10-28 21:30 HTML5教程

html5sse SASS、CSS3和SassyCSS HTML5 SSE

html5sse SASS、CSS3和SassyCSS

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库等。

HTML5 SSE

HTML5 服务器发送事件(Server-Sent Events)


服务器发送事件(Server-sent Events)是基于 WebSocket 协议的一种服务器向客户端发送事件和数据的单向通讯。

HTML5 服务器发送事件(server-sent event)允许网页获得来自服务器的更新。


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>";
  };

实例解析:

  • 创建一个新的 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"。现在,您可以开始发送事件流了。

<pPHP 代码 (demo_sse.php):

<?php
header("Content-Type: text/event-stream");
header("Cache-Control: no-cache");

$time = date("r");
echo "data: The server time is: {$time}nn";
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: " 开头)

  • 向网页刷新输出数据


EventSource 对象

在上面的例子中,我们使用 onmessage 事件来获取消息。不过还可以使用其他事件:

事件描述
onopen当通往服务器的连接被打开
onmessage当接收到消息
onerror当发生错误

在本节的开头我们介绍过服务器发送事件(Server-sent Events)是基于 WebSocket 协议的,那么在本教程的下节内容中,我们将继续向你介绍 HTML WebSocket!

阅读全文
以上是MYSQL中文网为你收集整理的html5sse SASS、CSS3和SassyCSS HTML5 SSE全部内容。
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。
相关文章
© 2024 MYSQL中文网 mysqlcn.com 版权所有 联系我们
桂ICP备12005667号-29 Powered by CMS