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. 使用RGBa和Filter实现不影响子元素的CSS透明背景

    点击查看原文 问题 如果我们想要一个元素拥有半透明的背景,我们有两个选择: 使用CSS和 opacity 做一张 24-bit PNG 背景图片 在CSS中使用opacity有两个问题,一是为了适应所 ...

  2. nexus 中央仓库

    nexus 中央仓库 下载地址:http://www.sonatype.org/nexus/archived 下载最新版本 mkdir -p /opt/local/nexus tar zxvf nex ...

  3. LWIP_STM32_ENC28J60_NETCONN_UDP（3）

    前面移植了lwip之后只是简单地做了一个dhcp的程序,但是实际工作中经常要用来通讯,那今天就来讲一讲怎么用lwip来进行UDP通讯 要使用数据通信首先第一步得知道lwip是怎么样保存数据的,在使用n ...

  4. BufferedReader 输出与BufferedWriter 输入的用法

    public static void main(String[] args) {  String content[] = {"好久不见了","最近好吗",&qu ...

  5. HTML学习（六）图像

    图像标签(<img>)和源属性(Src)在 HTML 中,图像由 <img> 标签定义.<img> 是空标签,意思是说,它只包含属性,并且没有闭合标签.要在页面上显 ...

  6. codeforces #304 DIV2

    先送上一篇题解(虽然全英文的):http://codeforces.com/blog/entry/18034 A题:http://codeforces.com/problemset/problem/5 ...

  7. 18、手把手教你Extjs5（十八）模块记录的拖放删除、拖放复制新增

    网页当中的拖放(drag-drop)是比较有趣的操作,extjs5中很好的封装了拖放的动作,也有各种类来支持,但是要学好“拖放”这个东西真是很难,特别是象我这样英语不好的人,看不太懂官网上的说明,做一 ...

  8. axis2开发实例（二）建立独自的新工程

    第一部分 环境搭建 1．  环境搭建 (1)    下载Axis2服务包:axis2-1.6.2-bin.zip,axis2-1.6.2-war.zip,分别解压到D:\webservice_axis ...

  9. lPC1788的GPIO驱动

    #include "led.h" void led_init(void) { //p1.14 p0.16 p1.13 p4.27 LPC_SC->PCONP |= (1< ...

  10. iOS开发—— UIImagePickerController获取相册和拍照

    一.简单的拍照显示,或是从相册中直接选取照片 #import "ViewController.h" @interface ViewController ()<UIImageP ...