1、HTML5服务器推送事件介绍

服务器推送事件（Server-sent Events）是Html5规范的一个组成部分，可以用来从服务端实时推送数据到浏览器端。

传统的服务器推送技术----WebSocket: WebSocket规范是HTML5的一个重要组成部分，已经被很多主流浏览器支持，也有不少基于WebSocket开发的应用。正如名称所表示的一样，WebSocket使用的是套接字连接，基于TCP协议。使用WebSocket之后，实际在服务器端和浏览器端建立了一个套接字连接，可以进行双向的数据传输。WebSocket功能是很强大的，使用起来也很灵活，可以适用于不同的场景。不过WebSocket技术也比较复杂，包括服务器端和浏览器端的实现都不同于一般的Web应用。

----HTTP协议：简易轮询，即浏览器端定时向服务器端发起请求，来查询是否有数据需要更新。这种做法比较简单，可以在一定程度上解决问题。不过对于轮询的时间间隔需要进行仔细考虑，间隔过长，会导致用户不能及时收到更新的数据；间隔过短，会导致查询请求过多，增加服务器端的负担。

2、HTML5服务器推送事件实现

1）服务器代码头：header('Content-Type: text/event-stream')

2）EventSource事件：　onopen----服务器的链接被打开    onmessage----接收消息     onerror----错误发生

首先下载phpstorm并安装，在windows下，由于phpstorm没有自带Interpreter，因此，在http://php.net下载相应的文件，并在phpstorm中配置好，端口设置为9090。

php文件命名为index.php，

 <?php
 header('Content-Type:text/event=stream');

 echo "hello world";

在浏览器中输入：localhost:9090/index.php，页面即可显示 hello world

帮助文档地址：https://developer.mozilla.org

一个例子(运行php服务器，在浏览器中输入：localhost:9090/index.html)：

index.html:

 <!DOCTYPE html>
 <html>
 <head>
     <title></title>
     <script src="index.js"></script>
 </head>
 <body>
 <h1>Status:</h1>
 <div id="statusDiv"></div>
 <h1>Server Data:</h1>
 <div id="serverData"></div>
 </body>
 </html>

index.php:

 <?php
 header('Content-Type:text/event-stream');

 for($i = 0; $i<100;$i++){
     date_default_timezone_set("Asia/Shanghai");
     echo "event:newDate\n";
     echo 'data:'.date('Y-m-d H-i-s');
     echo "\n\n";
     flush();
     sleep(1);
 }

index.js:

 var serverData,statusDiv;
 var SERVER_URL = "index.php";

 window.onload = function(){
     serverData = document.getElementById("serverData");
     statusDiv = document.getElementById("statusDiv");
     startlistenServer();
 }

 function startlistenServer(){
     statusDiv.innerHTML = "start Connect Server...";
     var es = new EventSource(SERVER_URL);
     es.addEventListener("newDate",newDateHandler);
     es.onopen =openHandler;
     es.onerror = errorHandler;
     es.onmessage = messageHandler;
 }

 function openHandler(e){
     statusDiv.innerHTML="Server open";
 }

 function errorHandler(e){
     statusDiv.innerHTML="Error";
 }

 function messageHandler(e){
     serverData.innerHTML = e.data;
 }

 function newDateHandler(e){
     serverData.innerHTML = e.data;
 }

[html5] 学习笔记-服务器推送事件的更多相关文章

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

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

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

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

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

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

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

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

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

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

  6. SSE：服务器推送事件

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

  7. springweb flux 服务器推送事件

    以前做服务器推送一般用轮询,后端主动给客户端推送不是很好解决.有时候也可以采用websocket 现在看了springwebflux,用它自带的方法做服务器推送方便多了. 代码如下: import o ...

  8. HTML5服务器推送事件

    目前客户端(浏览器)和服务端交互大致有以下几种方式: 1)form表单提交方式,适合访问量不大,对用户体验要求不高的web系统开发,或者页面整体刷新无伤大雅的场合,通信方向是客户端提交给服务端,是客户 ...

  9. HTML5中的服务器‘推送’技术 -Server-Sent Events

    转帖:http://www.developersky.net/thread-63-1-1.html 一直以来,HTTP协议都是严格遵循Request-Response模型的.客户端发送一个Reques ...

随机推荐

  1. 一道题看懂OC的文件管理：NSFileManager，计算文件包含内存大小

    计算文件夹下所有文件的大小 // 查看错误信息 __autoreleasing NSError *error; // 文件管理对象 NSFileManager *manager = [NSFileMa ...

  2. 关于iOS性能调优

    性能调优一直都是作为高阶iOS开发者的一个入门门槛,下面我搜集了日常查阅资料中见到的各种高质量调优博文,仅供参考 UIKit性能调优实战讲解 iOS 高效添加圆角效果实战讲解

  3. thinkphp中的ajax分页

    thinkphp中用ajax分页和普通的ajax分页的区别在于处理位置的不同,thinkphp是在控制器的方法中处理ajax传的值,然后返回数据.下面是一个点击事件触发后,显示的内容用ajax分页. ...

  4. 用命令行使用soot反编译生成jimple

    使用工具:soot-2.5.0.jar 注意:soot-2.5.0.jar必须使用Java1.7以及之前的版本,使用Java1.8会发生错误. 修改jdk的方法是在设置java_home的路径的时候, ...

  5. Cookie mapping技术

    摘要: RTB竞价中的cookie mapping技术解决DSP的cookie跟ad change的cookie匹配问题. Cookie mapping分为两步:(1)google ad exchan ...

  6. FragmentTabHost+FrameLayout实现底部菜单栏

    现在一般的app都使用底部菜单栏,那具体怎么实现的呢!我们就来看看 首先给大家展示一下布局文件 1 <LinearLayout xmlns:android="http://schema ...

  7. November 11th 2016 Week 46th Friday

    Keep in mind that neither success nor failure is ever final. 无论成败,皆非定局. The final is not coming, but ...

  8. FMDB的一些基本操作小结

    http://blog.csdn.net/iunion/article/details/7204625 仅供自己记录使用, h文件 #import <Foundation/Foundation. ...

  9. Android L（5.0）源码之图形与图像处理之图形特效——Matrix

    最近在研究android 5.0的gallery模块,学习了相关的知识点,准备写点博客总结一下,有时间了会补充完整

  10. EnablePrefetcher注册表项的修改与电脑提速

    前些天在图书馆找教材,偶然发现一本windows dos命令应用技巧的书,发现了几个有用的注册表项 EnablePrefetcher这个注册表项是windows用来控制系统预读取数据开放程度的参数,其 ...