如何将客户端网页计时器与服务器同步-Java 学习之路

将网页上的时间与服务器同步的最佳方法是什么？

我的网页需要同时为所有用户开始倒计时，并在完全相同的时间结束，以防止任何一个用户有轻微的时间优势 .

我的问题类似于这个问题，但接受的答案有帮助，但没有完全回答我的担忧：how-to-sync-a-javascript-countdown-with-server-time

我在pageload之后使用Ajax来获取服务器时间，但我保证在15分钟内倒计时将在每个客户端完全相同的时间结束吗？

即使定时器准确地测量时间，由于忽略setInterval的毫秒数而导致客户端页面之间仍然存在不到1秒的差异 - 有没有办法克服这个问题？

3 回答

在现代浏览器中，您可以通过为JavaScript变量分配时间戳来实现此目的，并使用Performance object来计算确切的时间 .

例：

var tsp = new Date('Sun Feb 19 2012 17:55:14 GMT+0100 (CET)'); // "Timestamp"

window.onload = function() {
    var performance = window.performance || window.mozPerformance || window.msPerformance || window.webkitPerformance || {};
    tsp.setTime(tsp.getTime() + performance.timing.loadEventStart - performance.timing.navigationStart
    // after window.onload, you're sync with the server

    // Example of timer:
    setInterval(function() {
        tsp.setSeconds(tsp.getSeconds() + 1);
        document.title = tsp.toString();
    }, 1000); // 1000 ms = timer may be off by 500ms.
};

有关此对象的更多信息，请查看MDN's article .
提供了一个演示here .

回复于 2024-04-19T15:20:09+08:00

2
接受的答案是好的，并帮助激励我，因为我写了一个库来解决这个问题 . 通过查看自身的加载时间而不是整个页面（与上面的performance.timing一样），库可以产生更精确的答案，然后通过一系列10个XMLHttpRequests获得更好的精度 . 此外，解决您的第二个问题，我的库不会忽略毫秒（如接受的答案） .

该库名为ServerDate，可免费使用 .

这是自述文件的一部分：

您可以像使用 Date 函数或其中一个实例一样使用 ServerDate ，例如：
```
> ServerDate()
"Mon Aug 13 2012 20:26:34 GMT-0300 (ART)"

> ServerDate.now()
1344900478753

> ServerDate.getMilliseconds()
22
```
还有一种新方法可以获得ServerDate估计服务器时钟的精度（以毫秒为单位）：
```
> ServerDate.toLocaleString() + " ± " + ServerDate.getPrecision() + " ms"
"Tue Aug 14 01:01:49 2012 ± 108 ms"
```
您可以看到服务器的时钟和浏览器时钟之间的差异，以毫秒为单位：
```
> ServerDate - new Date()
39
```
回复于 2024-04-19T15:20:09+08:00
4

理想情况下，您的解决方案将涉及服务器发出提交表单同时向所有客户开放的信号 . 为此，如果排除旧版浏览器的用户没有问题，可以使用web sockets . 对于那些浏览器，还有使用长轮询的回退 .

我不确定websockets与PHP一起做得多好 .

我只和节点JS一起使用socket.io . 使用该解决方案，设置服务器端超时并在完成时同时通知所有客户端将是微不足道的 . 它会自动检测浏览器支持并选择最适合给定浏览器的方法 .

使用此解决方案，客户端将只允许在服务器告知它已准备好时提交 . 只要您提交的服务器执行验证，您就可以了 .

回复于 2024-04-19T15:20:09+08:00

如何将客户端网页计时器与服务器同步

3 回答

相关问题