我有一个这样工作的代码：它从数据库中获取实时信息并将其显示在表中，数据库中所做的每个更改都会立即显示在表中，现在我希望当添加到的每个新记录时数据库，显示在表格中后，会弹出声音通知数据库中已添加新记录。
fetch.php
<?php
error_reporting(0);
// make is suitable for SSE
header("Cache-Control: no-store");
header("Content-Type: text/event-stream");
// make connection with database
include("db_connection.php");
// lets continue to check data in database with loop
$p = '';
while(true){
// now fetch data from database
$result = $con->query("SELECT * FROM data");
$r = array();
if($result->num_rows > 0){
while($row = $result-> fetch_assoc()){
// get all data in json from
$r[] = $row;
}
}
$n = json_encode($r);
if(strcmp($p, $n) !== 0){
// here data will shown on change
echo "data:" . $n . "\n\n";
$p = $n;
}
// here data is shown each time
// but we need data when change
// mean when data add, update or delete then show only
// this will show data even the loading is not completed
ob_end_flush();
flush();
// sleep process for 1 sec
sleep(1);
// but still data will not show
}
?>
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Realtime Fetching From Normal Database</title>
<style>
.container{
max-width: 900px;
font-family: sans-serif;
margin: auto;
}
h1{
text-align: center;
margin-bottom: 30px;
}
table{
width: 100%;
border-spacing: 0px;
}
table th,
table td{
padding: 15px 0px;
border-bottom: 1px solid #cacaca;
text-align: left;
}
td:last-child{
width: 600px;
}
</style>
</head>
<body>
<!-- create table to show data -->
<div class="container">
<h1>Realtime fetching From Normal Database</h1>
<table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Message</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<!-- We will use SSE in JS to get event from server -->
<!-- for best performance in realtime fetching -->
<script>
var source = new EventSource("fetch.php");
source.onmessage = function (event) {
var arrayData = JSON.parse(event.data);
var dataContainer = document.querySelector('tbody')
dataContainer.innerHTML = ''
arrayData.forEach(e => {
dataContainer.innerHTML += `
<tr>
<td>${e.id}</td>
<td>${e.name}</td>
<td>${e.message}</td>
</tr>
`;
});
}
</script>
</body>
</html>
db_connection.php
<?php
$server = "localhost";
$user = "root";
$pass = "";
// create database first
$database = "yt_test";
$con = mysqli_connect($server, $user, $pass);
if(!$con){
echo 'Server not connected';
}
$db = mysqli_select_db($con, $database);
if(!$db){
echo 'Database not connected';
}
?>
您可以增强现有代码，以便在将新记录添加到数据库时使用带有声音的弹出通知。您可以通过编辑 index.html 文件中的 JavaScript 代码来完成此操作。
这是您的index.html 文件的最新版本。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Realtime Fetching From Normal Database</title>
<style>
.container{
max-width: 900px;
font-family: sans-serif;
margin: auto;
}
h1{
text-align: center;
margin-bottom: 30px;
}
table{
width: 100%;
border-spacing: 0px;
}
table th,
table td{
padding: 15px 0px;
border-bottom: 1px solid #cacaca;
text-align: left;
}
td:last-child{
width: 600px;
}
.notification-popup {
display: none;
position: fixed;
top: 20px;
right: 20px;
padding: 10px;
background-color: #4CAF50;
color: white;
border-radius: 5px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}
</style>
</head>
<body>
<!-- create table to show data -->
<div class="container">
<h1>Realtime fetching From Normal Database</h1>
<table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Message</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<!-- Notification Popup -->
<div class="notification-popup" id="notificationPopup">
New record added!
</div>
<!-- We will use SSE in JS to get event from server -->
<!-- for best performance in realtime fetching -->
<script>
var source = new EventSource("fetch.php");
source.onmessage = function (event) {
var arrayData = JSON.parse(event.data);
var dataContainer = document.querySelector('tbody');
dataContainer.innerHTML = '';
arrayData.forEach(e => {
dataContainer.innerHTML += `
<tr>
<td>${e.id}</td>
<td>${e.name}</td>
<td>${e.message}</td>
</tr>
`;
});
// Show notification popup when a new record is added
showNotificationPopup();
}
function showNotificationPopup() {
var notificationPopup = document.getElementById("notificationPopup");
notificationPopup.style.display = "block";
// Play a notification sound
var audio = new Audio('notification.mp3'); // Replace 'notification.mp3' with your audio file
audio.play();
// Hide the popup after 3 seconds
setTimeout(function () {
notificationPopup.style.display = "none";
}, 3000);
}
</script>
</body>
</html>
在此最新代码中：
我带来了一个通知弹出窗口，其样式具有更好的可见性。 showNotificationPopup 特性负责显示弹出窗口、赌博通知声音以及在 3 秒后隐藏弹出窗口（根据需要修改时间）。 您需要将“notification.Mp3”替换为通知声音文件的路径。 注意：确保提供了 notification.Mp3 记录，并且您的浏览器允许自动播放音频。