通过html5 的EventSource来进行数据推送
<!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来进行数据推送的更多相关文章
- HTML5支持服务器发送事件(Server-Sent Events)-单向消息传递数据推送（C#示例）
传统的WEB应用程序通信时的简单时序图: 现在Web App中,大都有Ajax,是这样子: HTML5有一个Server-Sent Events(SSE)功能,允许服务端推送数据到客户端.(通常叫数据 ...
- HTML5数据推送SSE原理及应用开发
JavaScript表达行为,CSS表达外观,注意HTML既表达结构(逻辑结构),又表达内容(数据本身)通常需要更新数据时,并不需要更新结构,正是这种不改变组织结构仅改变数据的诉求,推动了数据拉取和数 ...
- HTML5 SSE 数据推送应用开发
javascript表达行为,css表达外观,注意HTML既表达结构(逻辑结构),又表达内容(数据本身)通常需要更新数据时,并不需要更新结构,正是这种不改变组织结构仅改变数据的诉求,推动了数据拉取和数 ...
- 理解HTML5数据推送应用开发问题
一.数据推送 SSE是一种允许服务端向客户端推送新数据(通常称作数据推送)的HTML5技术.那么,究竟什么是数据推送?它与我们可能用过的其他技术有什么不同呢? 让我先来回答什么不是数据推送.数据推送有 ...
- HTML5中的SSE（服务器推送技术）
本文原链接:https://cloud.tencent.com/developer/article/1194063 SSE技术详解:一种全新的HTML5服务器推送事件技术 前言 概述 基本介绍 与We ...
- 使用Node.js实现数据推送
业务场景:后端更新数据推送到客户端(Java部分使用Tomcat服务器). 后端推送数据的解决方案有很多,比如轮询.Comet.WebSocket. 1. 轮询对于后端来说开发成本最低,就是按照传统的 ...
- javascript之数据推送
我们使用ajax与后台服务进行交互,常常是通过触发事件来单次交互,但对于有些web应用来说,需要前台与后台保持长连接,前端不定时地接收后台推送的数据信息, 例如:股票行情分析.聊天室和网页在线游戏等. ...
- SSE技术详解：使用 HTTP 做服务端数据推送应用的技术
SSE ( Server-sent Events )是 WebSocket 的一种轻量代替方案,使用 HTTP 协议. 严格地说,HTTP 协议是没有办法做服务器推送的,但是当服务器向客户端声明接下来 ...
- kafka和websocket实时数据推送
需求 已有Kafka服务,通过kafka服务数据(GPS)落地到本地磁盘(以文本文件存储).现要根据echarts实现一个实时车辆的地图. 分析 前端实时展现:使用websocket技术,实现服务 ...
随机推荐
- php使用inotify实现队列处理
php使用inotify实现队列处理参考如下文章:http://blog.jiunile.com/php%E4%BD%BF%E7%94%A8inotify%E5%AE%9E%E7%8E%B0%E9%9 ...
- ubuntu 16.04 LTS 安装 teamviewer 13
背景介绍 由于需要做现场的远程支持,经协商后在现场的服务器上安装TeamViewer 以便后续操作. 本来以为很简单的一件事,谁知却稍微费了一番周折 :( 记录下来,希望提醒自己的同时也希望能够帮到 ...
- Spark学习笔记2：RDD编程
通过一个简单的单词计数的例子来开始介绍RDD编程. import org.apache.spark.{SparkConf, SparkContext} object word { def main(a ...
- 【Codeforces】CF 911 D. Inversion Counting（逆序对+思维）
题目 传送门:QWQ 分析 思维要求比较高. 首先我们要把原图的逆序对q算出来. 这个树状数组或归并排序都ok(树状数组不用离散化好评) 那么翻转$[l,r]$中的数怎么做呢? 暴力过不了,我试过了. ...
- 面对最菜TI战队，OpenAI在Dota2上输的毫无还手之力
作者:Tony Peng 去年,OpenAI 的 1v1 AI 击败了世界顶尖选手 Dendi,OpenAI CTO Greg Brockman 承诺:明年,我们会带着 5v5 的 AI bot 重回 ...
- Java集合入门
内容: 1.认识集合 2.Iterator迭代器 1.认识集合 (1)什么是集合 前面的学习,我们知道数据多了,使用数组存放.而且数组中存放的都是基本类型的数据,并且数组是定长的. 当在程序中创建的对 ...
- Selenium如何定位动态id的元素?
怎么定位这类型的元素呢? 根据其他属性定位如果有其他固定属性,最先考虑的当然是根据元素的其他属性来定位,定位方式那么多,何必在这一棵树上吊死.. 根据相对关系定位根据其附近的父节点.子节点.兄弟节点定 ...
- msq_table's methods
-- 查看有哪些用户 host: % 代表任意地址都可以登录 host: localhost 代表仅本地可以连接select host,user from mysql.user; -- 建库 crea ...
- UVA-839-二叉树-一个有意思的题目
题意: 一颗二叉树可以看成一个杠杆,左右俩边有重量,有到支点长度,判断整个树是否平衡(根据杠杆原理),如果当前结点有左孩子,那么当前左边的重量就是左孩子的总和,右边同理 递归,发现scanf和cin的 ...
- 隐藏bat脚本运行时弹出的黑窗口,以隐藏进程在后台执行.
1.把这段代码写在前面@echo offif "%1"=="r" goto startif "%1"=="h" goto ...