Synchronisation JS temps entre plusieurs appareils

Je suis en utilisant le merveilleux reveal.js bibliothèque pour créer un diaporama HTML. Mon seul problème est que j'ai besoin de les synchroniser sur plusieurs appareils.

Pour le moment, je fais une requête AJAX au moment à partir du serveur et de garder une horloge interne pour la page.

function syncTime() {
    //Set up our time object, synced by the HTTP DATE header
    //Fetch the page over JS to get just the headers
    console.log("syncing time")
    var r = new XMLHttpRequest();
    r.open('HEAD', document.location, false);
    r.send(null);
    var timestring = r.getResponseHeader("DATE");

    systemtime = new Date(timestring); //Set the time to the date sent from the server
}

Bien que cela me met dans 1 secondes de précision, j'ai besoin de faire mieux. La différence est vraiment notable lorsque le diaporama est auto avancer.

Le code va être l'exécution de tous sur la même plate-forme, de sorte que la compatibilité inter-navigateur n'est rien à s'inquiéter.

Voici ce que j'ai réussi à mettre ensemble

Des idées?

InformationsquelleAutor Josh Hunt | 2012-05-14

Comment sur une approche différente: qui se soucie? (Vous n'allez pas fiable pour la synchronisation de l'horloge système avec JavaScript.)

Au lieu de cela, utilisez un Nœud serveur avec socket.io synchroniser lors de vos clients à l'avance le diaporama. Au lieu de les clients de décider à l'avance, le serveur lui indique.

Cette approche est livré avec l'avantage supplémentaire d'être en mesure manuelle de jouer avec le diaporama en cours d'exécution. Dans l'exemple qui suit, j'ai ajouté un Prochaine bouton qui provoque tous les clients connectés immédiatement passer à la diapositive suivante.

app.js

var express = require('express')
    , app = express.createServer()
    , io = require('socket.io').listen(app)
    , doT = require('dot')
    , slide = 0
    , slides = [
        'http://placekitten.com/700/400?image=13',
        'http://placekitten.com/700/400?image=14',
        'http://placekitten.com/700/400?image=15',
        'http://placekitten.com/700/400?image=16',
        'http://placekitten.com/700/400?image=1',
        'http://placekitten.com/700/400?image=2',
        'http://placekitten.com/700/400?image=3',
        'http://placekitten.com/700/400?image=4',
        'http://placekitten.com/700/400?image=5',
        'http://placekitten.com/700/400?image=6',
        'http://placekitten.com/700/400?image=7',
        'http://placekitten.com/700/400?image=8',
        'http://placekitten.com/700/400?image=9',
        'http://placekitten.com/700/400?image=10',
        'http://placekitten.com/700/400?image=11',
        'http://placekitten.com/700/400?image=12',
    ];

app.listen(70); //listen on port 70

app.register('.html', doT); //use doT to render templates
app.set('view options', {layout:false}); //keep it simple
doT.templateSettings.strip=false; //don't strip line endings from template file

app.get('/', function(req, res) {
    res.render('index.html', { slide: slide, slides: slides });
});

app.post('/next', function(req, res) {
    next();
    res.send(204); //No Content
});

setInterval(next, 4000); //advance slides every 4 seconds

function next() {
    if (++slide >= slides.length) slide = 0;
    io.sockets.emit('slide', slide);
}

views/index.html

Ce fichier est traité comme un doT modèle.

<!DOCTYPE html>
<html>
<head>
<title>Synchronized Slideshow</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script>
var curslide = {{=it.slide}}; //the slide the server is currently on.
$(function() {
$('#slide' + curslide).css('left',0);
$('#next').click(function() {
$.post('/next');
});
});
var socket = io.connect('http://localhost:70');
socket.on('slide', function(slide) {
$('#slide' + curslide).animate({left:-700}, 400);
$('#slide' + slide).css('left',700).show().animate({left:0}, 400);
curslide = slide;
});
</script>
<style>
#slideshow, .slide { width:700px; height:400px; overflow:hidden; position:relative; }
.slide { position:absolute; top:0px; left:700px; }
</style>
</head>
<body>
<div id="slideshow">
{{~it.slides :url:i}}
<div id="slide{{=i}}" class="slide"><img src="{{=url}}"></div>
{{~}}
</div>
<button id="next">Next &gt;</button>
</body>
</html>

