HTML5 服务器发送事件(server-sent event)允许网页获得来自服务器的更新。
Server-Sent 事件 - 单向消息传递
Server-Sent 事件指的是网页自动获取来自服务器的更新。
以前也可能做到这一点,前提是网页不得不询问是否有可用的更新。通过服务器发送事件,更新能够自动到达。
例子:Facebook/Twitter 更新、估价更新、新的博文、赛事结果等。
浏览器支持
所有主流浏览器均支持服务器发送事件,除了 Internet Explorer。
接收 Server-Sent 事件通知
EventSource 对象用于接收服务器发送事件通知:
实例
<!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" 的元素中
检测 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 | 当错误发生 |
相关推荐
15.2.5 FileReader接口中的事件 288 15.3 拖放API 290 15.3.1 实现拖放的步骤 290 15.3.2 通过拖放显示欢迎信息 291 15.4 dataTransfer对象应用详解 293 15.4.1 使用effectAllowed...
须确定本机上装有.net ...如:实现<发送>,<抄送>,<密送>功能,可大量群送,可添加大量的任意格式的附件(只要对方邮件服务器支持),可以邮件正文中添加显示图片。其实功能如保存设置,保存邮件,加载邮件等等。
fleck开源 HTML5 Websocket fleck开源 HTML5 Websocket fleck开源 HTML5 Websocket 对于简单快速的项目我会用它,如果你不需要用WebSocket发送太复杂的数据结构、命令一样的消息、或在客户端无WebSocket支持时的...
人工智能-项目实践-html-嵌入式web服务器BOA+CGI+HTML+MySQL项目实战——Linux 使用到的软件和技术 BOA服务器,CGI,CCGI,MySQL,SQLite。C,HTML,CSS,JS,SQL 具体功能讲解 1、运行BOA服务器 (来到BOA目录下...
之所以本书取名... 6.5 服务器发送事件……459 6.6 独立线程……460 6.7 服务线程……467 6.8 IndexedDB……487 6.9 媒体流 ……500 6.10 Web音频API……509 6.11 WebRTC……537 6.12 Web 组件……563
4.1 显示文本——Lable,HTML 4.2 方形选择框——CheckBox 4.3 圆形选择框——RadioButton 4.4 按钮——Button 4.5 自定义按钮——PushButton,ToggleButton 4.6 文件上传——FileUpload 4.7 时间选择器——...
本工程为MyEclipse javaWeb工程,用于展示如何使用 HTML5 webSocket API实现即时通讯的功能。 本工程编码方式:UTF-8 功能说明: 1、本功能支持多人聊天,类似于http://www.htkaoyan.com/网站中的在线自询; 2、...
Oracle9i备课笔记——吕海东 第1讲 Oracle9i简介 目的: 1. 了解数据库的发展,关系数据库的基本原理。 2. 了解目前市场上流行的数据库产品及特点 3. 了解Oracle数据库的发展 4. 掌握Oracle9i产品系列 5. 掌握Oracle...
6.6 手机拨接状态——PhoneStateListener之onCallStateChanged 6.7 有来电,发送邮件通知——PhoneStateListener与ACTION_SEND 6.8 存储卡剩余多少容量——Environment加StatFs 6.9 访问本机内存与存储卡——File的...
6.6 手机拨接状态——PhoneStateListener之onCallStateChanged 6.7 有来电,发送邮件通知——PhoneStateListener与ACTION_SEND 6.8 存储卡剩余多少容量——Environment加StatFs 6.9 访问本机内存与存储卡——File的...
6.6 手机拨接状态——PhoneStateListener之onCallStateChanged 6.7 有来电,发送邮件通知——PhoneStateListener与ACTION_SEND 6.8 存储卡剩余多少容量——Environment加StatFs 6.9 访问本机内存与存储卡——File的...
在实际的应用中,用户使用浏览器浏览Web应用,都是在向Web服务器发送请求。Web服务器根据用户的请求使用以不同方式进行响应。通常对于动态网站而言,用户的每一次请求服务器都是对PHP脚本的一次调用,都需要执行PHP...
2.找到了服务器的位置,浏览器会向服务器发送一个请求(request),这个请求包含着http协议规定格式的数据,现在咱们不需要去计较细节,先把注意力集中在流程上。 3.接下来,服务器接收请求,分析请求中包含的数据...
6.6 手机拨接状态——PhoneStateListener之onCallStateChanged 6.7 有来电,发送邮件通知——PhoneStateListener与ACTION_SEND 6.8 存储卡剩余多少容量——Environment加StatFs 6.9 访问本机内存与存储卡——File的...
6.5 通过短信发送email通知——BroadcastReceiver与Intent整合 6.6 手机拨接状态——PhoneStateListener之onCallStateChanged 6.7 有来电,发送邮件通知——PhoneStateListener与ACTION_SEND 6.8 存储卡剩余多少容量...
6.6 手机拨接状态——PhoneStateListener之onCallStateChanged 6.7 有来电,发送邮件通知——PhoneStateListener与ACTION_SEND 6.8 存储卡剩余多少容量——Environment加StatFs 6.9 访问本机内存与存储卡——File...
6.6 手机拨接状态——PhoneStateListener之onCallStateChanged 6.7 有来电,发送邮件通知——PhoneStateListener与ACTION_SEND 6.8 存储卡剩余多少容量——Environment加StatFs 6.9 访问本机内存与存储卡——File的...
6.6 手机拨接状态——PhoneStateListener之onCallStateChanged 6.7 有来电,发送邮件通知——PhoneStateListener与ACTION_SEND 6.8 存储卡剩余多少容量——Environment加StatFs 6.9 访问本机内存与存储卡——File的...