如何在用户查看页面时更新页面？

Question

我有一个包含特定值的数据库，例如 yes，因此如果管理员将该值更改为 no，如果有用户查看该页面，则元素将被更改。

因此，如果我在该页面中有此文本并且值为 yes，则文本将为：

<p id="change">Yes, This text will be changed if the DB value is changed.</p>

如果值为否，则文本将为：

<p id="change">No, This text will be changed if the DB value is changed.</p>

我正在使用 PHP 和 MYSQL，可以编写 SQL 语句以及 Ajax 请求。

我多次使用 Ajax，但内容已针对特定访问者或管理员进行更改，如果他执行了操作。

但我不知道改变另一个用户的内容，当那个 DB 值改变时。

Answer 1

您可以使用 AJAX 每 x 秒检查一次数据库并相应地更新结果。

使用 AJAX 向您网站的路径发送 GET 或 POST 请求，查询数据库后将返回 yes 或 no，结果您可以使用 JS 更新 p 元素的内容。

我建议使用 memcache 或类似的数据库缓存，因为每隔几秒直接查询一次数据库效率不高，并且如果同时连接多个客户端会降低服务器性能。

Ajax 请求前端 GET 请求

$.ajax({
        url: "/ajax/backendprocessor.php?id_of_value=1",
        type: "get",
        success: function (response) {
               //check the response and update the element            

        }
    });

对于 backendprocessor.php，从 $_GET 变量中获取 id_of_value，然后查询数据库/缓存服务器并返回 YES 或 NO

所以要每 15 秒运行一次代码，您可以在 jQuery 中执行此操作，

setInterval(getUpdate, 15000);

getUpdate 函数将包含 ajax 代码。

Answer 2

客户端，在你的情况下是浏览器，必须知道分贝值的变化。有两种方法

1. 客户端定期（可能每 X 秒）向服务器发送 ajax 请求以检查 DB 值，如果更改，则更新 UI。会有 X 秒的延迟。如果不经常更改db值，也可能会浪费资源。

   var getDbValue = function () {

   $.get("server.php", function(data, status){
       //update the UI
       setTimeout(getDbValue, 5000);
   });
   

   };

   setTimeout(getDbValue, 5000);

2. 基于 websocket 的 MQTT。客户端订阅消息队列主题，服务器将在有值更新时向该主题发布消息。客户将近乎实时地收到更新。

这是一个很大的话题，需要更多的服务器设置。还有像 AmazomMQ 这样的云消息队列服务。如果您了解这个概念，则很容易配置。

var client = new MQTTClient(options);

client.connect(options);
client.on('connected', function(){
    client.subscribe("your_topic");
  });
client.on('messageArrived', function(msg){
    //the message will contain the db value published from the server
    //update UI
});