从另一个页面刷新页面

Question

我正在处理一个包含2个独立页面的项目：它们分别显示在不同的计算机上。我想每次在第一个页面上点击一个按钮时，就刷新第二个页面。您应该如何操作？

我已经尝试了每次点击按钮时，在数据库中存储一个数字（1）。在第二个页面上，如果该数字为1，则将其清除为0然后刷新。（PHP，jQuery）。

我认为使用AJAX可以解决此问题，但我不知道如何实现。

这是我的第二个页面（我想要刷新的页面）。

<script type="text/javascript">
    setInterval("my_function();",10000); 

    function my_function()
    {
        $('.refresh').load(location.href + ' .refresh');
    }
</script>

    <div class="refresh">
        <?php 
            require("database.php");    
            $db = Database::connect();

            $statement = $db->query("SELECT * from refresh");
            $item = $statement->fetch();

            if ($item["value"] =="1")
            {                                   
                $newval = "0";
                $statement = $db->prepare("UPDATE refresh SET value=?");
                $statement->execute(array($newval));
                Database::disconnect();
                header("location: page2.php");
            }
        ?>  
    </div>

- yanisla35

Answer 1

我认为最好的方法之一是使用实时数据库，它可以实时同步到每个连接的客户端，您的页面会自动接收最新数据的更新。

这样，您可以拥有两个独立的页面，在两个不同的选项卡（或计算机）中打开其中一个页面，然后在其中一个页面中更新一些数据，第二个页面将自动更新并受到影响。

个人而言，我喜欢Firebase实时数据库，并且每个平台都有良好的文档。

- Emad Dehnavi

---

非常感谢，我尝试了一些 Firebase 的例子，结果非常棒。我想我会将我的所有数据库迁移到 Firebase。目前，我正在努力理解无 SQL 构建，这并不容易。 - yanisla35

Answer 2

使用setInterval调用后端可能会非常耗费资源，而WebSockets则是为解决此类问题而设计的。您可以使用WebSockets以非常轻量级的方式实现所需功能。

实现此用例的一种方法是（适用于浏览器）：

var socket = io()

// Send refresh command
document.getElementByd('my-button').addEventListener('click', function () {
  socket.emit('refresh', '')
})

// Refresh when command comes
socket.on('refresh', function() {
  location.reload()
});

您还需要在后端设置SocketIO才能使所有内容正常工作。请查看：http://socketo.me/docs/http。

- Pratyush

---

谢谢您的回答，但是这个解决方案适用于两台不同的计算机吗？ - yanisla35

是的。所以每当你向套接字发送数据时，它会传递到后端，并从后端通知所有活动的浏览器会话。 - Pratyush