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,可以很方便的实现局部数据的 ...
随机推荐
- hdu5853 （后缀自动机）
Problem Jong Hyok and String 题目大意 给你n个字符串,有q个询问. 定义set(s)={(i,j)} 表示 s在第i个字符串中出现,且末尾位置为j. 对于一个询问,求se ...
- 解决：子元素设置margin-top，父元素也受影响的问题
<!doctype html><html> <head> <meta charset="UTF-8"> <title>子 ...
- linux远程连接mysql数据库
在linux系统中,远程连接mysql数据库时不仅需要开启ip访问,还需要将防火墙中添加相应规则 在wdlinux中的[安全管理]菜单下选择[防火墙[iptables]]选项,增加端口为3306的规则 ...
- WP8.1 实现Continuation程序(打开文件，保存文件等）
以保存文件为例 首先,在项目中加入ContinuationManager.cs类,以及SuspensionManager.cs类. 其次,在App.xaml.cs中,完成如下步骤: 1. 添加Cont ...
- WebBrowser使用详解
编号:1007时间:2016年4月29日14:53:45功能:WebBrowser使用详解URl:http://blog.sina.com.cn/s/blog_3d7bed6501000c8n.htm ...
- url截取判断（实现同级列表）
<script> var dUrl=window.location.href; var cUrl=(dUrl.substring(0, dUrl.indexOf('list_'))); v ...
- 2014年IT互联网行业薪酬待遇
以下均为应届毕业生的起薪待遇: 一.民企 1. 百度 13k*14.6,special 14~17k*14.6 开发类 13K*14.6 (2014) 测试类.前端类 12K*14.6 (2014) ...
- 关于FireFox类VIM插件。VimPerator
说实话现在一直非常喜欢VIM的那种操控方式.当然我不是一个程序员,只是觉得处理文本的时候,那种效率很快.而且不用来回再鼠标跟键盘之间的切换也让我感觉很舒服. 以前一直在想如果开网页的时候也能那样得话不 ...
- Mysql Too Many Connections问题解决
MySQL的max_connections参数用来设置最大连接(用户)数.每个连接MySQL的用户均算作一个连接,max_connections的默认值为100.本文将讲解此参数的详细作用与性能影响. ...
- BAPI 使用
BAPI_ACC_DOCUMENT_POST *---BAPI_ACC_DOCUMENT_POST 所需要的参数 DATA: OBJ_TYPE LIKE BAPIACHE09-OBJ_TYPE, ...