使用Javascript在网页上显示另一台计算机的时间？

Question

我正在开发一个非常时间敏感的Web应用程序.给我的业务规则之一是应用程序的行为必须始终取决于Web服务器上的时间,无论客户端的时钟是什么时候.为了向用户说明这一点,我被要求在Web应用程序中显示服务器的时间.

为此,我写了以下Javascript代码:

clock = (function () {
var hours, minutes, seconds;

function setupClock(updateDisplayCallback) {
    getTimeAsync(getTimeCallback);

    function getTimeCallback(p_hours, p_minutes, p_seconds) {
        hours = p_hours;
        minutes = p_minutes;
        seconds = p_seconds;
        setInterval(incrementSecondsAndDisplay, 1000);
    }

    function incrementSecondsAndDisplay() {
        seconds++;
        if (seconds === 60) {
            seconds = 0;
            minutes++;
            if (minutes === 60) {
                minutes = 0;
                hours++;
                if (hours === 24) {
                    hours = 0;
                }
            }
        }
        updateDisplayCallback(hours, minutes, seconds);
    }
}

// a function that makes an AJAX call and invokes callback, passing hours, minutes, and seconds.
function getTimeAsync(callback) {
    $.ajax({
        type: "POST",
        url: "Default.aspx/GetLocalTime",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (response) {
            var date, serverHours, serverMinutes, serverSeconds;
            date = GetDateFromResponse(response);
            serverHours = date.getHours();
            serverMinutes = date.getMinutes();
            serverSeconds = date.getSeconds();
            callback(serverHours, serverMinutes, serverSeconds);
        }     
    })
}

return {
    setup: setupClock
};
})();

传入的函数updateDisplayCallback是一个在网页上显示日期的简单函数.

基本思想是Javascript进行异步调用以查找服务器的时间,将其存储在客户端上,然后每秒更新一次.

起初,这似乎有效,但随着时间的推移,显示的时间每分钟落后几秒钟.我让它一夜之间跑了,当我第二天早上来的时候,它已经停了一个多小时!这是完全不可接受的,因为Web应用程序可以一次打开几天.

如何修改此代码,以便Web浏览器能够持续准确地显示服务器的时间？

Answer 1

Javascript的setInterval不够准确,不允许你像这样保持时间.

我的解决方案是:

1. 定期获取服务器的时间(以毫秒为单位)(由于两个时钟几乎不会偏离那么多,因此不需要经常使用)
2. 以毫秒为单位获取客户端时间
3. 计算服务器和客户端(客户端 - 服务器)之间的时钟偏差
4. 通过获取客户端时间并添加时钟偏差,定期更新时钟显示

编辑:为了更准确,您可以测量服务器请求的往返时间,将其除以2并将该延迟计入时钟偏差.假设往返行程在其持续时间内是对称的,这将给出更准确的计算.

Answer 2

感谢您的回答。我对这两个答案都投了赞成票，因为它们包含有用的信息。但是，我没有使用任一答案中规定的确切答案。

我最终决定的有点不同。

我把我学到的东西写在我的个人网页上。

首先，我现在明白使用并setInterval(..., 1000)不足以长时间每秒完成一次某件事。然而，以更短的间隔“轮询”时间来寻找第二个更改对我来说似乎非常低效。

我认为跟踪服务器时间和客户端时间之间的“偏移”确实有意义。

我的最终解决方案是执行以下操作：

(1) 对服务器进行 AJAX 调用以获取时间。该函数还检查客户端时间并计算服务器时间和客户端时间之间的差异（以毫秒为单位）。由于网络延迟和其他因素，此初始获取可能会延迟几秒钟。就我的目的而言，这没问题。

(2) 执行tick函数。每次tick执行时，它都会检查自上次tick执行以来已经过去了多长时间。它将使用该时间来计算要传递给的参数，setTimeout以便时间显示大约每秒更新一次。

(3) 每次该tick函数计算要显示的时间时，都会使用客户端时间并加上步骤 (1) 中计算的差值。这样，我不依赖客户来正确设置时间，但我确实依赖客户来准确测量经过的时间。就我的目的而言，这没问题。最重要的是，无论如何setTimeout不准确或被其他进程（例如模式对话框）中断，显示的时间都应该始终准确。