以往我们要获取服务器的数据更新,一般通过ajax的定时请求,不过这样效率就低了。我们通过html5的EventSource可以很方便的获取服务器的数据更新,不过IE好像不支持。

 
例1如下:
index.html代码如下:
<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="data"></div>
</body>
<script type="text/javascript">
//创建EventSource对象
var es = new EventSource("./data.php");
//接收到消息的回调函数
es.onmessage = function(e) {
document.getElementById("data").innerHTML = e.data;
};
</script>
</html>

data.php代码如下:

<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache'); $num = mt_rand(1000, 9999);
//必须以data:开头,\n\n结尾
echo "data: {$num}\n\n";
//刷新缓存
ob_flush();
flush();
我们把代码调整一下:
<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="data">
<ul id="data-list"> </ul>
</div>
</body>
<script type="text/javascript">
//创建EventSource对象
var es = new EventSource("./data.php");
//接收到消息的回调函数
es.onmessage = function(e) {
var addLi = document.createElement("li");
addLi.innerHTML = e.data;
document.getElementById("data-list").appendChild(addLi);
};
</script>
</html>
<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache'); $time = date('Y-m-d H:i:s');
echo "data: {$time}\n\n";
ob_flush();
flush();

通过下面的图可以看到,浏览器(chrome)每隔3秒会自动请求data.php文件获取数据。

通过html5 的EventSource来进行数据推送的更多相关文章

  1. HTML5支持服务器发送事件(Server-Sent Events)-单向消息传递数据推送(C#示例)

    传统的WEB应用程序通信时的简单时序图: 现在Web App中,大都有Ajax,是这样子: HTML5有一个Server-Sent Events(SSE)功能,允许服务端推送数据到客户端.(通常叫数据 ...

  2. HTML5数据推送SSE原理及应用开发

    JavaScript表达行为,CSS表达外观,注意HTML既表达结构(逻辑结构),又表达内容(数据本身)通常需要更新数据时,并不需要更新结构,正是这种不改变组织结构仅改变数据的诉求,推动了数据拉取和数 ...

  3. HTML5 SSE 数据推送应用开发

    javascript表达行为,css表达外观,注意HTML既表达结构(逻辑结构),又表达内容(数据本身)通常需要更新数据时,并不需要更新结构,正是这种不改变组织结构仅改变数据的诉求,推动了数据拉取和数 ...

  4. 理解HTML5数据推送应用开发问题

    一.数据推送 SSE是一种允许服务端向客户端推送新数据(通常称作数据推送)的HTML5技术.那么,究竟什么是数据推送?它与我们可能用过的其他技术有什么不同呢? 让我先来回答什么不是数据推送.数据推送有 ...

  5. HTML5中的SSE(服务器推送技术)

    本文原链接:https://cloud.tencent.com/developer/article/1194063 SSE技术详解:一种全新的HTML5服务器推送事件技术 前言 概述 基本介绍 与We ...

  6. 使用Node.js实现数据推送

    业务场景:后端更新数据推送到客户端(Java部分使用Tomcat服务器). 后端推送数据的解决方案有很多,比如轮询.Comet.WebSocket. 1. 轮询对于后端来说开发成本最低,就是按照传统的 ...

  7. javascript之数据推送

    我们使用ajax与后台服务进行交互,常常是通过触发事件来单次交互,但对于有些web应用来说,需要前台与后台保持长连接,前端不定时地接收后台推送的数据信息, 例如:股票行情分析.聊天室和网页在线游戏等. ...

  8. SSE技术详解:使用 HTTP 做服务端数据推送应用的技术

    SSE ( Server-sent Events )是 WebSocket 的一种轻量代替方案,使用 HTTP 协议. 严格地说,HTTP 协议是没有办法做服务器推送的,但是当服务器向客户端声明接下来 ...

  9. kafka和websocket实时数据推送

    需求 ​ 已有Kafka服务,通过kafka服务数据(GPS)落地到本地磁盘(以文本文件存储).现要根据echarts实现一个实时车辆的地图. 分析 前端实时展现:使用websocket技术,实现服务 ...

随机推荐

  1. php使用inotify实现队列处理

    php使用inotify实现队列处理参考如下文章:http://blog.jiunile.com/php%E4%BD%BF%E7%94%A8inotify%E5%AE%9E%E7%8E%B0%E9%9 ...

  2. mysql 笔记分享

    mysql LPAD 和RPAD不足位数补齐填充函数总结一下mysql数据库的一些特征MySQL WHERE 语句优化之我见mysql limit 实例详解mysql 如何实现多表联合更新MySQL ...

  3. Dance GAN 迁移不同视频中人物动作的方法

    该研究提出一种迁移不同视频中人物动作的方法.给出两个视频,一个视频中是研究者想要合成动作的目标人物,另一个是被迁移动作的源人物,研究者通过一种基于像素的端到端流程在人物之间进行动作迁移(motion ...

  4. 华为手机如何查看WiFi密码

    2017.8.26 (补充) 博主更新华为手机系统之后,发现下面的教程已经不适用了,新系统在备份WLAN时强制要求设置密码,无法跳过,所以下面的教程仅适用于备份时可以跳过设置密码的系统. 有时候手机用 ...

  5. elt区间分布

    select DATE_FORMAT(CURDATE(),'%Y%m%d') DateId,elt(interval(curnum,0, 10000,20000,30000,40000,50000, ...

  6. 3.Web项目中使用Log4j实例

    转自:https://blog.csdn.net/luohai859/article/details/52250807 上面代码描述了Log4j的简单应用,其实使用Log4j也就是这样简单方便.当然除 ...

  7. JS的prototype和__proto__、constructor

    看了JS的prototype和__proto__这篇文章,才感觉很清晰了,对于原型这块,以前经常把这些属性弄不清楚, 明白了之后保存下整理下: prototype: 是函数的一个属性(每个函数都有一个 ...

  8. oracle跟踪sql语句

    oracle跟踪sql语句 select * from v$sql 查询客户端电脑名称的ID select terminal, SID,SERIAL#  from v$session where  ( ...

  9. win2008 server ping不同

    win2008 server ping不同,网络正常. 下图可以解决!!!

  10. 返回顶部 fixed oncheck(点击按钮)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...