Question

我的任务是在某个固定时区（MSK或MSD - 取决于当前日期）的HTML页面上显示数字时钟（具有分钟精度）。我想避免依赖客户端系统时钟，因此需要与服务器进行一些同步。 HTTP服务器在每个响应中发送Date头，因此我们可以向我们站点的任何URL发送AJAX GET或HEAD请求以获取服务器日期，计算与客户端日期的差异，并在使用setTimeout（）更新时钟时使用它。还有其他问题：日光设置的时区切换，非常慢连接的延迟计算。

对这项任务的任何想法都是最简单的方法吗？我更愿意在没有服务器端编程的情况下解决它。

Answer 1

这两个Javascript函数应该可以解决这个问题。

var offset = 0;
function calcOffset() {
    var xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
    xmlhttp.open("GET", "http://stackoverflow.com/", false);
    xmlhttp.send();

    var dateStr = xmlhttp.getResponseHeader('Date');
    var serverTimeMillisGMT = Date.parse(new Date(Date.parse(dateStr)).toUTCString());
    var localMillisUTC = Date.parse(new Date().toUTCString());

    offset = serverTimeMillisGMT -  localMillisUTC;
}

function getServerTime() {
    var date = new Date();

    date.setTime(date.getTime() + offset);

    return date;
}

编辑：已删除“.replace（/ ^（。）[\ s \ S] /，”$ 1“）”。

calcOffset（）计算服务器时间的偏移量并补偿GMT / UTC。

getServerTime（）使用本地时区获取与服务器匹配的本地时间偏移量。

如果calcOffset（）花费时间执行，则可能会失去一些秒精度。也许可以考虑执行时间......

如果您担心当本地时间或服务器时间变为夏令时或从夏令时变为计算的偏移时，您可能会在每个时钟小时后重新计算一个litle，系统将补偿dayligt节省时间的变化。可能需要等到本地和服务器时钟都过了一小时。

该示例仅适用于IE，因为“Msxml2.XMLHTTP”我认为......

Answer 2

您可以在代码中使用NTP (Network Time Protocol)计算确切时间

我试着为你解释一下：

我们在发送请求时有ClientTime（例如2012年4月3日13：56：10.123）
您将ClientTime发送到服务器
我们有往返时间请求，我称之为 RequestTime （例如：需要5秒）
在服务器中，我们计算服务器和客户端之间的差异时间（例如：It ServerTime - ClientTime = ServerClientDifferenceTimeWithRequestTime），您现在应该在步骤3中包含往返请求时间，然后您应该从差异中删除往返时间< / LI>
服务器发送包含ServerClientDifferenceTimeWithRequestTime和ServerTime
我们有往返时间作为回应，我称之为 ResponseTime （例如：需要3秒）
在客户端，我们再次计算服务器和客户端之间的差异时间（例如：It ServerTime - ClientTime = ServerClientDifferenceTimeWithResponseTime），再次：您现在应该包括步骤6中的往返响应时间这个差异
我们现在有时间在客户
您应该在客户端计算简单的方程式：

X（SyncedTime） = Now + (ServerClientDifferenceTimeWithRequestTime - RquestTime)

X（SyncedTime） = Now + (ServerClientDifferenceTimeWithResponseTime - ResponseTime)

Now - ClientTime = RquestTime + ResponseTime =＆gt;

Now - (ServerClientDiffRq - RquestTime) = Now - (ServerClientDiffRs - ResponseTime)

如果你解决了，你发现了这个：

ResponseTime = (ServerClientDifferenceTimeWithRequestTime - Now + ClientTime + - ServerClientDifferenceTimeWithResponseTime )/2

然后您可以使用以下公式在客户端中找到同步时间或服务器时间：

X（SyncedTime） = Now + (ServerClientDifferenceTimeWithResponseTime - ResponseTime)

我显示简单的代码，但是当你想要写它时，不要忘记使用UTC日期＆amp;时间函数......

服务器端（例如php，c＃）：

<强> PHP：

header('Content-Type: application/json; charset=utf-8');
$clientTime = $_GET["ct"] * 1; //for php 5.2.1 or up: (float)$_GET["ct"];
$serverTimestamp = round(microtime(true)*1000); // (new DateTime())->getTimestamp();
$serverClientRequestDiffTime = $serverTimestamp - $clientTime;
echo "{\"diff\":$serverClientRequestDiffTime,\"serverTimestamp\":$serverTimestamp}";

