Как синхронизировать отсчет времени JavaScript с временем сервера
Я строю сайт, который имеет время и цены, которые снижаются. Больше всего меня интересует синхронизация времени, чтобы он был максимально точным для всех клиентов.
В настоящее время я отправляю клиенту оставшееся количество миллисекунд, которое затем используется для подпитки таймера обратного отсчета, но из-за задержек при передаче и рендеринге это может быть отключено на несколько секунд даже с двумя браузерами на одном компьютере.
Есть ли способ синхронизировать клиентское время javascript и серверное время, или мне просто придется столкнуться с этим небольшим лагом?
Если бы только был способ точно измерить разницу во времени между сервером, отправляющим данные, и полученным и обработанным клиентом.
4 ответа
Несмотря на то, что время на сервере и клиенте будет разным, скорость изменения времени должна быть по существу одинаковой. Я отправил бы оставшееся время клиенту, позволил бы клиенту затем добавить это время к текущему времени, и затем клиент вычислил обратный отсчет. Например:
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;
Есть способ синхронизировать клиента со временем сервера. Я написал библиотеку, которая делает именно это: ServerDate.
Вот часть README:
Ты можешь использовать ServerDate как бы вы использовали Date функция или один из ее экземпляров, например:
> ServerDate()
"Mon Aug 13 2012 20:26:34 GMT-0300 (ART)"
> ServerDate.now()
1344900478753
> ServerDate.getMilliseconds()
22
Существует также новый метод для получения точности оценки ServerDate часов сервера (в миллисекундах):
> ServerDate.toLocaleString() + " ± " + ServerDate.getPrecision() + " ms"
"Tue Aug 14 01:01:49 2012 ± 108 ms"
Вы можете увидеть разницу между часами сервера и часами браузера в миллисекундах:
> ServerDate - new Date()
39
Вы можете измерить время, необходимое для полного обхода сервера, и разделить на два, чтобы получить точную оценку разницы во времени. Будьте осторожны: не гарантируется, что пакеты IP будут проходить по одному и тому же маршруту в обоих направлениях, но вероятность их использования достаточно высока.
Ты можешь использовать Date.getTime() если вам достаточно разрешения в миллисекундах.
Решением этого является Javascript - он может получить доступ к настройкам часового пояса на клиенте. К сожалению, он может получить только смещения часового пояса (указанные в минутах) на конкретные даты, без имени часового пояса. Таким образом, чтобы точно определить правильный часовой пояс, мы также должны знать, используется ли летнее время (DST) - это часть решения на стороне клиента:
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, "/"); } }
Вы сохраняете результаты в виде файлов cookie, к которым может получить доступ ваш PHP-скрипт. Вы должны включить приведенный выше код по крайней мере на первую страницу, к которой пользователь обращается - я включаю его на каждой странице, чтобы распознавать (и адаптироваться к) изменения, даже если такие изменения во время сеанса маловероятны.
В PHP вы можете извлечь действительный часовой пояс с помощью новой функции с именем timezone_name_from_abbr, доступной начиная с PHP 5.1.3 - она принимает аббревиатуру часового пояса или комбинацию смещения часового пояса (в секундах) и летнего времени, и у нас есть последняя комбинация:
$time_zone_name = timezone_name_from_abbr(", -$_COOKIE['time_zone_offset']*60, $_COOKIE['time_zone_dst']);
Это даст вам правильное имя часового пояса для пользователя, если данные в файлах cookie действительны - обратите внимание, что существует много "дублирующих" имен, например "Европа / Берлин" и "Европа / Цюрих", которые имеют точный те же настройки часового пояса (по крайней мере, на данный момент), и вы можете получить любой из них для соответствующего смещения и переменных DST. Список названий часовых поясов можно найти в списке поддерживаемых часовых поясов на php.net.
Создание строк даты с заданным часовым поясом С именем часового пояса пользователя вы можете теперь использовать PHP-классы DateTimeZone и DateTime, чтобы наконец создать строки даты с правильным часовым поясом:
// 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(‘Y-m-d H:i:s’);
Это оно!
Источник: http://togl.me/eE2