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

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

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

  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" 的元素中

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. HDOJ 2089 不要62

    不要62 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submis ...

  2. php面试题之五——PHP综合应用（高级部分）

    五.PHP综合应用 1.写出下列服务的用途和默认端口(新浪网技术部) ftp.ssh.http.telnet.https ftp:File Transfer Protocol,文件传输协议,是应用层的 ...

  3. CSS 实现垂直居中的几种方案

    最近在学关系型数据库相关,MySQL 和 Postgre,捎带着学了 PHP,为了练手这几天就忙着自己搭博客,项目部署在某云上,该云算是良心,给的空间自己搭博客用足够了.本来想着每日一bo的,所以有的 ...

  4. [Effective JavaScript 笔记] 第5条：避免对混合类型使用==运算符

    “1.0e0”=={valueOf:function(){return true;}} 是值是多少? 这两个完全不同的值使用==运算符是相等的.为什么呢?请看<[Effective JavaSc ...

  5. 把 表拷贝到test测试数据库

    (文章是从我的个人主页上粘贴过来的,大家也可以访问我的主页 www.iwangzheng.com) bundle exec rake db:schema:load RAILS_ENV=test   注 ...

  6. Nmap备忘单：从探索到漏洞利用（Part 4）

    这是我们的Nmap备忘单的第四部分(Part 1. Part 2. Part 3).本文中我们将讨论更多东西关于扫描防火墙,IDS / IPS 逃逸,Web服务器渗透测试等.在此之前,我们应该了解一下 ...

  7. HDU-1159 Common Subsequence 最长上升子序列

    Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submission( ...

  8. editorial-render A

    PROBLEM LINK: PracticeContest Author: adminTester: Kevin AtienzaEditorialist: Ajay K. VermaRussian T ...

  9. mysql sql维护常用命令

    mysql修改表名,列名,列类型,添加表列,删除表列 alter table test rename test1; --修改表名 alter table test add  column name v ...

  10. Java for LeetCode 201 Bitwise AND of Numbers Range

    Given a range [m, n] where 0 <= m <= n <= 2147483647, return the bitwise AND of all numbers ...