<强> C＃：

long clientTime = long.Parse(Request.Form["ct"]);
long serverTimestamp = (DateTime.Now.Ticks-(new DateTime(1970,1,1) - DateTime.MinValue).Ticks) / 10000;
long serverClientRequestDiffTime = serverTimestamp - clientTime;
Response.Write("{\"diff\":"+serverClientRequestDiffTime+",\"serverTimestamp\":"+serverTimestamp+"}");

客户端（带Jquery的Javascript）：

var clientTimestamp = (new Date()).valueOf();
$.getJSON('http://yourhost.com/getdatetimejson/?ct='+clientTimestamp, function( data ) {
    var nowTimeStamp = (new Date()).valueOf();
    var serverClientRequestDiffTime = data.diff;
    var serverTimestamp = data.serverTimestamp;
    var serverClientResponseDiffTime = nowTimeStamp - serverTimestamp;
    var responseTime = (serverClientRequestDiffTime - nowTimeStamp + clientTimestamp - serverClientResponseDiffTime )/2

    var syncedServerTime = new Date((new Date()).valueOf() + (serverClientResponseDiffTime - responseTime));
    alert(syncedServerTime);
});

Answer 3

我发现上面的@mehdi-yeganeh算法没有给我有用的结果但是这个想法是合理的：使用NTP算法（或者至少是它的弱版本）来同步服务器和客户端时钟。

这是我的最终实现，它使用服务器响应标头（如果可用的话）以获得额外的准确性（如果我错了，请纠正我，我自己的测试说这很准确）。

浏览器端（javascript）：

// the NTP algorithm
// t0 is the client's timestamp of the request packet transmission,
// t1 is the server's timestamp of the request packet reception,
// t2 is the server's timestamp of the response packet transmission and
// t3 is the client's timestamp of the response packet reception.
function ntp(t0, t1, t2, t3) {
    return {
        roundtripdelay: (t3 - t0) - (t2 - t1),
        offset: ((t1 - t0) + (t2 - t3)) / 2
    };
}

// calculate the difference in seconds between the client and server clocks, use
// the NTP algorithm, see: http://en.wikipedia.org/wiki/Network_Time_Protocol#Clock_synchronization_algorithm
var t0 = (new Date()).valueOf();

$.ajax({
    url: '/ntp',
    success: function(servertime, text, resp) {
        // NOTE: t2 isn't entirely accurate because we're assuming that the server spends 0ms on processing.
        // (t1 isn't accurate either, as there's bound to have been some processing before that, but we can't avoid that)
        var t1 = servertime,
            t2 = servertime,
            t3 = (new Date()).valueOf();

        // we can get a more accurate version of t2 if the server's response
        // contains a Date header, which it generally will.
        // EDIT: as @Ariel rightly notes, the HTTP Date header only has 
        // second resolution, thus using it will actually make the calculated
        // result worse. For higher accuracy, one would thus have to 
        // return an extra header with a higher-resolution time. This 
        // could be done with nginx for example:
        // http://nginx.org/en/docs/http/ngx_http_core_module.html
        // var date = resp.getResponseHeader("Date");
        // if (date) {
        //     t2 = (new Date(date)).valueOf();
        // }

        var c = ntp(t0, t1, t2, t3);

        // log the calculated value rtt and time driff so we can manually verify if they make sense
        console.log("NTP delay:", c.roundtripdelay, "NTP offset:", c.offset, "corrected: ", (new Date(t3 + c.offset)));
    }
});

服务器端（php，但可以是任何东西）：

您在“GET / ntp”路线的服务器应返回类似：

的内容

echo (string) round(microtime(true) * 1000);

如果您有PHP＆gt; 5.4，那么您可以保存对microtime（）的调用并使其更准确：

echo (string) round($_SERVER['REQUEST_TIME_FLOAT'] * 1000);

注意

这种方式可能被视为一种贫民窟，还有一些其他Stack Overflow答案可以指导您找到更好的解决方案：

