Co powiesz na inne podejście: kogo obchodzi czas? (Nie można niezawodnie synchronizować zegara systemowego z JavaScriptem.)
Zamiast tego należy użyć serwera Node z socket.io, aby zsynchronizować, kiedy klienci przesuwają pokaz slajdów. Zamiast klientów decydujących, kiedy przejść, serwer mówi im, aby to zrobili.
To podejście ma dodatkową zaletę, że można ręcznie obsługiwać pokaz slajdów podczas jego pracy. W poniższym przykładzie dodałem przycisk Next, który powoduje, że wszyscy podłączeni klienci natychmiast przechodzą do następnego slajdu.
aplikacja.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);
}
odsłon/index.html
Ten plik jest przetwarzany jako doT szablonu.
<!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 ></button>
</body>
</html>
skopiować te dwa pliki do folderu, a następnie uruchomić
$ npm install express socket.io dot
$ node app.js
i przejdź do http://localhost:70 w kilku różnych oknach, a następnie zobaczyć magię.
Uwielbiam tę odpowiedź! Ignorując moje pytanie, aby osiągnąć ten sam cel. Zamierzam przyjąć to podejście i zobaczyć, co mogę z tego wyciągnąć! –
I kudos za link demo! –
Mam kilka błędów z tym związanych z najnowszą wersją Express. Dopiero po przypięciu go do wersji 2.5.10 i ponownemu zainstalowaniu działało. Musiałem również uruchomić 'sudo node app.js' – skube