Copiez ces deux fichiers dans un dossier, puis exécutez

$ npm install express socket.io dot
$ node app.js

et accédez à http://localhost:70 dans plusieurs fenêtres différentes, alors, de voir la magie.

L'amour de cette réponse! Ignorant ma question pour obtenir le même objectif. Je vais prendre cette approche et voir ce que je peux en sortir!
J'ai eu quelques erreurs lors de l'exécution du présent avec la dernière version de Express. Seulement quand j'ai épinglé à la version 2.5.10 et réinstallé fait le travail. Aussi, j'ai dû courir sudo node app.js
Oui, c'est très ancienne et l'express a évidemment de nombreuses modifications importantes entre v2 et v4. La nécessité pour sudo vient de l'écoute sur le port de 70, de changer pour quelque chose >1024 à corriger.

InformationsquelleAutor josh3736

22

Mesurer le temps écoulé entre l'envoi de la demande et l'obtention de la réponse. Ensuite, divisez cette valeur par 2. Qui vous donne une valeur approximative de latence. Si vous ajoutez à cela le temps de la valeur à partir du serveur, vous serez au plus proche de la véritable serveur de temps.

Quelque chose comme cela devrait fonctionner:
```
function syncTime() {
//Set up our time object, synced by the HTTP DATE header
//Fetch the page over JS to get just the headers
console.log("syncing time")
var r = new XMLHttpRequest();
var start = (new Date).getTime();
r.open('HEAD', document.location, false);
r.onreadystatechange = function()
{
if (r.readyState != 4)
{
return;
}
var latency = (new Date).getTime() - start;
var timestring = r.getResponseHeader("DATE");
//Set the time to the **slightly old** date sent from the 
//server, then adjust it to a good estimate of what the
//server time is **right now**.
systemtime = new Date(timestring);
systemtime.setMilliseconds(systemtime.getMilliseconds() + (latency / 2))
};
r.send(null);
}
```
Intéressant de côté: John Resig a un bon article sur l'exactitude de Javascript calendrier.

Elle ne devrait pas être un problème dans ce cas, puisque vous n'êtes intéressé que par votre temps à être hors de ~1 seconde. 15 ms différence ne devrait pas avoir beaucoup d'effet.
- Une étonnante réponse! Assez sûr que c'est la meilleure solution, mais je vais ajouter une prime sur pour voir si je peux attirer d'autres solutions.
- C'est la façon dont je le ferais. La seule différence étant que je voudrais faire une synchronisation appeler plusieurs fois (c'est à dire 10 fois), puis utilisez la systemtime à partir de l'appel avec la plus faible latence. En effet, plus le temps de latence, plus vous aurez d'impact du fait que la répartition entre-client-à-serveur-temps et de serveur à client-le temps n'est pas exactement de 1:1.
- Est-il une meilleure option que de diviser le temps de réponse de 2? Dans certains de mes tests, le serveur bloque pendant un certain temps, mais ensuite revient vite. Alors peut-être que le temps de trajet est de 200ms, mais l'heure du retour est uniquement 20ms off. Cela fait-il sens?
- Utile de code. C'est en donnant de meilleurs résultats que "ServerDate" de la bibliothèque. 🙂
InformationsquelleAutor MikeWyatt
11

Je suis content que vous avez trouvé une réponse satisfaisante à votre question. J'ai eu une semblable nécessité de synchroniser le navigateur avec le serveur d'horloge, et il était déterminé à parvenir à mieux que 1 seconde précision comme vous étiez. J'ai écrit le code pour faire cela et je suis de poster cette réponse ici au cas où quelqu'un d'autre a besoin de la solution.

Le code est appelé ServerDate et est librement disponible pour le téléchargement. Voici une partie du fichier README. Remarquez que j'ai atteint 108 ms précision dans mon exemple:

