当我在主 window 上按下暂停时，其他 window 上的倒数计时器更新

Question

我有一个 window 带有管理面板，我可以在其中调整时间暂停或停止倒计时，另一个 window 用户看到的是相同的计时器。当我从管理面板按暂停时间或调整时间 +- 我希望用户看到暂停或调整的时间。我该怎么做？我尝试使用 iframe 但它没有改变，我可以尝试每 1 秒自动重新加载一次，但我认为这不好。所以我想要的是从 window 操纵时间并在另一个 window 上显示该时间。有人可以帮我解决这个问题吗？

html

<div id="defaultCountdown"></div>
<button type="button" id="pauseButton">Pause</button>
<button type="button" id="toggleButton">Toggle</button>

js

<script>
$(function () {
    var austDay = new Date();
    austDay = new Date(austDay.getFullYear() + 1, 1 - 1, 26);
    $('#defaultCountdown').countdown({until: austDay});
    $('#year').text(austDay.getFullYear());
    $('#defaultCountdown').countdown({until: austDay, onTick: showPauseTime}); 

$('#pauseButton').click(function() { 
    var pause = $(this).text() === 'Pause'; 
    $(this).text(pause ? 'Resume' : 'Pause'); 
    $('#defaultCountdown').countdown(pause ? 'pause' : 'resume'); 
}); 

$('#toggleButton').click(function() { 
    $('#defaultCountdown').countdown('toggle'); 
}); 

function showPauseTime(periods) { 
    $('#showPauseTime').text(periods[4] + ':' + twoDigits(periods[5]) + 
        ':' + twoDigits(periods[6])); 
}
});
</script>

管理员window/tab

用户在另一个 window/tab 中看到的内容

@Abraar Arique 这是我延迟 2-3 秒的代码

<?php 
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
include_once('db.php');
$stmt=$dbh->prepare("Select * FROM Mesaje where Game=0 order by ID_Mesaj desc limit 1");
$stmt->execute();
if ($row=$stmt->fetch())
{   
$id_indiciu=$row['ID_Indiciu'];
    if ($row['ID_Indiciu']!=0)
    {
        $stmtt=$dbh->prepare("Select * FROM Indiciu where  ID_Indiciu=$id_indiciu");
        $stmtt->execute();
        if ($rowz=$stmtt->fetch())
            {   
        echo "data: ".$rowz['Indiciu']."\n\n "; 
            }
    }
    else
    {
    echo "data: ".$row['Mesaj']."\n\n "; 
    }
}
ob_flush();
flush();
?>

Answer 1

您必须将计时器信息（活动、暂停、结束）存储在服务器的某个位置，例如一个数据库。然后在端加载时读取它并用它创建一个计时器控件。看来您还想实时更新所有活动会话。为此，当管理员更改计时器时，您需要使用 websockets 或 longpolling 向所有会话广播。查看 http://signalr.net/ 了解实时网络应用程序。

Answer 2

您正在尝试创建实时 Web 应用程序。对于这些情况，让客户端每 1 秒左右查找一次变化的信息是非常低效的。更常见的做法是让服务器将更改通知客户端，以便客户端可以相应地更新页面。这种技术称为 服务器发送的事件 (SSE)。在这里，客户端-服务器套接字始终保持打开状态，并且可以来回传输数据。使用 Facebook 等聊天 Web 应用程序可以最好地描述这一点。在 Facebook 上，当用户登录时会创建一个套接字。如果有人向您发送消息，服务器端脚本会向客户端发送 message 事件，客户端会向您显示消息。

像这样使用服务器发送的事件需要服务器端脚本语言的应用知识：PHP、Ruby、Python、Node.js, ASP.NET有很多可供选择。您还需要使用适当的套接字，例如 Websockets。

您需要创建一个服务器端脚本来侦听计时器更改并将该信息发送到浏览器（客户端）。然后您可以使用 JavaScript 在服务器端脚本消息收到时更新信息。如果要保存数据，您可能还需要设计和实现某种数据库。

服务器发送事件的一个非常简单的示例：http://www.w3schools.com/html/html5_serversentevents.asp

希望这能回答您的问题。

当我在主 window 上按下暂停时，其他 window 上的倒数计时器更新

Countdown timer update on other window when i press pause on main window

javascript

jquery

html

countdown