通过html5 的EventSource来进行数据推送

最新推荐文章于 2025-06-16 18:12:14 发布

转载最新推荐文章于 2025-06-16 18:12:14 发布 · 187 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/jkko123/p/6294570.html

文章标签：

#php #javascript #ViewUI

本文介绍如何使用 HTML5 的 EventSource 实现服务器推送技术，让客户端能够实时获取到服务器端的数据更新。通过两个示例展示了基本的实现过程，包括 JavaScript 和 PHP 代码。

以往我们要获取服务器的数据更新，一般通过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文件获取数据。