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

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

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

<!DOCTYPE html>

<html>

<body>

<h1>获得服务器更新</h1>

<div id="result"></div>

<script>

if(typeof(EventSource)!=="undefined")

  {

  var source=new EventSource("/example/html5/demo_sse.php");

  source.onmessage=function(event)

    {

    document.getElementById("result").innerHTML+=event.data + "<br />";

    };

  }

else

  {

  document.getElementById("result").innerHTML="Sorry, your browser does not support server-sent events...";

  }

</script>

</body>

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

EventSource 对象

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

【HTML5】Server-Sent服务器发送事件的更多相关文章

  1. HTML5学习(十一)---服务器发送事件

    参考教程:http://www.w3school.com.cn/html5/html_5_serversentevents.asp HTML5 服务器发送事件(server-sent event)允许 ...

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

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

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

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

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

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

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

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

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

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

  7. 关于HTML5服务器发送事件(SSE)

    最近在看 W3School 上关于 HTML 5 的教程.在看到 HTML 5 服务器发送事件 ( SSE, server-sent event ) 时,没怎么弄明白示例代码是怎么回事,寻找其他教程, ...

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

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

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

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

随机推荐

  1. javascript仿天猫加入购物车动画效果

    javascript仿天猫加入购物车动画效果   注意:首先需要声明的是:代码原思路不是我写的,是在网上找的这种效果,自己使用代码封装了下而已:代码中都有注释,我们最主要的是理解抛物线的思路及在工作中 ...

  2. 常用的HTTP协议

    http协议: 基本格式:http://<host>:<port>/<path>?<query>#<frag> 示例:http://www. ...

  3. javascript工厂模式

    工厂模式 设计工厂模式的目的是为了创建对象.它通常在类或者类的静态方法实现,具有下列目标: 1.在创建相似对象是执行重复操作 2.在编译时不知道具体类型(类)的情况下,为工厂客户提供一种创建对象的接口 ...

  4. ajax 之js读取xml的多浏览器兼容

    主要是分为两大类:IE.其它浏览器 IE8以下只支持这种 InputVoltage.innerText = xmlDoc.getElementsByTagName(id)[0].text, 其它浏览器 ...

  5. 秀尔算法：破解RSA加密的“不灭神话”

    RSA加密 VS 秀尔算法 作为RSA加密技术的终结者——“太多运算,无法读取”的秀尔算法(Shor’s algorithm)不是通过暴力破解的方式找到最终密码的,而是利用量子计算的并行性,可以快速分 ...

  6. set_include_path详细解释

    zendframework的示例index.php里有这样一句 set_include_path('.' . PATH_SEPARATOR . '../library/'. PATH_SEPARATO ...

  7. ubuntu14.04中国源

    deb http://cn.archive.ubuntu.com/ubuntu/ trusty main restricted universe multiverse deb http://cn.ar ...

  8. 【Spring】Spring系列3之Spring AOP

    3.Spring AOP 3.1.AOP概述 3.2.前置通知 3.3.后置通知 3.4.返回通知.异常通知.环绕通知 3.5.指定切面优先级 3.6.重用切入点表达式 3.7.引入通知 3.8.基于 ...

  9. 【SpringMVC】SpringMVC系列14之SpringMVC国际化

    14.SpringMVC国际化 14.1.概述 14.2.用户切换选择语言

  10. Nested List Weight Sum I & II

    Nested List Weight Sum I Given a nested list of integers, return the sum of all integers in the list ...