La meilleure façon de synchroniser javascript côté client de l'horloge avec un serveur de date

J'ai une tâche pour afficher l'horloge numérique (avec les minutes de précision) sur la page HTML dans certains fuseau horaire fixe (MSK ou MSD - en fonction de la date actuelle). J'aimerais éviter de compter sur le système client de l'horloge, de sorte que certains de la synchronisation avec le serveur est nécessaire. L'adresse HTTP du serveur envoie la Date d'en-tête dans chaque réponse afin que nous puissions envoyer une requête AJAX requête GET ou HEAD à n'importe quelle URL de notre site pour obtenir de serveur de date, de calculer la différence avec le client de la date et de l'utiliser lors de la mise à jour de l'horloge avec setTimeout().
Il y a d'autres questions reste: le fuseau horaire de commutation de la lumière du jour les paramètres, le temps de latence de la comptabilité pour les connexions lentes.

Toute idée de cette tâche la plus simple de la sorte? Je préfère le résoudre sans programmation côté serveur.

InformationsquelleAutor n0s | 2009-10-28
  1. 9

    vous devriez vous rappeler client de temps entre readyState==2 et readyState==3 si vous allez utiliser ajax, parce que le serveur de temps sera quelque part entre temps, sur demande, reçu et la réponse préparée

    • Un exemple avec jquery ou certains autres JS cadre cacher différence en AJAX mise en œuvre?
    • je n'ai pas d'exemple à l'aide de jquery/mootools/prototype parce que tous se cachent de travail avec le navigateur natif de l'objet xmlhttprequest et ne fournissent pas à l'interface de gestion des événements readystatechange
    InformationsquelleAutor Victor Kotseruba
  2. 38

    Ces deux fonctions Javascript devrait faire l'affaire pour vous.

    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: supprimé ".replace(/^(.)[\s\S]/,"$1")".

    calcOffset() calcule le décalage de l'heure du serveur et compense GMT/UTC.

    getServerTime() pour obtenir le décalage de l'heure locale de faire correspondre les serveurs à l'aide du fuseau horaire local.

    Si calcOffset() prend du temps pour l'exécuter, vous pourriez perdre quelques secondes de précision. Peut-être le temps d'exécution peuvent être prises en compte....

    Si vous êtes inquiet pour le calcul de l'offset de devenir mauvais quand l'heure locale ou l'heure du serveur de changement ou de l'heure d'été vous pourrait recalculer un peu après chaque heure d'horloge, le système permettra de compenser les changements dans la dayligt épargne-temps.
    Il pourrait être nécessaire d'attendre jusqu'à ce que à la fois le local et le serveur d'horloge a passé l'heure.

    L'exemple ne fonctionne que sous IE, en raison de "Msxml2.XMLHTTP" je pense que.....

    • ce que cette étrange regexp est censé faire: .replace(/^(.*)[\s\S]*/,"$1") ?
    • J'ai fait copié qu'une partie de certains vieux de la source. L'auteur ne se souvient pas de ce qui est fait et je ne semble pas valide regex.... Désolé....
    • Changement de méthode de "récupérer" pour "TÊTE" sera la cause de serveur http pour ne pas retourner corps. Cela pourrait accélérer la demande.
    • Notez que Date.parse(new Date().toUTCString()); crée un objet date, le convertit à l'UTC de la chaîne, analyse alors que de retour dans une date et renvoie le nombre de millisecondes depuis l'époque. Il peut être remplacé par le plus simple (new Date()).getTime(); ou new Date() * 1
    • Ou Date.now()
    • ES5, ce qui n'était pas tout à fait aussi omniprésent à l'époque (et n'est pas pris en charge par un bon pourcentage de navigateurs à utiliser maintenant). Il est facilement polyfilled je suppose. Mais oui, ça marche aussi.
    • Ce n'est pas vraiment bon pour le temps de latence comme NTP, n'est ce pas?
    • Ce qui a aussi l'inconvénient de nécessiter ActiveX tech.

    InformationsquelleAutor Fedearne
  3. 32

    Vous pouvez calculer l'heure exacte à NTP (Network Time Protocol) dans vos codes,

    j'essaie d'expliquer pour vous:

    1. Nous avons ClientTime sur l'Envoi de la Demande (par exemple 4/3/2012 13:56:10.123)
    2. Vous envoyer ClientTime de Serveur
    3. Nous avons temps d'aller-retour pour la demande, je l'ai appelé RequestTime (par exemple: Il faut 5 secondes)
    4. Dans le Serveur, Nous calculons la Différence de temps entre le Serveur et le Client (par exemple: Il ServerTime - ClientTime = ServerClientDifferenceTimeWithRequesttime), vous devez maintenant cette Différence, y compris aller-retour, le temps de la demande à l'étape 3, vous devez supprimer la durée de la rotation de la Différence
    5. Serveur d'Envoyer une réponse qui incluent ServerClientDifferenceTimeWithRequesttime et ServerTime
    6. Nous avons temps d'aller-retour pour la réponse, je l'ai appelé ResponseTime (par exemple: Il faut 3 secondes)
    7. Client, Nous calculons la Différence de temps entre le Serveur et le Client (par exemple: Il ServerTime - ClientTime = ServerClientDifferenceTimeWithResponsetime), encore une fois: vous devez maintenant cette Différence, y compris aller-retour, le temps de réponse à l'étape 6
    8. Nous avons Maintenant le temps de Client
    9. Vous devez Calculer les équations simples du client:

    X(SyncedTime) = Now + (ServerClientDifferenceTimeWithRequestTime - RquestTime)

    X(SyncedTime) = Now + (ServerClientDifferenceTimeWithResponseTime - ResponseTime)

    Now - ClientTime = RquestTime + ResponseTime =>

    Now - (ServerClientDiffRq - RquestTime) = Now - (ServerClientDiffRs - ResponseTime)

    si vous le résoudre, vous trouvé ceci:

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

    et puis vous pouvez trouver synchronisées temps ou le temps de serveur à client avec cette équation:

    X(SyncedTime) = Now + (ServerClientDifferenceTimeWithResponseTime - ResponseTime)

    Je montre simple code, mais lorsque vous voulez écrire, il n'oublie pas utiliser UTC date & fonctions de temps...

    Côté serveur (par exemple php, c#):

    PHP:

    header('Content-Type: application/json; charset=utf-8');
$clientTime = $_GET["ct"] * 1; //for php 5.2.1 or up: (float)$_GET["ct"];
$serverTimestamp = round(microtime(true)*1000); //(new DateTime())->getTimestamp();
$serverClientRequestDiffTime = $serverTimestamp - $clientTime;
echo "{\"diff\":$serverClientRequestDiffTime,\"serverTimestamp\":$serverTimestamp}";

    C#:

    long clientTime = long.Parse(Request.Form["ct"]);
long serverTimestamp = (DateTime.Now.Ticks-(new DateTime(1970,1,1) - DateTime.MinValue).Ticks) / 10000;
long serverClientRequestDiffTime = serverTimestamp - clientTime;
Response.Write("{\"diff\":"+serverClientRequestDiffTime+",\"serverTimestamp\":"+serverTimestamp+"}");

    Côté Client (Javascript avec Jquery):

    var clientTimestamp = (new Date()).valueOf();
$.getJSON('http://yourhost.com/getdatetimejson/?ct='+clientTimestamp, function( data ) {
    var nowTimeStamp = (new Date()).valueOf();
    var serverClientRequestDiffTime = data.diff;
    var serverTimestamp = data.serverTimestamp;
    var serverClientResponseDiffTime = nowTimeStamp - serverTimestamp;
    var responseTime = (serverClientRequestDiffTime - nowTimeStamp + clientTimestamp - serverClientResponseDiffTime )/2

    var syncedServerTime = new Date((new Date()).valueOf() + (serverClientResponseDiffTime - responseTime));
    alert(syncedServerTime);
});
    • en.wikipedia.org/wiki/Network_Time_Protocol Son protocole ntp.. j'ai utilisé la synchronisation de l'Horloge de l'algorithme pour qu'il
    • Il utilise le même algorithme de base pour comment NTP fonctions pour calculer la différence entre le serveur et le client fois-assez intelligent choses. Voir cette partie de la NTP page.
    • J'ai corrigé quelques bugs que vous avez eu, mais cela ne fonctionne pas réellement. Si le client de l'horloge est désactivée, cela ne donne pas le bon moment, tel que vu par le serveur.
    • merci pour votre modifier, mais vous ne changer quelque chose qui n'est pas un bug, si vous n'avez pas utiliser des guillemets dans json nom de l'objet en javascript, il n'est pas question et je passe la chaîne de requête avec la méthode GET, vous pouvez le passer avec jquery mais vous devez utiliser la méthode POST, j'ai donc modifier cette partie de retour à ma façon, et Sa fonctionne parfaitement, je l'ai utilisé dans de nombreux projets, le type de navigateur que vous utilisez et qui peut éteindre l'ordinateur de l'horloge?? si votre navigateur prend en charge le javascript, vous pouvez l'utiliser. De toute façon, je vous Remercie pour votre attention.
    • pour l'édition de PHP je pense que vous modifiez le mode et encore de son pas de bug, vous faire mieux donc j'ai changer le type coulée qui ne fonctionne que sur les versions de php 5.2.1 ou et écrit dans les commentaires, donc merci pour l'édition de php.
    • Oui il importe si vous n'utilisez pas de guillemets. Si vous ne les utilisez pas, il ne parvient pas complètement, car il est illégal json. Si vous n'aimez pas le type coulée puis utilisez floatval(). Si l'horloge sur le navigateur est mauvaise, ce code ne fonctionne pas. Essayez, vous verrez. Pas "éteindre" de l'horloge, mais juste mis au mauvais moment. Le code de Aktau fonctionne.
    • plz vérifier ce code sur votre navigateur de la console: a = {cc:1,dd:"bonjour"} comme vous pouvez le voir sa fonctionne très bien. si vous voulez mettre qutation puis le mettre sur votre code ou si vous voulez utiliser la conversion de type, vous pouvez l'utiliser mais ce n'est pas un bug, ce n'est pas le problème de mon code comme je l'ai dit vous, avant de la tester et de la question ci-dessus n'est pas à propos de comment devrais-je l'ai jeté string en int en php? .. et la principale réponse est que Vous pouvez utiliser NTP pour la synchronisation des horloges. et les codes sont seulement des Exemples et de façon la plus simple.
    • Veuillez lire la description du protocole NTP et vérifier mon code à nouveau. il n'est pas important client le temps de se tromper comme vous pouvez le voir sur Aktau code utilisé comme moi " var t0 = (new Date()).valueOf ();', nous devrions être client d'horodatage pour calculer les différences entre le client en temps et heure du serveur, et en raison de ses pas question votre client timestamp être 0 ou être 10000000, seulement si vous changez l'horloge du client entre la requête et la réponse qu'il va mal.donc, si vous pensez que la réponse 'à l'Aide de NTP' a un problème ou des exemples n'est pas mis en œuvre par le NTP comme vous le faites avant,il suffit de le modifier. Merci de nous aider à les développeurs comme moi.
    • J' essayé. Je ne suis pas juste se plaindre de rien. Si vous ne mettez pas dans les citations, il ne fonctionne pas. JSON n'est PAS Javascript! Ils ont des règles différentes. J'ai aussi essayé avec une horloge qui était mauvais et qu'il n'a pas de travail - j'ai eu un temps qui était à mi-chemin entre l'horloge du client et du serveur d'horloge. Vous avez eu un TRÈS une bonne idée de faire ça! Mais il y a un bug quelque part.
    • comment calculez-vous RequestTime à partir de l'étape 3? Si le client ou le serveur de temps ne sont pas synchronisés, vous ne pouvez pas être sûr que la différence entre ServerTime et ClientTime vous donnera RequestTime - la différence contiendra le décalage, ainsi. Sans cela, je ne vois pas comment votre algorithme pourrait fonctionner.
    • Ce n'est pas mon code, vous devriez demander à la place de Mehdi. Si vous voulez le mettre en œuvre, utiliser Aktau réponse - cela fonctionne réellement. Mehdi avait une grande idée, mais avait des insectes dans la mise en œuvre. Basé sur les choses que je fixe juste pour le faire fonctionner, je pense qu'il l'a écrit sans le tester.
    • Ah, désolé - j'ai un peu confus après la lecture de tous ces commentaires. @MehdiYeganeh, pourriez-vous s'il vous plaît commentaire sur ma question?
    • Anusev, @Ariel, Tanx ariel pour le commentaire, mais il n'a pas de bug, de son protocole, et la mise en œuvre est assez vrai pour trouver exacte, heure du serveur au client.et cher nikola, son vraiment simple, il suffit de plz lire un Protocole NTP première (en.wikipedia.org/wiki/Network_Time_Protocol) pour trouver "comment est-il?".pour l'étape 3, avant d'envoyer la requête au serveur de nous sauver client du temps dans la variable et après avoir reçu de réponse, nous vérifions la différence de temps entre la demande et la réponse, son temps de voyage tour calculé au client.sa dépend pas de temps du serveur ou du client de temps qui est vrai ou pas,nous venons de trouver de l'aller-retour de la demande.
    • Cela ne fonctionne que pour les symétriques des retards, qui sont très loin d'être garanti.
    • Les objets en JavaScript ne sont pas les mêmes que les objets JSON. L'ancien peut avoir non cotées touches; le second ne l'est pas. C'est aussi simple que cela.
    • Courses en Orbite, tanx pour voir ma réponse, et désolé pour le retard de réponse, je sais que sur les différences entre l'objet javascript & objet json maintenant, cette réponse est pour parfois, il ya, j'ai vu votre info, vous êtes bon dans la pile de flux, si vous avez un intérêt au sujet de cette question & ma réponse.. merci de modifier à mieux & aider les développeurs, mon anglais n'est pas bon .. merci d'éditer mon anglais mots & codes 😉 merci 🙂
    • Downvoted parce que la formule sur le côté client est erronée. La formule correcte est syncedServerTime = clientTime + (de données.Diff + (de données.ServerTime - nowTimeStamp)) / 2
    • merci pour vérifier ma réponse, plz voir NTP, j'ai écrit exactement la même formule que défini dans le NTP et vous n'avez pas besoin de diviser par 2.. je pense que vous devriez lire à nouveau NTP mal compris...;)
    • Il devrait être (serverClientRequestDiffTime - nowTimeStamp + clientTimestamp + serverClientResponseDiffTime )/2 car serverClientResponseDiffTime est calculé à côté serveur

    InformationsquelleAutor Mehdi Yeganeh
  4. 23

    J'ai trouvé que l'algorithme de @mehdi-yeganeh ci-dessus ne m'a pas donné des résultats utiles, mais l'idée est bonne: pour utiliser le protocole NTP algorithme (ou au moins une version faible) afin de synchroniser le serveur et le client horloges.

    C'est mon final de mise en œuvre, il utilise le serveur en-têtes de réponse, si disponible, pour plus de précision (corrigez-moi si je me trompe, mes propres tests disent que c'est tout à fait exact).

    côté navigateur (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)));
    }
});

    côté serveur (php, mais pourrait être n'importe quoi):

    Votre serveur à l'itinéraire "GET /ntp' doit retourner quelque chose comme:

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

    Si vous avez le PHP >5.4, ensuite, vous pouvez enregistrer un appel à microtime() et de le rendre un peu plus précis avec:

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

    REMARQUE

    De cette façon pourrait être vu comme une sorte de ghetto, il y a quelques autres Débordement de Pile réponses qui pourraient vous guider vers une meilleure solution:

    • Le t2 de correction ne fonctionne pas bien parce que c'est seulement à la deuxième résolution, au lieu de milliseconde comme le reste. Il fait réellement de la précision pour le pire.
    • Merci pour le heads up. Je n'avais même pas pensé à la résolution de la question. Je vais commenter dans ma réponse et de prendre note de votre remarque.
    • +1. En fait je pense que ce doit être la accepté de répondre - dans mon implémentation, chaque réponse du serveur contient des en-têtes HTTP personnalisés avec t1 et t2 (avec ms précision), le reste est juste comme vous l'avez écrit.
    • +1 pour REQUEST_TIME_FLOAT et nginx astuces
    • github.com/nicksardo/GoTime est un autre bibliothèque JS similaire à ServerDate mais a des gestionnaires pour une utilisation avec les Websockets, ce qui améliore grandement la précision typique des requêtes http.
    • Si je pouvais star réponses, je le ferais.
    • Pouvez-vous donner des précisions sur la définition de l'exactitude de nginx en-tête de date? Est-il de même pour Apache? Merci beaucoup @Aktau.
    • regardez certaines des variables avec laquelle vous pouvez définir un en-tête personnalisé ici: nginx.org/en/docs/http/... (regardez la $msec et peut-être aussi des choses intéressantes peuvent être faites avec le $request_time variable).
    • Merci beaucoup, j'utilise un en-tête avec %t %D dans le htaccess d'Apache.
    • Aussi je souhaite que je pourrais star @Sardonique réponse - GoTime fonctionne très bien jusqu'à présent. Si j'ai besoin de plus de précision je peux mettre en œuvre les WebSockets.

    InformationsquelleAutor Aktau
  5. 0

    Je voudrais seulement demander la mise à jour du serveur toutes les 30s ou alors, si vous avez besoin de précision uniquement à la minute. Ne comptez pas sur le client de temps, mais l'utilisation de leur système d'horloge à garder l'horloge précise entre les mises à jour. Je pense que vous avez répondu à votre propre question?

    Il serait utile si nous avons mieux compris ce que vous êtes en train d'essayer de faire.

    Si vous souhaitez simplement une horloge pour afficher l'heure sur le serveur, qui est ensuite ajusté à un certain horaire, le faire côté client avec des décalages. La poignée de l'heure d'été dans les fuseaux horaires, il est applicable à l'aide de la date à laquelle vous recevez à partir du serveur. Si vous voulez déterminer le temps de latence, vous auriez probablement besoin d'un petit script sur le serveur pour le calcul de la différence. Mais comme ci-dessus, il serait utile de mieux comprendre le problème. Si la précision est seulement à la minute, le temps de latence semble moins critique.

    • Seule la synchronisation est suffisant pour obtenir la différence. La question était de savoir correctement la manipulation de fuseau horaire et de la comptabilité de latence, ou une meilleure façon de résoudre le problème.
    • Alors la question n'est pas très clair, comme le doublement indiquée par l'auteur de la pensée, le demandeur a voulu modifier l'horloge du client.
    • Je crois que "pour afficher l'horloge numérique" certains moyens de balisage HTML avec javascript de le mettre à jour.
    InformationsquelleAutor snicker
  6. 0

    Grâce à @Mehdi Yeganeh et @Fedearne. - Je mettre en œuvre ma fonction à utiliser à la fois logique et c'est le travail.

    https://gist.github.com/ethaizone/6abb1d437dbe406fbed6

    InformationsquelleAutor EThaizone Jo
  7. -3

    Je voudrais synchroniser l'heure lors de l'initialisation avec un Serveur de Temps Internet.

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

    • à partir de javascript?
    • pourquoi est-ce une réponse downvoated sans aucun commentaire??
    • C'est la vie @rahulroy9202 Vous ne pouvez pas faire tout le monde comme vous 🙂
    • Eh bien, tout downvote devrait avoir une raison spécifiée. Il fait partie de la StackExchange Recomendations.
    • Cher @rahulroy9202, c'est la vie aussi. Pas tout le monde de suivre la règle de trop 🙂
    • Si je devais deviner, je dirais que c'est downvoted parce que la réponse ne fournit pas un moyen de consommer le SON à partir de javascript

    InformationsquelleAutor Cheok Yan Cheng