HTML5服务器推送事件
目前客户端（浏览器）和服务端交互大致有以下几种方式：
1）form表单提交方式，适合访问量不大，对用户体验要求不高的web系统开发，或者页面整体刷新无伤大雅的场合，通信方向是客户端提交给服务端，是客户端主动发起；
2）Ajax方式，特点是用户体验好，无需页面整体刷新，对服务器压力也小，有利于客户端和服务端的解耦，也是目前广为使用的一种客户端服务端交互方式，它也是通过客户端发起请求，服务端接受处理，通信方向和form表单相同；
3）server-sent-event,它是服务端主动向客户端（浏览器）发送数据，客户端监听并接受，然后处理，通信方向也是单向的，但是和上面两种相反，是服务端发起，客户端接受，但是其应用层协议还是基于http的。
4）web socket，这是将以前服务端通信的套接字原理实现在了浏览器上，使得浏览器和服务端可以相互发送消息，通信方向是双向的，只要连接一建立，双方都可以向对方发送数据，无需哪一方先来后来，应用层协议基于WS协议。
上面第3第4由于是HTML5中新添加的功能，所以在很多老版的浏览器中（如IE6-IE8）还不支持，因此应用还不够广泛.
这里主要实现的是第三种方式，即服务端推送事件，直接上代码
客户端代码
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
(function()
{
var source;
if (!!window.EventSource) {
source = new EventSource('http://localhost/server.php');
}
source.onmessage=function(e)
{
var oSpan=document.createElement('span');
oSpan.innerHTML=e.data+"<br>"; var oDiv=document.querySelector("#div1");
oDiv.appendChild(oSpan);
} })();
</script>
<div id="div1"></div>
</body>
</html>
以上代码构造一个eventSource对象，指向一个服务端后台PHP文件，这个对象是HTML5中的服务端推送事件API封装对象，然后添加onmessage事件，用来监听服务端发送过来的消息，服务端一有消息发送，就会执行这个事件的回调函数，这里让它接收到数据之后将其包裹在span中并将这个span插入到div中。
服务端代码server.PHP
<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache'); function sendMsg($id, $msg) {
echo "id: $id" . PHP_EOL;
echo "data: $msg" . PHP_EOL;
echo PHP_EOL;
ob_flush();
flush();
} for($i=0;$i<=1000;$i++)
{
$serverTime = time();
sendMsg($serverTime, 'server time: ' . date("h:i:s", time()));
sleep(2); }
首先要设定其发送给客户端http报文中的首部
header('Content-Type: text/event-stream');这是服务端推送事件特定的MIME类型，
header('Cache-Control: no-cache');表示不让浏览器进行缓存
然后每隔两秒向客户端发送一个时间戳，客户端接收到之后，显示到div中，效果如下：
有了这种通信方式，我们制裁采用的Ajax长轮询的方式来模拟服务器端推送事件就可以不用了，如果服务端收到一些需要通知客户端的信息，那么可以直接发送给客户端，而不必等待其发送请求。
HTML5服务器推送事件的更多相关文章
- SSE技术详解：一种全新的HTML5服务器推送事件技术
前言 一般来说,Web端即时通讯技术因受限于浏览器的设计限制,一直以来实现起来并不容易,主流的Web端即时通讯方案大致有4种:传统Ajax短轮询.Comet技术.WebSocket技术.SSE(Ser ...
- C# 实现HTML5服务器推送事件
为什么需要服务器推送事件: 因为如果需要保持前台数据的实时更新例如,IM聊天,股票信息, 1.可以在客户端不断地调用服务端的方法来获得新数据,但是这样会很消耗服务器资源,导致系统变慢! 2 html5 ...
- HTML5 服务器推送事件（Server-sent Events）实战开发
转自:http://www.ibm.com/developerworks/cn/web/1307_chengfu_serversentevent/ http://www.ibm.com/develop ...
- HTML5 服务器推送事件（Server-sent Events）
服务器推送事件(Server-sent Events)WebSocket 协议的一种服务器向客户端发送事件&数据的单向通讯.目前所有主流浏览器均支持服务器发送事件,当然除了 Internet ...
- [html5] 学习笔记-服务器推送事件
1.HTML5服务器推送事件介绍 服务器推送事件(Server-sent Events)是Html5规范的一个组成部分,可以用来从服务端实时推送数据到浏览器端. 传统的服务器推送技术----WebSo ...
- HTML5服务器端推送事件 解决PHP微信墙推送问题
问题描述 以前的文章中<PHP微信墙制作,开源>已经用PHP搭建了一个微信墙获取信息的服务器,然后我就在想推送技术应该怎么解决,上一篇已经用了.NET 的signalr做了一个微信墙,PH ...
- web前端学习（二）html学习笔记部分（8）--服务器推送事件3
1.2.22 html5服务器推送事件 1.2.22.1 html5服务器推送事件介绍 服务器推送事件(Server-sent Events)是HTML5规范中的一个组成部分,可以用来从服务器端实 ...
- HTML5服务器推送消息的各种解决办法，html5服务器
HTML5服务器推送消息的各种解决办法,html5服务器 摘要 在各种BS架构的应用程序中,往往都希望服务端能够主动地向客户端推送各种消息,以达到类似于邮件.消息.待办事项等通知. 往BS架构本身存在 ...
- SSE：服务器推送事件
SSE:Server-Sent Event,服务器推送事件 常规的Http协议是一个请求对应一个响应的这种方式的 但对于某些实时性要求比较高的需求,HTML5中新增了SSE,可以很方便的实现局部数据的 ...
随机推荐
- Mac可设置环境变量的位置、查看和添加PATH环境变量
Mac 启动加载文件位置(可设置环境变量) 首先要知道你使用的 Mac OS X 是什么样的 Shell,使用命令 echo $SHELL 如果输出的是:csh 或者是 tcsh,那么你用的就是 C ...
- Cisco ASA 5505 Routing Between Two (Internal) VLANS
Referenced:http://www.petenetlive.com/KB/Article/0000869 Problem I had to set this up for a client t ...
- iptables 用法
又有人攻击服务器了,没有办法又的去防,这里简单介绍一种限制指定IP访问的办法. 单个IP的命令是 iptables -I INPUT -s 59.151.119.180 -j DROP 封IP段的命 ...
- jquery 平滑滚动页面到某个锚点
$(document).ready(function() { $("a.topLink").click(function() { $ ...
- 7-zip的压缩的时候排除某目录
安装暂且不说了. 看一下帮助. [root@localhost Server]# 7z -Zip [] - Igor Pavlov -- p7zip Version ,Utf16=on,HugeFil ...
- python 函数性能分析
1 使用profile分析函数性能示例1, 以profile为例: import profile def profileTest(): Total =1; for i in range(10): To ...
- numpy之sum
Definition : sum(a, axis=None, dtype=None, out=None, keepdims=False) axis: None or int or tuple of i ...
- String,StringBuffer和StringBuilder源码解析[基于JDK6]
最近指导几位新人,学习了一下String,StringBuffer和StringBuilder类,从反馈的结果来看,总体感觉学习的深度不够,没有读出东西.其实,JDK的源码是越读越有味的.下面总结一下 ...
- List,set,Map 的用法和区别
Collection├List│├LinkedList│├ArrayList│└Vector│ └Stack└SetMap├Hashtable├HashMap└WeakHashMap Collecti ...
- preventDefault()方法
必须在dragend和dragover事件内调用“事件对象.preventDefault()”方法.因为在默认情况下,拖放的目标元素是不允许接受元素的,为了把元素拖放到其中,必须把默认处理给关掉.目前 ...