Comment synchroniser un compte à rebours javascript avec le temps du serveur [dupliquer]
cette question a déjà une réponse ici:
- la meilleure façon de synchroniser l'horloge javascript côté client avec la date du serveur 7 réponses
je construis un site qui a des heures et des prix qui se dégradent. Ce qui me préoccupe le plus, c'est de synchroniser le temps pour qu'il soit aussi aussi précis que possible pour tous les clients.
actuellement, j'envoie au client le nombre de millisecondes restant qui est ensuite utilisé pour alimenter le compte à rebours, mais en raison de retards de transfert et de rendu, cela peut être éteint de plusieurs secondes même avec 2 navigateurs sur le même ordinateur.
est-ce qu'il y a un moyen de synchroniser le temps javascript du client et le temps serveur, ou est-ce que je vais devoir gérer ce léger décalage?
si seulement il y avait un moyen de mesurer avec précision le décalage horaire entre le serveur qui envoie les données et celui qui les reçoit et les rend.
4 réponses
même si l'heure sur le serveur et le client va être différente, le rythme auquel les changements d'heure devraient être essentiellement les mêmes. Je voudrais envoyer le temps restant vers le bas au client, laisser le client puis ajouter ce temps à l'heure actuelle, et puis avoir le client calculer le compte à rebours à partir de cela. Par exemple:
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;
il y a un moyen de synchroniser un client avec l'heure du serveur. J'ai écrit une bibliothèque qui fait justement ceci: ServerDate .
Voici une partie du README:
vous pouvez utiliser ServerDate comme vous utiliseriez la fonction Date ou l'un de ses
exemples:
> ServerDate()
"Mon Aug 13 2012 20:26:34 GMT-0300 (ART)"
> ServerDate.now()
1344900478753
> ServerDate.getMilliseconds()
22
Il ya aussi une nouvelle méthode pour obtenir la précision de L'estimation de ServerDate de la l'horloge du serveur (en millisecondes):
> ServerDate.toLocaleString() + " ± " + ServerDate.getPrecision() + " ms"
"Tue Aug 14 01:01:49 2012 ± 108 ms"
vous pouvez voir la différence entre l'horloge du serveur et l'horloge du navigateur, en millisecondes:
> ServerDate - new Date()
39
vous pouvez mesurer le temps que prend le tour du serveur complet et diviser par deux pour obtenir une bonne estimation du décalage horaire. Attention: il n'est pas garanti que les paquets IP prennent la même route dans les deux sens, mais la propabilité est assez élevée.
vous pouvez utiliser Date.getTime() si la résolution en millisondes est suffisante pour vous.
la solution est Javascript – il peut accéder aux paramètres de fuseau horaire sur le client. Malheureusement, il ne peut vous obtenir des décalages de fuseau horaire (spécifiés en minutes) pour des dates spécifiques, aucun nom de fuseau horaire. Donc, pour déterminer le fuseau horaire correct, nous avons aussi besoin de savoir si l'heure d'été (HNR) est utilisée – c'est la partie de la solution côté client:
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, "/"); } }
vous enregistrez les résultats sous forme de cookies, qui peuvent être consultés par votre script PHP. Vous devriez inclure le code ci – dessus sur au moins la première page à laquelle un utilisateur accède-Je l'inclus sur chaque page pour reconnaître (et s'adapter) les changements, même si de tels changements au cours d'une session sont peu probables.
en PHP vous pouvez extraire un fuseau horaire valide avec une nouvelle fonction nommée timezone_name_from_abbr, disponible depuis PHP 5.1.3 – il faut soit une abréviation de fuseau horaire ou une combinaison de décalage de fuseau horaire (en secondes) et l'heure d'été, et nous avons cette dernière combinaison:
$time_zone_name = timezone_name_from_abbr(", -$_COOKIE['time_zone_offset']*60, $_COOKIE['time_zone_dst']);
cela vous donnera un nom de fuseau horaire correct pour l'utilisateur, si les données dans les cookies est valide – notez qu'il existe de nombreux" dupliquer "les noms, par exemple" Europe/Berlin "et" Europe/Zurich", qui ont les mêmes paramètres de fuseau horaire exacts (au moins pour l'instant), et vous pouvez obtenir l'un d'eux pour les variables offset et DST appropriées. La liste des noms de fuseaux horaires peut être trouvée dans la liste des fuseaux horaires supportés sur php.net.
Création de chaînes de date avec un fuseau horaire donné Avec le nom du fuseau horaire de l'utilisateur, vous pouvez maintenant utiliser les classes PHP DateTimeZone et DateTime pour créer des chaînes de date avec le fuseau horaire correct:
// 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’);
C'est ça!
Source: http://togl.me/eE2