Javascript 更新的PHP动态时钟收到新输入时发出信号_Javascript_Php

Javascript 更新的PHP动态时钟收到新输入时发出信号

javascript php

Javascript 更新的PHP动态时钟收到新输入时发出信号,javascript,php,Javascript,Php,我已经用PHP构建了一个基本的倒计时计时器，它将每秒（或者每分钟，我还没有决定每秒执行一次get调用是否会导致任何问题）将结果返回javascript显示在页面上因此，倒计时通过从用户获取输入并更新DB服务器端来工作。PHP然后获取该值，将其转换为时间格式，并使用它计算倒计时的结束时间我的问题是，当时间根据新的DB输入发生变化时，我希望计时器闪烁或类似的东西。。。例如，计时器将倒计时到2小时。另一个用户提交更新数据库的表单，因此现在距离结束时间只有5小时。我想以某种方式捕获此更改，以便在页面

我已经用PHP构建了一个基本的倒计时计时器，它将每秒（或者每分钟，我还没有决定每秒执行一次get调用是否会导致任何问题）将结果返回javascript显示在页面上

因此，倒计时通过从用户获取输入并更新DB服务器端来工作。PHP然后获取该值，将其转换为时间格式，并使用它计算倒计时的结束时间

我的问题是，当时间根据新的DB输入发生变化时，我希望计时器闪烁或类似的东西。。。例如，计时器将倒计时到2小时。另一个用户提交更新数据库的表单，因此现在距离结束时间只有5小时。我想以某种方式捕获此更改，以便在页面上显示消息

我绞尽脑汁想怎么做，但想不出一个方法

用于计算结束时间的基本PHP im

    <?php

    $timeUntil = 100; // placeholder, actual variable will be integer pulled from db
    $unixTime = 86400;
    $zTime = $timeUntil * $unixTime;
    $endDate = time() + zTime;
    $remaining = $endDate - time();
    $days_remaining = floor($remaining / 86400);
    $hours_remaining = floor(($remaining % 86400) / 3600);
    $minutes_remaining = floor((($remaining % 86400) % 3600) / 60);
    $seconds_remaining = floor((($remaining % 86400) % 3600) % 60);
    $zTimeCombined = array($days_remaining, $hours_remaining,     
    $minutes_remaining, $seconds_remaining);
    echo $zTimeCombined;
    ?>

我个人会为此使用WebSocket。执行太多AJAX请求是杀死服务器的最佳方法。您需要的是PHP端和JS端的WebSocket（无需lib）

在服务器onOpen上，您将发送当前计时器时间，如果时间更新，您将向每个客户端发送新消息

下面是一个小例子：

composer.json：

{
    "require": {
        "cboden/ratchet": "^0.3.3"
    },
    "autoload": {
        "psr-4": {
            "App\\": "App/"
        }
    }
}

socket.php：

<?php

require 'vendor/autoload.php';

use App\Chat;
use Ratchet\WebSocket\WsServer;
use Ratchet\Http\HttpServer;
use Ratchet\Server\IoServer;

$var = new Chat;
$var = new WsServer($var);
$var = new HttpServer($var);
$var = IoServer::factory($var, 8080);
$var->run();

为什么不更新数据库？当客户端请求还剩多少时间时，用timstamp响应。如果客户端的时间戳与服务器的时间戳不匹配，则执行闪存操作。因此，在初始get请求中包括当前用户时间，在PHP内将该值与它从DB生成的值进行比较，并将另一个字符串（true或false等）作为数组的一部分发送回JS进行计算？这是个不错的主意，我想我试试看。想把它贴在一个答案上吗？啊，你能不能帮我把它分解一下？我最近才转向服务器端编码，我对这两个都不熟悉？ratchet是PHP库，Websockets是JS库吗？
<?php

namespace App;

use Ratchet\MessageComponentInterface;
use SplObjectStorage;
use Ratchet\ConnectionInterface as Connection;
use Exception;

class Chat implements MessageComponentInterface
{
    public $clients;

    public function __construct()
    {
        $this->clients = new SplObjectStorage;
    }

    public function onOpen(Connection $conn)
    {
        $this->clients->attach($conn);
    }

    public function onMessage(Connection $from, $msg)
    {
        foreach ($this->clients as $key => $value) {
            if ($value != $from) {
                $value->send($msg);
            }
        }
    }

    public function onClose(Connection $conn)
    {
        $this->clients->detach($conn);
    }

    public function onError(Connection $conn, Exception $e)
    {
        echo 'error: ' . $e->getMessage() . "\n";

        $conn->close();
    }
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Chat</title>
</head>
<body>
    <div id="chat"></div>
    <input type="text" id="input">
    <input type="submit" id="submit">


    <script type="text/javascript">
        var socket = new WebSocket('ws://localhost:8080')

        socket.onmessage = function (msg) {
            addToChat(msg.data)
        }

        var input  = document.getElementById('input')
        var submit = document.getElementById('submit')

        submit.addEventListener('click', function (e) {
            e.preventDefault()

            if (input.value.length > 0) {
                addToChat(input.value)
                socket.send(input.value)
                input.value = ''
            }
        })

        function addToChat(msg) {
            document.getElementById('chat').innerHTML += '<p>' + msg + '</p>'
        }
    </script>
</body>
</html>