目前客户端（浏览器）和服务端交互大致有以下几种方式：

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服务器推送事件的更多相关文章

  1. SSE技术详解：一种全新的HTML5服务器推送事件技术

    前言 一般来说,Web端即时通讯技术因受限于浏览器的设计限制,一直以来实现起来并不容易,主流的Web端即时通讯方案大致有4种:传统Ajax短轮询.Comet技术.WebSocket技术.SSE(Ser ...

  2. C# 实现HTML5服务器推送事件

    为什么需要服务器推送事件: 因为如果需要保持前台数据的实时更新例如,IM聊天,股票信息, 1.可以在客户端不断地调用服务端的方法来获得新数据,但是这样会很消耗服务器资源,导致系统变慢! 2 html5 ...

  3. HTML5 服务器推送事件（Server-sent Events）实战开发

    转自:http://www.ibm.com/developerworks/cn/web/1307_chengfu_serversentevent/ http://www.ibm.com/develop ...

  4. HTML5 服务器推送事件（Server-sent Events）

    服务器推送事件(Server-sent Events)WebSocket 协议的一种服务器向客户端发送事件&数据的单向通讯.目前所有主流浏览器均支持服务器发送事件,当然除了 Internet ...

  5. [html5] 学习笔记-服务器推送事件

    1.HTML5服务器推送事件介绍 服务器推送事件(Server-sent Events)是Html5规范的一个组成部分,可以用来从服务端实时推送数据到浏览器端. 传统的服务器推送技术----WebSo ...

  6. HTML5服务器端推送事件 解决PHP微信墙推送问题

    问题描述 以前的文章中<PHP微信墙制作,开源>已经用PHP搭建了一个微信墙获取信息的服务器,然后我就在想推送技术应该怎么解决,上一篇已经用了.NET 的signalr做了一个微信墙,PH ...

  7. web前端学习（二）html学习笔记部分（8）--服务器推送事件3

    1.2.22  html5服务器推送事件 1.2.22.1  html5服务器推送事件介绍 服务器推送事件(Server-sent Events)是HTML5规范中的一个组成部分,可以用来从服务器端实 ...

  8. HTML5服务器推送消息的各种解决办法，html5服务器

    HTML5服务器推送消息的各种解决办法,html5服务器 摘要 在各种BS架构的应用程序中,往往都希望服务端能够主动地向客户端推送各种消息,以达到类似于邮件.消息.待办事项等通知. 往BS架构本身存在 ...

  9. SSE：服务器推送事件

    SSE:Server-Sent Event,服务器推送事件 常规的Http协议是一个请求对应一个响应的这种方式的 但对于某些实时性要求比较高的需求,HTML5中新增了SSE,可以很方便的实现局部数据的 ...

随机推荐

  1. HDU5763 another meaning -（KMP+DP）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5763 思路:dp[i]表示前i个字符组成的字符串所表示的意思数量,则当匹配时dp[i]=dp[i-1] ...

  2. JSTL&EL（程序员必看之一）

    EL表达式 可以在jsp页面中减少大量的Java代码.Expression Language,它是一种借鉴了javaScript和XPath的表达式语言. EL表达式定义了一系列的隐含对象和操作符,使 ...

  3. xp 共享 guest

    一.首先启用guest来宾帐户 二.控制面板→管理工具→本地安全策略→本地策略→用户权利指派里,“从网络访问此计算机”中加入guest帐户,而“拒绝从网络访问这台计算机”中删除guest帐户: 三.我 ...

  4. ORA-12545: 因目标主机或对象不存在, 连接失败

    ORA-12545: 因目标主机或对象不存在, 连接失败 1. 问题描述 XP系统下同时安装了AX1应用程序和升级版AX2,连接同一个在本机Oracle客户端上配置的连接实例,其中AX2显示链接成功, ...

  5. Xen虚拟机磁盘镜像模板制作(二)—Windows Server 2008(2012)

    在<Xen虚拟机磁盘镜像模板制作(一)—Windows Server 2008(2012)>一文中,我们已经成功制作出了Windows Server磁盘镜像.下面我们说明下如何通过它来生成 ...

  6. ion torrent ion proton

    https://www.youtube.com/watch?v=6Is3W7JkFp8 NGS 的视频 说的不错 一个做癌症的教授讲的 Ion Torrent™ next-generation seq ...

  7. IDOC、ALE、EDI三者之间的区别于联系

    EDI (Electronic data interchange) - 是指按照同一规定的一套通用标准格式,将标准的经济信息,通过通信网络传输,在贸易伙伴的电子计算机系统之间进行数据交换和自动处理.由 ...

  8. sencha 环境配置

    sencha generate app MyApp MyApp 首先需要注意的是安装 sencha 并执行相关命令. 搞了老半天才知道 想要创建空项目首先 必须的在sdk 目录下才可以.好像据说第二次 ...

  9. 关于JSP的C标签之forEach循环分隔符

    页面中可能说出现在forEach循环中间需要出力分隔符的问题, 比如: 小明 1年级,小王 2年级, 小张 3年级(循环单位是 ${bean.name} ${bean.class}) 此时的逗号出力, ...

  10. html5的特性

    1.简化的语法更简单的doctype声明是HTML5里众多新特征之一.现在你只需要写,这就行了.HTML5的语法兼容HTML4和XHTML1,但不兼容SGML. 2. 一个替代Flash的新”canv ...