How to sync a javascript countdown with server time
Sync JS time between multiple devices
值得注意的是，此解决方案已提供过几次：https://github.com/NodeGuy/ServerDate。似乎这需要更多的工作来设置，但应该提供更好的准确性。

Answer 4

如果要使用ajax，你应该记住readyState == 2和readyState == 3之间的客户端时间，因为服务器时间将设置在收到请求和准备响应之间的某个时间

Answer 5

如果您只需要精确到分钟，我每隔30秒左右才会从服务器请求更新。不要完全依赖客户端时间，而是使用系统时钟在更新之间保持时钟准确。我想你回答了自己的问题？

如果我们更好地理解你真正想要做的事情，那将会有所帮助。

如果您只是想要一个时钟在服务器上显示时间，然后将其调整到某个时区，请在客户端使用偏移量。通过使用从服务器收到的日期来处理适用的时区中的DST。如果要确定延迟，可能需要在服务器上使用一个小脚本来计算差异。但如上所述，有助于更好地理解问题。如果精度仅为分钟，则延迟似乎不太重要。

Answer 6

感谢@Mehdi Yeganeh和@Fedearne。我实现我的功能以使用逻辑和它的工作。

https://gist.github.com/ethaizone/6abb1d437dbe406fbed6

Answer 7

为时已晚，但希望对您有所帮助！

我有类似的要求，无论客户端使用哪种计算机，都必须显示服务器时钟。因此，基本上，您只需要在此处使用三个参数即可：

x = clientReqTimestamp = (new Date()).valueOf();  //Client Timestamp at request.
y = serverTimestamp;  //query your server for Unix Timestamp.
z = clientRespTimestamp = (new Date()).valueOf();  //Client Timestamp on receiving response.

然后进行以下计算：

var reqElapsed = Math.abs(y - x);  //time taken in milliseconds to hit the server
var respElapsed = Math.abs(z - y);  //time taken in milliseconds to get response from server
var serverNewTime = z + respElapsed;  // Voila! actual server time.

下面是运行中的完整代码：

<script>
       
    var clientTimestamp = (new Date()).valueOf();
    
    var Data = {
        OperatorMobileNo: 'XXXXXXXXXX',
        requestClientTime: clientTimestamp
    };
    $.ajax({
        type: "POST",
        url: serviceURLx + "/XXXX/GetServerDateTime/1.0",
        dataType: "JSON",
        data: JSON.stringify(Data),
        contentType: "application/json; charset=utf-8",
        success: function (responseData) {
            debugger;
            var responseJSON = JSON.parse(JSON.stringify(responseData));
            if (responseJSON.ResponseCode === "000") {
    
                var x = clientReqTimestamp = clientTimestamp;
                    // If server time is in seconds => multiply by 1000 to convert sec to milli
                var y = serverTimestamp = responseJSON.Response.ServTimestamp * 1000;
                var z = clientRespTimestamp = (new Date()).valueOf();
                
                var reqElapsed = Math.abs(y - x);
                var respElapsed = Math.abs(z - y);

                var serverNewTime = z + respElapsed;
                
                debugger;
                //Init Server Clock
                setInterval( function() {
                    debugger;
                    var servClockT = new Date(serverNewTime += 1000);
                    document.getElementById('serverClock').innerHTML = servClockT;
                }, 1000);
            }
            else {
                swal("", "Unable To Fetch Server Time!", "info");
                console.log(responseJSON.ResponseCode);
            }
        },
        error: function () {
        }
    });
</script>

Answer 8

如果我正确理解问题，我们只有3个值

clientTimeWhenRequestSent
serverTime
clientTimeWhenResponseReceived

如果假设请求和响应时间相等，我们可以计算服务器和客户端之间的timeDifference通过：

const diff = serverTime - clientTimeWhenRequestSent 
- (clientTimeWhenResponseReceived - clientTimeWhenRequestSent)/2;

并在

的帮助下获得正确的服务时间

const correctClienTime =  (new Date()).valueOf() + diff;

Answer 9

我会在初始化期间将时间与Internet时间服务器同步。

http://tf.nist.gov/service/its.htm

将客户端javascript时钟与服务器日期同步的最佳方法

9 个答案:

浏览器端（javascript）：

服务器端（php，但可以是任何东西）：

注意