Html5 Server-Sent 事件通知

分享到:

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

Server-Sent 事件 - 单向消息传递

Server-Sent 事件指的是网页自动获取来自服务器的更新。

以前也可能做到这一点,前提是网页不得不询问是否有可用的更新。通过服务器发送事件,更新能够自动到达。

例子:Facebook/Twitter 更新、估价更新、新的博文、赛事结果等。

浏览器支持

所有主流浏览器均支持服务器发送事件,除了 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 事件支持

在上面的 TIY 实例中,我们编写了一段额外的代码来检测服务器发送事件的浏览器支持情况:

if(typeof(EventSource)!=="undefined")    {    // Yes! Server-sent events support!    // Some code.....    }  else    {    // Sorry! No server-sent events support..    }  

服务器端代码实例

为了让上面的例子可以运行,您还需要能够发送数据更新的服务器(比如 PHP 和 ASP)。

服务器端事件流的语法是非常简单的。把 "Content-Type" 报头设置为 "text/event-stream"。现在,您可以开始发送事件流了。

PHP 代码 (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}\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: " 开头)
  • 向网页刷新输出数据

EventSource 对象

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

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

相关文档:

  • build-your-first-mobile-app(第一个 PhoneGap cordova Coldfusion App)
    摘自:http://www.adobe.com/devnet/coldfusion/articles/build-your-first-mobile-app.html...
  • HTML5语义元素
    <!doctypehtml><htmllang="en"><head> <metacharset="UTF-8"> <title>语义元素</title></head><body><!--结构元素-...
  • 史上最全的Chrome使用技巧集锦
    1Chrome的隐身模式 2 3先来说说隐身模式的启用方法吧 4 51.键盘快捷:Ctrl+Shift+N。 6 72.在Windows7下的任务栏处,右击“Chrome”图标,会...
  • 绘制SVG内容到Canvas的HTML5应用
    SVG与Canvas是HTML5上绘制图形应用的两种完全不同模式的技术,两种绘制图形方式各有优缺点,但两者并非水火不容,尤其是SVG内容可直接...
  • HTML5-WebSocket技术学习(1)
    WebSocket是为解决客户端与服务端实时通信而产生的技术。 介绍它是什么的废话不多说了,直接说怎么用: 客户端: 1.创建一个EventSource对象...
  • 7款震撼人心的HTML5CSS3文字特效
    1、HTML5像素文字爆炸重组动画特效 今天我们要分享一款基于HTML5技术的文字像素爆炸重组动画特效,我们可以在输入框中指定任意文字,...
  • 关于HTML5本地存储的sessionStorage与localStorage的简单用法
    HTML5使用setItem,getItem,removeItem,clear等方法来存储和访问数据。 //存储数据 functionsetstorage(key,val){ if(window.localStorage) localStorage.setItem(key,val);...
  • JQuery实现密码有短暂的显示过程和实现 input hint效果
    目录: 一、实现目的 二、问题思考 三、解决办法 1、输入用户名 2、输入密码短暂显示 一、实现目的 这几天做项目的时候,客户...
  • HTML5 的标签列表
    结构标签:(块状元素)有意义的div<article>标记定义一篇文章<header>标记定义一个页面或一个区域的头部<nav>标记定义导航链接...
  • 国外程序员收集整理的PHP资源大全
    依赖管理 依赖和包管理库 Composer/Packagist:一个包和依赖管理器 ComposerInstallers:一个多框架Composer库安装器 Pickle:一个PHP扩展安装器 其...
  • HTML5中使用js控制audio标签的方法
    http://www.frontopen.com/3122.html <audio>标签可以在HTML5浏览器中播放音频文件。 <audio>默认提供一个控制面板,但是有些时候我们只需...
  • TWaver HTML5之树形布局
    转眼间春节假期已经过完,作为一个职业的程序猿,不知道大家有没有这样的感觉,一天不碰电脑,总觉得生活少点什么。今天是春节后...
  • html5的116个标签
    基础 标签 描述 <!DOCTYPE> 定义文档类型。 <html> 定义HTML文档。 <title> 定义文档的标题。 <body> 定义文档的主体。...
  • HTML-HTML5+CSS3权威指南阅读(三、CSS3)
    不同的浏览器(包括-moz-代表的MozillaFirefox,-ms-代表的MicrosoftInternetExplorer等)厂商在发布正式版本之前之前,试验各自对CSS3新特性的实现,...
  • ie6,7,8支持html5的方法
    ie9以上的都html5标签,ie9以下的不支持。为了让ie9以下的浏览器支持html5标签。有如下两种方法 当然,这样做的前提是设置这些html5标签...
  • html5基础概念
    html5基础概念 html5=html+css+javascriptAPI window.websocket()即时的浏览器与服务器的互相通讯 比轮询polling长轮询(longpolling)ajax要好http://www.cnblogs.c...
  • HTML5之广播聊天室
    -服务器端广播文本-所有客户端都可以收到 ---客户端 -定义文本框-定义发送事件textareaaccesskey=toninput="sendmsg();"-发送协议ws://普通web-socketws...
  • 基于HT for Web的Web SCADA工控移动应用
    在电力、油田燃气、供水管网等工业自动化领域WebSCADA的概念已经提出了多年,早先年的WebSCADA前端技术大部分还是基于Flex、Silverlight甚...
  • 寡人写的第一个HTML5页面
    好吧,其实是抄来的 <!DOCTYPEHTML> <html> <head> <metacharset="utf-8"/> <title>HTML5本地存储之本地数据库篇</title> <style...
  • Apache 中 .htaccess 文件设置技巧16则
    .htaccess文件(HypertextAccessfile)是ApacheWeb服务器的一个非常强大的配置文件,对于这个文件,Apache有一堆参数可以让你配置出几乎随心所欲的...