Question

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

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

我的问题与此问题类似，但接受的答案有帮助，但并未完全回答我的疑虑：how-to-sync-a-javascript-countdown-with-server-time

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

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

Answer 1

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

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

这是自述文件的一部分：

您可以像使用ServerDate函数或其中一个函数一样使用Date 实例，例如：

> 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

Answer 2

在现代浏览器中，您可以通过为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。

Answer 3

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

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

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

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

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

3 个答案: