📅 最后修改于: 2023-12-03 15:38:38.455000 🧑 作者: Mango
在 Web 开发中，我们经常需要向用户展示实时更新的数据，比如在线聊天数据、股票价格、实时天气等。本文将介绍如何在不刷新网页的情况下实时显示数据库中的值。
本文采用以下技术实现实时数据显示：
首先，我们需要建立一个数据库。假设我们要展示的数据是一个简单的计数器。我们需要建立一个名为 counter 的数据库，里面包含名为 value 的一个数值类型的字段。
CREATE DATABASE counter;
USE counter;
CREATE TABLE counter (value int);
INSERT INTO counter VALUES (0);
这个数据库只包含一个名为 counter 的表，里面只有一个名为 value 的字段，初始值为 0。
接下来，我们需要编写 PHP 代码来与数据库交互，并将数据实时返回给前端。
<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
$dbhost = "localhost";
$dbuser = "username";
$dbpass = "password";
$dbname = "counter";
$mysqli = new mysqli($dbhost, $dbuser, $dbpass, $dbname);
if ($mysqli->connect_error) {
die('Connect Error (' . $mysqli->connect_errno . ') ' . $mysqli->connect_error);
}
while (1) {
$result = $mysqli->query("SELECT * FROM counter");
$row = $result->fetch_assoc();
$value = $row['value'];
echo "data: $value\n\n";
ob_flush();
flush();
sleep(1);
}
这段代码采用长轮询方式，使用 SSE（Server-Sent Events）技术向前端推送数据。代码中的 while (1) 循环不断检测数据库变化，如果有变化则将最新的数值发送给前端。
最后，我们需要编写 jQuery 代码从 PHP 文件中接收数据，并实时更新页面。
$(document).ready(function() {
if(typeof(EventSource) !== "undefined") {
var source = new EventSource("counter.php");
source.onmessage = function(event) {
$("#counter").html(event.data);
};
} else {
$("#counter").html("Your browser does not support Server-sent events.");
}
});
这段代码中，我们先判断浏览器是否支持 SSE。如果支持，则使用 EventSource 对象从 PHP 文件中接收数据，并将数据实时更新到页面中。
最后，我们需要在页面中显示计数器。
<!DOCTYPE html>
<html>
<head>
<title>Real-time Counter</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<h1>Real-time Counter</h1>
<div id="counter"></div>
<script src="counter.js"></script>
</body>
</html>
这段代码中，我们将计数器放在一个 div 元素中，并在 body 元素关闭标签前引入 jQuery 和我们编写的 JavaScript 文件。
到这里，我们已经成功地实现了在不刷新网页的情况下实时显示数据库中的值。本文介绍的方法使用 PHP 和 jQuery 技术栈，但其他技术栈也可以实现类似的功能。