Cách tiếp cận khác nhau: ai quan tâm đến thời gian? (Bạn sẽ không đồng bộ một cách đáng tin cậy đồng hồ hệ thống với JavaScript.)
Thay vào đó, hãy sử dụng máy chủ Node với socket.io để đồng bộ hóa khi khách hàng của bạn trước trình chiếu. Thay vì các khách hàng quyết định khi nào để tiến lên, máy chủ sẽ nói với họ.
Cách tiếp cận này đi kèm với phần thưởng tăng thêm khi có thể tự chỉnh sửa bằng trình chiếu trong khi trình chiếu đang chạy. Trong ví dụ sau, tôi đã thêm một nút Tiếp theo khiến tất cả khách hàng được kết nối phải chuyển sang trang trình bày tiếp theo ngay lập tức.
ứng dụng.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
Tập tin này được xử lý như một mẫu 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>
Sao chép hai tập tin này vào một thư mục, sau đó chạy
$ npm install express socket.io dot
$ node app.js
và điều hướng đến http://localhost:70 trong các cửa sổ khác nhau, sau đó xem sự kỳ diệu.
Yêu câu trả lời này! Bỏ qua câu hỏi của tôi để đạt được mục tiêu tương tự. Tôi sẽ thực hiện cách tiếp cận này và xem những gì tôi có thể thoát ra khỏi nó! –
Và kudo cho liên kết demo! –
Tôi gặp phải một số lỗi khi chạy phiên bản Express mới nhất. Chỉ khi tôi ghim nó vào phiên bản 2.5.10 và cài đặt lại thì nó có hoạt động không. Ngoài ra, tôi đã phải chạy 'sudo node app.js' – skube