How to synchronize javascript countdown with server time

Question

I am creating a website that has time and prices that are ticking. What excites me the most is synchronizing the time so that it is as accurate as possible for all clients.

I am currently sending the client the number of remaining milliseconds, which is then used to set the countdown timer, but due to transmission and rendering delays this can be turned off for a few seconds even when using two browsers on the same computer.

Is there a way to synchronize client javascript time and server time, or will I just have to deal with this slight lag?

If only there was a way to accurately measure the time difference between the server sending the data, and it was received and displayed by the client.

Answer 1

Despite the fact that the time on the server and client will be different, the rate of change of time should be the same. I sent the remaining time to the client, let the client add this time to the current time, and then ask the client to calculate the countdown from this. 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; 

Answer 2

There is a way to synchronize javascript client time and server time data. I wrote a library that does just that: ServerDate .

Here is the README part:

You can use ServerDate since you would use the Date function or one of its instances, for example:

 > ServerDate() "Mon Aug 13 2012 20:26:34 GMT-0300 (ART)" > ServerDate.now() 1344900478753 > ServerDate.getMilliseconds() 22 

There is also a new method for obtaining ServerDate estimation accuracy for (in milliseconds):

 > ServerDate.toLocaleString() + " ± " + ServerDate.getPrecision() + " ms" "Tue Aug 14 01:01:49 2012 ± 108 ms" 

You can see the difference between the server clock and the browser clock in milliseconds:

 > ServerDate - new Date() 39 

Answer 3

You can measure the time during which the entire server round moves, and divide by two to get a good estimate of the time difference. Be careful: this does not guarantee that IP packets use the same route in both directions, but the permeability is quite high.

You can use Date.getTime() if the resolution for milliseconds is enough for you.

Answer 4

The solution to this is Javascript - it can access the time zone settings on the client. Unfortunately, it can only get time zone offsets (indicated in minutes) for specific dates, without a time zone name. To accurately determine the time zone, we also need to know whether daylight saving time (DST) is used - this is part of the client part of the solution:

 var now = new Date(); var later = new Date(); // Set time for how long the cookie should be saved later.setTime(now.getTime() + 365 * 24 * 60 * 60 * 1000); // Set cookie for the time zone offset in minutes setCookie("time_zone_offset", now.getTimezoneOffset(), later, "/"); // Create two new dates var d1 = new Date(); var d2 = new Date(); // Date one is set to January 1st of this year // Guaranteed not to be in DST for northern hemisphere, // and guaranteed to be in DST for southern hemisphere // (If DST exists on client PC) d1.setDate(1); d1.setMonth(1); // Date two is set to July 1st of this year // Guaranteed to be in DST for northern hemisphere, // and guaranteed not to be in DST for southern hemisphere // (If DST exists on client PC) d2.setDate(1); d2.setMonth(7); // If time zone offsets match, no DST exists for this time zone if(parseInt(d1.getTimezoneOffset())==parseInt(d2.getTimezoneOffset())) { setCookie("time_zone_dst", "0", later, "/"); } // DST exists for this time zone – check if it is currently active else { // Find out if we are on northern or southern hemisphere // Hemisphere is positive for northern, and negative for southern var hemisphere = parseInt(d1.getTimezoneOffset())-parseInt(d2.getTimezoneOffset()); // Current date is still before or after DST, not containing DST if((hemisphere>0 && parseInt(d1.getTimezoneOffset())==parseInt(now.getTimezoneOffset())) || (hemisphere<0 && parseInt(d2.getTimezoneOffset())==parseInt(now.getTimezoneOffset()))) { setCookie("time_zone_dst", "0", later, "/"); } // DST is active right now with the current date else { setCookie("time_zone_dst", "1", later, "/"); } } 

You save the results as cookies, which can be accessed through a PHP script. You must include the above code at least on the first page that the user accesses - I include it on each page to recognize (and adapt) the changes, even if such changes during the session are unlikely.

In PHP, you can retrieve a valid time zone using a new function called timezone_name_from_abbr, available with PHP 5.1.3, or it accepts the abbreviation of the time zone or a combination of the time zone offset (in seconds) and daylight saving time, and we have the last combination:

 $time_zone_name = timezone_name_from_abbr(", -$_COOKIE['time_zone_offset']*60, $_COOKIE['time_zone_dst']); 

This will give you the correct time zone name for the user, if the data in the cookies is valid - note that there are many “duplicate” names, such as “Europe / Berlin” and “Europe / Zurich”, which have exactly the same time zone settings ( at least for now), and you can get either one of them for the corresponding offset and DST values. A list of time zone names can be found in the list of supported time zones on php.net.

Creating Date Strings with a Specified Time Zone With the name of a custom time zone, you can now use the PHP classes DateTimeZone and DateTime to finally create date strings with the correct time zone:

 // Create time zone class $time_zone_class = new DateTimeZone($time_zone_name); // Create new date class with a given date // Notice that the provided date will be regarded as being in the // default time zone and converted accordingly $new_date = new DateTime('2007-02-14 15:30:00′, $time_zone_class); // Print date with the user's time zone echo $new_date->format('Ymd H:i:s'); 

Here it is!

Source: http://togl.me/eE2