The best way to synchronize client-side javascript clock with server date

Question

I have a task to show digital clock (with minutes precision) on HTML page in some fixed timezone (MSK or MSD - depending on current date). I'd like to avoid relying on client system clock, so some synchronization with server is required. HTTP server sends Date header in each response so we can send an AJAX GET or HEAD request to any URL of our site to get server date, calculate the difference with client date and use it when updating clock with setTimeout(). There are other issues remains: timezone switching for daylight settings, latency accounting for very slow connections.

Any idea to this task the simpliest way? I'd prefer to solve it without server-side programming.

Answer 1

The key to synchronizing the server time with the client time is to use the Network Time Protocol (NTP) method. Here's a step-by-step breakdown of this process:

1. Obtain the client time upon sending the request (e.g., 4/3/2012 13:56:10.123).

2. Send this client time to the server.

3. Measure the round-trip time for the request (which we'll call RequestTime). For instance, it might take 5 seconds.

4. On the server, calculate the time difference between the server and client (ServerTime - ClientTime). This difference (ServerClientDifferenceTimeWithRequestTime) includes the round-trip request time (RequestTime), which should be subtracted from the difference.

5. The server sends a response that includes ServerClientDifferenceTimeWithRequestTime and ServerTime.

6. Measure the round-trip time for the response (which we'll call ResponseTime). For instance, it might take 3 seconds.

7. Back on the client, calculate the time difference between the server and client again (ServerTime - ClientTime). As before, this difference (ServerClientDifferenceTimeWithResponseTime) includes the round-trip response time (ResponseTime).

8. At this point, you should have the current client time (Now).

To determine the synchronized time (SyncedTime), you can use the following formulas:

SyncedTime = Now + (ServerClientDifferenceTimeWithRequestTime - RequestTime)
SyncedTime = Now + (ServerClientDifferenceTimeWithResponseTime - ResponseTime)

These equations can be simplified to:

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

Finally, you can find the synchronized time or server time on the client using the following equation:

SyncedTime = Now + (ServerClientDifferenceTimeWithResponseTime - ResponseTime)

Keep in mind that when implementing this, you should use UTC date & time functions to avoid any time zone discrepancies.

PHP (Server-side):

Here's an example using PHP. I've added comments to help explain each step.

<?php
function getServerTimeDifference() {
    // Set Content-Type
    header('Content-Type: application/json; charset=utf-8');

    // Retrieve the client time from GET parameter and cast it to a number
    $clientTime = $_GET["ct"] * 1; 

    // Get the server timestamp in milliseconds
    $serverTimestamp = round(microtime(true) * 1000); 

    // Calculate the difference between server and client time
    $serverClientRequestDiffTime = $serverTimestamp - $clientTime;

    // Return the time difference and server timestamp as a JSON object
    return json_encode(array("diff" => $serverClientRequestDiffTime, "serverTimestamp" => $serverTimestamp));
}

echo getServerTimeDifference();
?>

C# (Server-side):

Here's a similar encapsulation in C#, including comments:

public string GetServerTimeDifference()
{
    // Parse client time from the HTTP request
    long clientTime = long.Parse(Request.Form["ct"]);

    // Get server timestamp in milliseconds
    long serverTimestamp = (DateTime.Now.Ticks - (new DateTime(1970,1,1) - DateTime.MinValue).Ticks) / 10000;

    // Calculate the difference between server and client time
    long serverClientRequestDiffTime = serverTimestamp - clientTime;

    // Create a response object
    var response = new {
        diff = serverClientRequestDiffTime,
        serverTimestamp = serverTimestamp
    };

    // Return the response as a JSON string
    return Newtonsoft.Json.JsonConvert.SerializeObject(response);
}

Response.Write(GetServerTimeDifference());

Python (Server-side):

For the server-side, you can use Flask, a lightweight web server framework for Python. It's simple and easy to use for basic web server tasks.

from flask import Flask, request, jsonify
from time import time

app = Flask(__name__)

@app.route('/getdatetimejson', methods=['GET'])
def get_time():
    # Get client time from the GET parameter
    client_time = float(request.args.get('ct'))

    # Get server timestamp in milliseconds
    server_timestamp = time() * 1000

    # Calculate the difference between server and client time
    server_client_request_diff_time = server_timestamp - client_time

    # Return the time difference and server timestamp as a JSON object
    return jsonify(diff=server_client_request_diff_time, serverTimestamp=server_timestamp)

JavaScript with Jquery (Client-side):

The client-side JavaScript code can be encapsulated in a function and I've added some comments to provide clarity on what's happening at each step:

function getSyncedServerTime() {
    // Get current timestamp in milliseconds
    var clientTimestamp = new Date().getTime();

    $.getJSON('http://yourhost.com/getdatetimejson/?ct='+clientTimestamp, function(data) {
        // Get current timestamp in milliseconds
        var nowTimeStamp = new Date().getTime();

        // Parse server-client difference time and server timestamp from response
        var serverClientRequestDiffTime = data.diff;
        var serverTimestamp = data.serverTimestamp;

        // Calculate server-client difference time on response and response time
        var serverClientResponseDiffTime = nowTimeStamp - serverTimestamp;
        var responseTime = (serverClientRequestDiffTime - nowTimeStamp + clientTimestamp - serverClientResponseDiffTime ) / 2

        // Calculate the synced server time
        var syncedServerTime = new Date(nowTimeStamp + (serverClientResponseDiffTime - responseTime));
    
        // You may want to do something with syncedServerTime here. For this example, we'll just alert.
        alert(syncedServerTime);
    });
}

getSyncedServerTime();

TypeScript (Client-side):

Here's an example using TypeScript and the Axios library to make the HTTP GET request. Note that the code is quite similar to the JavaScript version, but includes types for better code understanding and error checking.

import axios from 'axios';

async function getSyncedServerTime(): Promise<Date> {
    // Get current timestamp in milliseconds
    const clientTimestamp: number = new Date().getTime();

    try {
        const response = await axios.get('http://yourhost.com/getdatetimejson/', {
            params: {
                ct: clientTimestamp
            }
        });

        // Parse server-client difference time and server timestamp from response
        const serverClientRequestDiffTime: number = response.data.diff;
        const serverTimestamp: number = response.data.serverTimestamp;

        // Get current timestamp in milliseconds
        const nowTimeStamp: number = new Date().getTime();

        // Calculate server-client difference time on response and response time
        const serverClientResponseDiffTime: number = nowTimeStamp - serverTimestamp;
        const responseTime: number = (serverClientRequestDiffTime - nowTimeStamp + clientTimestamp - serverClientResponseDiffTime ) / 2;

        // Calculate the synced server time
        const syncedServerTime: Date = new Date(nowTimeStamp + (serverClientResponseDiffTime - responseTime));

        return syncedServerTime;
    } catch (error) {
        console.error(error);
        return null;
    }
}

getSyncedServerTime().then(syncedServerTime => {
    console.log(syncedServerTime);
});

Extra Information:

There are indeed other ways to achieve the task, depending on the constraints of the task and the tools at your disposal. Here are some other methods:

1. Use a dedicated time service API: There are web services such as WorldTimeAPI, TimeAPI, or Google's Time Zone API that can provide the time for any given timezone. This is a robust solution as it is not reliant on the client's clock and can also handle daylight saving changes.

2. Websockets/Socket.io: For a real-time application where the time needs to be updated every second, you could consider using a real-time websocket connection to keep the clock updated. This would negate the need for handling the network latency of each request, as the server would keep pushing the updated time to the client at regular intervals.

3. Moment.js or Luxon: These libraries provide rich capabilities to manipulate dates and times and handle different timezones. Moment.js is widely used but has been considered a legacy project by its developers. Luxon was developed by the same team to address some of the shortcomings of Moment.js. Note, however, that using these libraries alone will not solve the client-side time manipulation issue unless they are used in conjunction with server-side time information.

4. Use the JavaScript Intl Object: The built-in Intl object in JavaScript has methods for DateTimeFormat that can handle time zone conversions. However, this would still rely on the client's system time being accurate.

Here's an example of how to use the Intl object:

let date = new Date();
let options = {
    timeZone: 'Europe/Moscow',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit'
};
console.log(new Intl.DateTimeFormat([], options).format(date));

When you rely on a client-side solution only, you may run into inaccuracies due to the client's local time setting. A solution using a combination of server-side time provision and client-side library for handling timezone conversions might be the most accurate and reliable.

Answer 2

If I understand question correctly we have only 3 values

1. clientTimeWhenRequestSent
2. serverTime
3. clientTimeWhenResponseReceived

if assume request and response time are equal we can calculate timeDifference between server and client by:

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

and get correct time on client with help of

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

Answer 3

Little too late but hope this might help someone!

I had a similar requirement to display a server clock irrespective of client's machine. So basically, you just play with three parameters here:

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.

Then do the below calculation:

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.

Below is the full code in action:

<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 4

I've found that the algorithm of @mehdi-yeganeh above didn't give me useful results but the idea is sound: to use the NTP algorithm (or at least a weak version of it) to synchronize the server and client clocks.

This is my final implementation, it uses the server response headers if available for extra accuracy (please correct me if I'm wrong, my own tests say this is quite accurate).

browser-side (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)));
    }
});

