参考教程：http://www.w3school.com.cn/html5/html_5_serversentevents.asp

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

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

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

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

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

接收 Server-Sent 事件通知

EventSource 对象用于接收服务器发送事件通知：

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <h1>获得服务器更新</h1>
  5. <div id="result"></div>
  6.  
  7. <script>
  8. if(typeof(EventSource)!=="undefined")
  9.   {
  10.   var source=new EventSource("/example/html5/demo_sse.php");
  11.   source.onmessage=function(event)
  12.     {
  13.     document.getElementById("result").innerHTML+=event.data + "<br />";
  14.     };
  15.   }
  16. else
  17.   {
  18.   document.getElementById("result").innerHTML="Sorry, your browser does not support server-sent events...";
  19.   }
  20. </script>
  21.  
  22. </body>
  23. </html>

例子解释：

  • 创建一个新的 EventSource 对象，然后规定发送更新的页面的 URL（本例中是 "demo_sse.php"）
  • 每接收到一次更新，就会发生 onmessage 事件
  • 当 onmessage 事件发生时，把已接收的数据推入 id 为 "result" 的元素中

检测 Server-Sent 事件支持

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

  1. if(typeof(EventSource)!=="undefined")
  2.   {
  3.   // Yes! Server-sent events support!
  4.   // Some code.....
  5.   }
  6. else
  7.   {
  8.   // Sorry! No server-sent events support..
  9.   }

服务器端代码实例

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

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

PHP 代码 (demo_sse.php)：

  1. <?php
  2. header('Content-Type: text/event-stream');
  3. header('Cache-Control: no-cache');
  4.  
  5. $time = date('r');
  6. echo "data: The server time is: {$time}\n\n";
  7. flush();
  8. ?>

ASP 代码 (VB) (demo_sse.asp):

  1. <%
  2. Response.ContentType="text/event-stream"
  3. Response.Expires=-1
  4. Response.Write("data: " & now())
  5. Response.Flush()
  6. %>

代码解释：

  • 把报头 "Content-Type" 设置为 "text/event-stream"
  • 规定不对页面进行缓存
  • 输出发送日期（始终以 "data: " 开头）
  • 向网页刷新输出数据

EventSource 对象

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

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

HTML5学习(十一)---服务器发送事件的更多相关文章

  1. 【HTML5】Server-Sent服务器发送事件

    Server-Sent 事件 - 单向消息传递 Server-Sent 事件指的是网页自动获取来自服务器的更新. 以前也可能做到这一点,前提是网页不得不询问是否有可用的更新.通过服务器发送事件,更新能 ...

  2. HTML5学习笔记（七）HTML5 服务器发送事件(Server-Sent Events)

    Server-Sent 事件指的是网页自动获取来自服务器的更新. 以前也可能做到这一点,前提是网页不得不询问是否有可用的更新.通过服务器发送事件,更新能够自动到达. EventSource 对象用于接 ...

  3. HTML5 总结-服务器发送事件-9

    HTML 5 服务器发送事件 HTML5 服务器发送事件(server-sent event)允许网页获得来自服务器的更新. Server-Sent 事件 - 单向消息传递 Server-Sent 事 ...

  4. HTML5支持服务器发送事件(Server-Sent Events)-单向消息传递数据推送（C#示例）

    传统的WEB应用程序通信时的简单时序图: 现在Web App中,大都有Ajax,是这样子: HTML5有一个Server-Sent Events(SSE)功能,允许服务端推送数据到客户端.(通常叫数据 ...

  5. HTML5服务器发送事件(Server-Send Events)

    HTML5服务器发送事件是允许获得来自服务器的更新. server-sent事件-单向传递消息,表示网页自动获取来自服务器的更新. 其中有一个重要的对象,eventsource对象是用来接收服务器发送 ...

  6. HTML5中使用EventSource实现服务器发送事件

    在HTML5的服务器发送事件中,使用EventSource对象可以接收服务器发送事件的通知. 示例: es.html <!DOCTYPE html> <html> <he ...

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

    沈阳SEO:HTML5 服务器发送事件(server-sent event)允许网页获得来自服务器的更新. Server-Sent 事件 - 单向消息传递 Server-Sent 事件指的是网页自动获 ...

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

    ylbtech-HTML5: HTML5 服务器发送事件(Server-Sent Events) 1.返回顶部 1. HTML5 服务器发送事件(Server-Sent Events) HTML5 服 ...

  9. HTML5 服务器发送事件(Server-Sent Events)介绍

    w3cschool菜鸟教程 Server-Sent 事件 - 单向消息传递 Server-Sent 事件指的是网页自动获取来自服务器的更新. 以前也可能做到这一点,前提是网页不得不询问是否有可用的更新 ...

随机推荐

  1. jQueryr .on方法解析

    .On() 其实.bind(), .live(), .delegate()都是通过.on()来实现的,.unbind(), .die(), .undelegate(),也是一样的都是通过.off()来 ...

  2. phpcms v9 打开网站特别慢 增加数据库缓存方法

    SET GLOBAL QUERY_CACHE_SIZE=80000000; 设置好查询缓存的大小就行了.比如设置个20MB.SET GLOBAL QUERY_CACHE_SIZE=20000000; ...

  3. Programming Collective Intelligence

    最近正在拜读 O'reilly出版的Programming Collective Intelligence,准备研究研究搜索引擎了,童鞋们,到时候会考虑公布源码哦!

  4. c语言指针说解

    一. 指针定义 1指针的意义 2指针的赋值 指针变量同普通变量一样,使用之前不仅要定义说明, 而且必须赋予具体的值.未经赋值的指针变量不能使用, 否则将造成系统混乱. #include <std ...

  5. Microsoft Office Excel 不能访问文件

    问题描述: Microsoft Office Excel 不能访问文件“XX.xls”.可能的原因有: 1 文件名称或路径不存在.2 文件正被其他程序使用.3 您正要保存的工作簿与当前打开的工作簿同名 ...

  6. 泛形集合List<T>

    public class Person { /// <summary> /// 姓名 /// </summary> private string name; public st ...

  7. 【BZOJ 1563】 [NOI2009]诗人小G

    Description Input Output 对于每组数据,若最小的不协调度不超过1018,则第一行一个数表示不协调度若最小的不协调度超过1018,则输出"Too hard to arr ...

  8. putty连接linux as5 输入密码后连接中断

    putty连接linux as5 输入密码后连接中断 1.修改putty首页的设置,选择“close session on exit” 为 “never”,之后发现输入密码后,“session clo ...

  9. JVM内存区域模型

    一:Java技术体系模块图 二:JVM内存区域模型 1.方法区 也称"永久代” .“非堆” ,"perm",  它用于存储虚拟机加载的类信息.常量.静态变量.是各个线程共 ...

  10. window.location.hash属性介绍

    location是javascript里边管理地址栏的内置对象,比如location.href就管理页面的url,用location.href=url就可以直接将页面重定向url.而location. ...