当新插入数据库时​​以及用户看到时切换通知图标

Question

提前谢谢大家！

所以，我有一个运行我公司的内部系统管理数据。有时它修改的数据或我添加新数据，我需要在发生这种情况时通知用户。 我创建了一个通知系统，当用户点击钟形链接（有点像谷歌的通知铃）时，它会在模态窗口中显示数据库中的新内容。事情是这是一个静态链接，我想在我插入或修改数据库中的东西时切换颜色或其他图标，然后在用户看到它时切换回来。更改时可能会变为红色，用户看到时会变回白色。

首先，我必须提到我在数据库中有3个表;用户，列表和通知。通知表用于在数据更改或新数据添加到列表表时通知用户，这通过我创建的表单。

到目前为止，我的代码是这样的：

这是用户的代码：

<a href="#openModal"><i class="fa fa-bell" style="color:#fff;"></i></a>

请注意，索引页面（menu_a.php和menu_b.php）中有两个包含不同导航菜单的标题。这是因为有两种类型的用户帐户; “a”只能查看列表和某些内容，“b”（我）可以访问管理任务。

现在，在两个标题（menu_a.php和menu_b.php）中，他链接所有用户以查看新的内容：

<?php
$listnotif = "";
$sql = mysql_query("SELECT * FROM notificatios ORDER BY date DESC LIMIT 15");
$productCount = mysql_num_rows($sql);
if ($productCount > 0) {
while($row = mysql_fetch_array($sql)){
    $type = $row["type"];
    $description = $row["description"];
    $date = ucwords(strftime("%A %e/%m/%Y - %l:%M", strtotime($row["date"])));
    $listnotif .= "<tr><td><small>$date</small></td><td>$type</td><td>$description</td><tr>";
}
    } else {
    $listnotif = "<tr><td colspan='3'>There are no notifications</td></tr>";
    }
?>

<table>
<tr>
    <th>Date</th>
    <th>Type</th>
    <th>Description</th>
</tr>
<?php echo $listnotif; ?>
</table>

然后，通知的显示将进入名为“navigation_table.php”的文件中。通过调用“include_once（”notificaciones_table.php“）;”，从网站的每个页面打开一个模态窗口。那段代码是这样的：

<?php 
$delete = "";
if (isset($_GET['deleteid'])) {
    $delete .= 'You sure you want to delete this entry? <a href="notif_admin.php?yesdelete=' . $_GET['deleteid'] . '">&ensp;<b>Yes</b></a> - <a href="notif_admin.php"><b>No</b></a></div>';
}
if (isset($_GET['yesdelete'])) {
$id_to_delete = $_GET['yesdelete'];
$sql = mysql_query("DELETE FROM notifications WHERE id='$id_to_delete' LIMIT 1") or die (mysql_error());
}
?>
<?php
if (isset($_POST['type'])){
    $type = mysql_real_escape_string($_POST['type']);
    $description = mysql_real_escape_string($_POST['description']);

    $sql = mysql_query("INSERT INTO notifications (type,description,date) VALUES('$type','$description',now())") or die (mysql_error());
}
?>
<?php
$notification = "";
$sql = mysql_query("SELECT * FROM notifications ORDER BY date DESC");
$productCount = mysql_num_rows($sql);
if ($productCount > 0) {
while($row = mysql_fetch_array($sql)){
    $id = $row["id"];
    $type = $row["type"];
    $description = $row["description"];
    $date = ucwords(strftime("%A %e/%m/%Y - %l:%M", strtotime($row["date"])));
    $notification .= "<tr><td><a href='notif_admin.php?deleteid=$id'><span class='fa fa-trash-o'></span></a></td><td>$date</td><td>$type</td><td>$description</td></tr>";
}
} else {
$notification = "<tr><td>No stuff here</td></tr>";
}
?>

<table>
<tr>
    <th>delete</th>
    <th width="200">Date</th>
    <th>Type</th>
    <th>Description</th>
</tr>
<?php echo $notification; ?>
</table>
</div>

<form action="notif_admin.php" enctype="multipart/form-data" name="myForm" id="myForm" method="post">
<table>
<tr>
<td width="150">Type</td>
<td>
    <select name="type" id="type">
        <option selected="selected">Select</option>
        <option value="Addition">Additio</option>
        <option value="Removal">Removal</option>
        <option value="Modification">Modification</option>
        <option value="Correction">Correction</option>
        <option value="General">General</option>
    </select>
</td>
</tr>
<tr>
<td>Description</td>
<td><input name="description" id="description" type="text"></td>
</tr>
<tr>
<td>&nbsp;</td>
<td><input name="button" id="button" type="submit" value="Add Notification" class="boton"></td>
</tr>
</table>
</form>

然后，在名为“notif_admin.php”的页面中，我显示我创建的所有通知，以便我可以管理它们，以及一个表单，用于将新数据插入到notificatios表中。代码如下所示：

{{1}}

此图片可供更好的参考：

Answer 1

如果您想要实时通知，可以选择几种方式。

1. 您可以使用Server Sent Events。
2. 您可以使用前端的AJAX轮询您的服务器。

如果你正在使用JQuery，那就像这样。

setInterval(function() {
    $.get('/notification_url', function(res) {
        $('.fa-bell').css({'color': 'red'});
    });    
}, 1000);

这将每秒轮询服务器上的某个页面以检查更新。

您已经有了选择，但无论哪种方式，您都需要通过Javascript进行更新。

Answer 2

以前的答案是好的，但我认为最好增加ajax请求之间的间隔1秒是非常低的间隔并且会拥塞，可能会发生冲突..使请求间隔至少5秒

var interval = setInterval(function() {
    $.get('/get_xyz_status_color.php?anyparam=paramvalue', function(colorResponse) {
        $('.fa-bell').css({'color': colorResponse});
    });    
}, 1000);

如果你想更新很多状态，我建议你输出一个json，同时请求同一个请求的每个状态，以免引起过多的请求

所以我建议使用$ .getJSON而不是$ .get

var interval = setInterval(function() {
    $.getJSON(url,function(response){
        $('.stat1').css({'color': response.status1});
        $('.stat2').css({'color': response.status2});
        ...
    });
}, 1000);