以往我们要获取服务器的数据更新，一般通过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. (转)Win7 64位系统下 Retional rose 2003 安装及破解

    网上关于Retional rose 2003安装和破解的文章比较多,这里,我结合自己的亲身体验,和大家分享一下win7 旗舰版 64位系统下Retional rose 2003(下面简称rose200 ...

  2. css3网站收集

    把群里大家推荐的网站做了下收集,等有时间了研究下 1.http://icomoon.io/app/  这个网站用来生成跟导出字体图标的,自带的图标种类很多很丰富,基本够用了,不过你也可以自己设计,然后 ...

  3. 开发组件：tmpfs

    [Linux]tmpfs简介及增加方式 https://blog.csdn.net/nextaction/article/details/57076924

  4. Windows10环境下loadrunner11 安装

    loadrunner11安装包下载:链接:https://pan.baidu.com/s/12AVNtopwuA-UDsoxbbLgoQ 密码:deaf 链接:https://pan.baidu.co ...

  5. django框架预备知识

    内容: 1.web预备知识 2.django介绍 3.web框架的本质及分类 4.django安装与基本设置 1.web预备知识 HTTP协议:https://www.cnblogs.com/wyb6 ...

  6. 从最大似然函数 到 EM算法详解

    极大似然算法 本来打算把别人讲的好的博文放在上面的,但是感觉那个适合看着玩,我看过之后感觉懂了,然后实际应用就不会了.... MLP其实就是用来求模型参数的,核心就是“模型已知,求取参数”,模型的意思 ...

  7. django-媒体文件，图片存储

    1.settings.py # 媒体文件 MEDIA_ROOT = 'media/'

  8. RESTful转载，多看几遍就理解了写点自己的看法和理解

    要理解资源路由就要理解什么是RESTful.如果一个架构符合REST(即Representational State Transfer的缩写,意为表现层状态转化)原则,就称它为RESTful架构. R ...

  9. 25. instr用法

    很多时候,我们要进行字符串匹配,在SQL语句中,我们通常使用like来达到我们搜索的目标.但经过实际测试发现,like的效率与instr函数差别相当大.下面是一些测试结果: select instr( ...

  10. ABAP-语音输出

    REPORT ZRICO_SPEAK. include ole2incl. data:ole type ole2_object, voice type ole2_object. parameters: ...