server-side (php, but could be anything):

Your server at route 'GET /ntp' should return something like:

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

If you have PHP >5.4, then you can save a call to microtime() and make it a bit more accurate with:

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

NOTE

This way might be seen as kind of ghetto, there are some other Stack Overflow answers that could guide you towards a better solution:

• How to sync a javascript countdown with server time
• Sync JS time between multiple devices
• Notably, this solution has been offered a few times: https://github.com/NodeGuy/ServerDate. It seems like this is a tad bit more work to setup but should provide better accuracy.

Answer 5

These two Javascript functions should do the trick for you.

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;
}

EDIT: removed ".replace(/^(.)[\s\S]/,"$1")".

calcOffset() calculates the offset from server time and compensates for GMT/UTC.

getServerTime() to get the local time offset to match the servers, using the local timezone.

If calcOffset() takes along time to execute you might loose some seconds precision. Maybe the execution time could be taken into account....

If you are worried about the calculated offset becoming wrong when either local time or server time change to or from daylight savings time you could recalculate a litle after every clock-hour, the system will compensate for changes in dayligt savings time. It might be necessary to wait until both the local and server clock has passed the hour.

The example only works in IE because of "Msxml2.XMLHTTP" i think.....

Answer 6

you should remember client time between readyState==2 and readyState==3 if you are going to use ajax, because server time will be set somewhere between time on request recieved and response prepared

Answer 7

I would sync the time during initialization with Internet Time Server.

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

Answer 8

I'd only request the update from the server every 30s or so, if you require precision only to the minute. Don't rely on the client time at all, but use their system clock to keep the clock accurate between updates. I think you answered your own question?

It would help if we better understood what you're actually trying to do.

If you simply want a clock to display the time on the server, which is then adjusted to a certain timezone, do it clientside with offsets. Handle DST in the timezones it is applicable by using the date you receive from the server as well. If you want to determine latency, you would probably need a small script on the server to calculated the difference. But as above, it would help to understand the problem better. If precision is only to the minute, latency seems less critical.