[html5] 学习笔记-服务器推送事件
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] 学习笔记-服务器推送事件的更多相关文章
- HTML5 服务器推送事件（Server-sent Events）实战开发
转自:http://www.ibm.com/developerworks/cn/web/1307_chengfu_serversentevent/ http://www.ibm.com/develop ...
- web前端学习（二）html学习笔记部分（8）--服务器推送事件3
1.2.22 html5服务器推送事件 1.2.22.1 html5服务器推送事件介绍 服务器推送事件(Server-sent Events)是HTML5规范中的一个组成部分,可以用来从服务器端实 ...
- SSE技术详解：一种全新的HTML5服务器推送事件技术
前言 一般来说,Web端即时通讯技术因受限于浏览器的设计限制,一直以来实现起来并不容易,主流的Web端即时通讯方案大致有4种:传统Ajax短轮询.Comet技术.WebSocket技术.SSE(Ser ...
- C# 实现HTML5服务器推送事件
为什么需要服务器推送事件: 因为如果需要保持前台数据的实时更新例如,IM聊天,股票信息, 1.可以在客户端不断地调用服务端的方法来获得新数据,但是这样会很消耗服务器资源,导致系统变慢! 2 html5 ...
- HTML5 服务器推送事件（Server-sent Events）
服务器推送事件(Server-sent Events)WebSocket 协议的一种服务器向客户端发送事件&数据的单向通讯.目前所有主流浏览器均支持服务器发送事件,当然除了 Internet ...
- SSE：服务器推送事件
SSE:Server-Sent Event,服务器推送事件 常规的Http协议是一个请求对应一个响应的这种方式的 但对于某些实时性要求比较高的需求,HTML5中新增了SSE,可以很方便的实现局部数据的 ...
- springweb flux 服务器推送事件
以前做服务器推送一般用轮询,后端主动给客户端推送不是很好解决.有时候也可以采用websocket 现在看了springwebflux,用它自带的方法做服务器推送方便多了. 代码如下: import o ...
- HTML5服务器推送事件
目前客户端(浏览器)和服务端交互大致有以下几种方式: 1)form表单提交方式,适合访问量不大,对用户体验要求不高的web系统开发,或者页面整体刷新无伤大雅的场合,通信方向是客户端提交给服务端,是客户 ...
- HTML5中的服务器‘推送’技术 -Server-Sent Events
转帖:http://www.developersky.net/thread-63-1-1.html 一直以来,HTTP协议都是严格遵循Request-Response模型的.客户端发送一个Reques ...
随机推荐
- php 依赖注入容器
原文: http://blog.csdn.net/realghost/article/details/35212285 https://my.oschina.net/cxz001/blog/53316 ...
- javascript 基础系列（一）
闭包: function 内部访问外部的variables function f(){ alert(ysr); } 报错了. Certain language constructs block the ...
- (简单) POJ 2502 Subway，Dijkstra。
Description You have just moved from a quiet Waterloo neighbourhood to a big, noisy city. Instead of ...
- C++数据结构之map----第一篇
摘要: 1 对于非标准类型的map,map 只需要重载小于号就可以了 2map结构初始化 map<string,double> g_lr=map<string,double>( ...
- 10、手把手教你Extjs5（十）自定义模块的设计
从这一节开始我们来设计并完成一个自定义模块.我们先来确定一个独立的模块的所能定义的一些模块信息.以下信息只是我自己在开发过程中想到或用到的,希望有新的想法的或者有建议的跟贴回复. 一个独立模块包含以下 ...
- 9、手把手教你Extjs5（九）使用MVVM特性控制菜单样式
菜单的样式多了,怎么可以灵活的切换是个问题. 在使用标准菜单的时候,在菜单最前面有二个按钮,可以切换到树状菜单和按钮菜单. 在树状菜单的显示区,可以切换换到标准菜单,以及折叠式菜单. 切换到按钮菜单之 ...
- iOS动画特效 分类： ios技术 2015-05-15 16:29 311人阅读 评论(0) 收藏
关于图层的几个坐标系. 对于ios来说,坐标系的(0,0)点在左上角,就是越往下,Y值越大.越往右,X值越大. 一个图层的frame,它是position,bounds,anchorPoint和tra ...
- MVC分页控件的使用
1. 引用 using Webdiyer.WebControls.Mvc; 2. using Webdiyer.WebControls.Mvc; ) { )); } 3.数据来源 public cla ...
- HDU 1813 Escape from Tetris
TMDTMD IDA*没跑了.什么是IDA*? 就是迭代深搜+A*估个价. 然而为什么调了一天? n<=2的时候我输出了东西.... 看了一天. #include<iostream> ...
- 安卓弹出对话框——AlertDialog（二）
在Android中,启动一个对话框有三种方式: 1.定义一个新的activity,并将其主题设置为对话框风格 2.使用AlertDialog类,并且显示它 3.使用 Android的Dialog类的子 ...