The Best Way to Synchronize Client-Side JavaScript Clock with Server Date

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

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

How to sync a javascript countdown with server time

Even though the time on the server and client is going to be different, the rate at which time changes should essentially be same. I would send the remaining time down to the client, let the client then add that time to the current time, and then have the client calculate the countdown from that. For example:

var timeRemaining = [rendered on page load or queried by ajax]; // in milliseconds
var endTime = new Date(new Date().getTime() + timeRemaining);

// Put this in a setInterval, or however you currently handle it
var countdown = (endTime.getTime() - new Date().getTime()) / 1000;

Synchronizing client-side and server-side times

You need to account for network latency. Data from your server won't reach you instantly. I suggest doing it using Cristian algorithm:

1. Client marks current client time (T1) and sends request to server.
2. Server sends it time (T2) to client.
3. Client receives server answer and marks its current time again (T3).
4. T3 - T1 is a total time request needed to go to the server and back (RTT). Now we can assume that going from server to client takes about half of that time. So, your "correct" time is T2 + (T3 - T1)/2

Read more about clock synchronization algorithms on wikipedia

Sync server and client time?

You can't reliably sync time in a browser.

If you just want to measure request time, you don't really need to care what time the server thinks it is. In the browser, just measure the time between initiating the request and when you get a response.

var start = Date.now();
$.get('/url', function() {  // or equivalent in whatever JS framework
    var latency = Date.now() - start; // in ms
});

Is it possible to change the JavaScript client side clock?

moment.js has a very powerful date api on top of javascript's Date object.

You could look for a plugin (or quite easily build your own) that takes into account some kind of custom 'timezone'. Thus shifting your date-related calculations to any value needed.

Clock on webpage using server and system time?

The way I've gone about this before is:

• Take the time from the server,
• Take the time from the client (immediately)
• Get an offset.
• When showing the clock, apply the offset to the current time on the client.

You only need to update this occasionally from the server.

The problem that you've got to sort out though is that in making a request to get the time from the server, there will be a lag before you can get the client time. You can probably minimize this by using an ajax request to get the server time and nothing else, thereby cutting overhead and network lag etc.

How to show real-time server date and time on Nodejs

You may simply use socket.io to do it.

On server side, create a websocket server, publish the date time every interval (depend on your requirement, seconds, minutes, ...)

io.on('connection', function (socket) {
  socket.emit('datetime', { datetime: new Date().getTime() });
});

On browser side, subscribe the websocket and received the date time from server.

var socket = io.connect('http://your-socket-io-server');
socket.on('datetime', function (data) {
  $("#clock").text(new Date(data));
});

---

Related Topics