Vous pouvez utiliser ServerDate comme vous le feriez utiliser le Date de la fonction ou de l'un de ses
cas, par exemple:
```
> ServerDate()
"Mon Aug 13 2012 20:26:34 GMT-0300 (ART)"
> ServerDate.now()
1344900478753
> ServerDate.getMilliseconds()
22
```
Il y a aussi une nouvelle méthode pour obtenir la précision de ServerDate estimation 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 les navigateurs de l'horloge, en millisecondes:
```
> ServerDate - new Date()
39
```
InformationsquelleAutor David Braun
0

Vous ne pouvez pas vraiment synchroniser avec le serveur. En mesurant le temps de votre demande de serveur besoins (comme MikeWyatt suggéré) n'est pas un bon indicateur sur le temps de latence.

Seulement votre serveur sait, lorsqu'il répond à une demande. Par conséquent, il doit la transmettre que les informations de retour avec la réponse. Avec Date.now() - new Date(timestringOfServerResponse) vous pouvez mesurer le temps de latence exactement. Pourtant, je ne suis pas sûr pourquoi vous avez besoin de cette valeur.

Pour synchroniser une application entre mulitiple appareils, le serveur doit envoyer leur action à effectuer lors de l'. Le "quand" ne doit pas être "dès que vous obtenez ma réponse", mais un horodatage exact. Aussi loin que l'horloge système de votre précision des appareils et synchronisés (ils sont généralement), l'application va s'exécuter ses méthodes synchrounously, parce qu'il sait ce qui se passera quand (ou au moins: ce qui aurait dû se passer ensuite, et il peut interpoler que se "maintenant").
- C'est exactement comment cela fonctionne. La page attend jusqu'à ce que l'heure correcte avant d'effectuer une action pour s'assurer qu'il est syncd à travers les dispositifs. Le problème vient du fait que j'ai deux iPads uns à côté des autres qui sont mis à l'heure de la synchronisation avec les serveurs de temps, mais qui sont à 1 seconde d'intervalle.
- Si vous souhaitez mettre en place un serveur de temps en javascript, pour synchroniser "personnaliser le système des temps"?
- vous êtes à tort, en supposant que le client de l'horloge correspond à l'horloge sur le serveur. Ils sont pratiquement garanti d'être différent, probablement par plusieurs secondes ou minutes. Le réglage de la latence n'est pas parfait, mais il vous assez proche. Dans le pire des cas, vous allez être éteint par l'ensemble du temps d'aller-retour, si l'un de ces voyages a été instantanée.
InformationsquelleAutor Bergi
0

Je suis largement à l'aide de la COMÈTE patron ici pour mon web en temps réel de l'application.

À utiliser que dans votre cas, vous auriez besoin des clients d'ouvrir une requête AJAX vers le serveur et d'attendre une réponse. Dès qu'il arrive, le client doit modifier les diapositives.

Sur le serveur que vous avez à retenir toutes les réponses jusqu'à ce qu'il est temps de changer les lames. (Vous pourriez être plus avancé et le retard par la suite sur le client pour le même temps de chacun, mais c'est probablement pas nécessaire). Je ne peux pas vous montrer un exemple de code pour que ici que je ne sais pas ce qui est disponible pour vous.

Si vous êtes effectivement la création d'un orchestre où le serveur joue le chef d'orchestre et tous les clients sont à l'écoute de lui.

Timing est alors déterminée par la capacité du serveur à répondre à la demande au (presque) le même temps, plus la latence du réseau.

Habituellement, les clients doivent être dans la même partie du réseau afin de latence peut être très semblable, et la valeur absolue n'est pas mal ici, seule la variation.

Et il peut aussi être une astuce supplémentaire aidant: ne pas modifier les diapositives avec un disque de remplacement, les mélanger. Ce sera flou de le modifier, de sorte que l'œil ne peut pas attraper le peu de différences de calendrier que vous aurez toujours sur vous.

(Si vous ne pouvez pas avoir le serveur de jouer le chef d'orchestre, vous êtes susceptible d'avoir à utiliser la solution par MikeWyatt - sans doute avec un peu de demandes, et en arrondissant le résultat, en fonction de la configuration du réseau. Dans un réseau local, une demande peut être suffisant, allez sur l'ensemble de l'internet un peu plus de la moyenne ne fera pas de mal...)

InformationsquelleAutor Chris

Vous devez vous connecter pour publier un commentaire.