どのように異なるアプローチ：時間を気にするのでしょうか？
代わりにsocket.ioのNodeサーバーを使用して、クライアントがスライドショーを進めるときに同期させます。クライアントがいつ進めるかを決めるのではなく、サーバーはそれらを指示します。
このアプローチには、スライドショーを実行中に手作業で作成するという追加の特典が付いています。次の例では、次のボタンを追加しました。これにより、接続されているすべてのクライアントがすぐに次のスライドに進むことができます。
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);
}
ビュー/ index.htmlには
このファイルはdoTテンプレートとして処理されます。
<!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>
コピーしたフォルダにこれらの2つのファイルは、その後、その後、魔法を参照してください、
$ npm install express socket.io dot
$ node app.js
を実行し、いくつかの異なるウィンドウでhttp://localhost:70に移動します。
この回答を愛してください！私の質問を無視して、同じ目的に到達する。私はこのアプローチを取って、私がそれから得ることができるものを見るつもりです！ –
デモリンクのための名誉！ –
最新版のExpressでこれを実行すると、いくつかのエラーが発生しました。バージョン2.5.10に固定して再インストールしたときにのみ動作します。また、 'sudo node app.js'を実行しなければならなかった – skube