app.js

Question

87

Sync JS time between multiple devices

rated 0 times [ 91] [ 4] / answers: 1 / hits: 16896 / 12 Years ago, mon, may 14, 2012, 12:00:00

I'm using the wonderful reveal.js library to create a HTML slideshow. My only problem is that I need it to synchronise across multiple devices.

At the moment I am making a AJAX request to the the time from the server and keep an internal clock for the 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

}

Whilst this gets me within 1 or so seconds of accuracy, I need to do better. The difference is really noticeable when the slideshow is auto advancing.

The code is going to be running all on the same platform, so cross-browser compatibility is nothing to worry about.

Here's what I've managed to put together

Any ideas?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

stacie

Add To Favorites

Follow

Total Points: 476

Total Questions: 92

Total Answers: 102

Location: Bosnia and Herzegovina

Member since Tue, Mar 29, 2022

2 Years ago

stacie questions

1 How to perform validation of a array field using formik and yup validation

Wed, Mar 31, 21, 00:00, 3 Years ago

1 Validation not working on angular reactive forms

Fri, Jun 26, 20, 00:00, 4 Years ago

1 CropperJS Not working well when using it in modal

Thu, Jan 23, 20, 00:00, 4 Years ago

1 Keyboard shortcuts in React, the react-hotkeys library

Fri, Aug 30, 19, 00:00, 5 Years ago

1 Date Pipe in Angular 8

Fri, Aug 2, 19, 00:00, 5 Years ago

View All

answered 12 Years ago katharinek · Accepted Answer

How about a different approach: who cares about time? (You're not going to reliably sync the system clock with JavaScript.)

Instead, use a Node server with socket.io to synchronize when your clients advance the slideshow. Instead of the clients deciding when to advance, the server tells them to.

This approach comes with the added bonus of being able to manually fiddle with the slideshow while it's running. In the example that follows, I've added a Next button that causes all connected clients to immediately advance to the next slide.

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

This file is processed as a doT template.

<!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>

Copy these two files into a folder, then run

$ npm install express socket.io dot

$ node app.js

and navigate to http://localhost:70 in several different windows, then see the magic.