我在Javascript中创建了一个小脚本,它应该向页面上连接的所有客户端显示一些信息,实际上每90秒显示一个图像。这个功能在我的电脑上工作得很好,但是一旦我必须重新加载页面,所有的过程都会重新启动。
我不知道是否有办法让服务器调用此功能,就像这样
//This should be a "server" variable in which users should be able to add their own image :
var images = [
['Canyon', 'https://www.w3schools.com/css/img_fjords.jpg'],
['Car Jumping', 'http://www.gettyimages.fr/gi-resources/images/Embed/new/embed2.jpg'],
['Birds Flying', 'http://ekladata.com/qWGncUdJ7U5k2vvmc1au-ZLnjlc.jpg'],
];
function Display (imagesarray) {
var rnd = Math.floor((Math.random() * imagesarray.length - 1) + 1);
document.getElementById("image").src = imagesarray[rnd][1];
}
function Timer(countDownDate) {
var x = setInterval(function() {
// Get todays date and time
var now = new Date().getTime();
// Find the distance between now an the count down date
var distance = countDownDate - now + 2;
// Time calculations for days, hours, minutes and seconds
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Output the result in an element with id="demo"
document.getElementById("countdown").innerHTML = ("0" + minutes).slice(-2) + ":" + ("0" + seconds).slice(-2);
// If the count down is over, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("countdown").innerHTML = "FINISHED !";
Display(images);
}
}, 1000);
}
//This will call the Timer() function to end it in 01:30, and launch it again 10 seconds after the end of the previous call.
var y = setInterval(Timer(new Date().getTime() + 10000), 500);
&#13;
p {
text-align : center;
font-size : 48px;
margin : 0px;
}
#note {
text-align : center;
font-size : 12px;
margin : 0px;
}
#image {
display : block;
margin : auto;
width : 150px;
height : 150px;
}
&#13;
<p id="note">Counting only 10 seconds for example</p>
<p id="countdown">00:10</p>
<img id="image" src="http://vignette4.wikia.nocookie.net/destinypedia/images/b/b9/Unknown_License.png/revision/latest?cb=20130810221651">
&#13;
有谁知道服务器如何管理,所以每个人都有相同的计时器,同时显示相同的图片?
非常感谢你的帮助!
[编辑1]我正在使用的后端语言是这个项目的PHP
答案 0 :(得分:0)
您需要通过websockets保持与服务器的持久连接,或者您可以轻松地从服务器发送变量,告知客户端下一次出现应该开始的秒数。
答案 1 :(得分:0)
因此,只要用户在计算机上正确设置了时间,就不需要“持久连接”。您只需要为每个用户使用相同的基准日期。时间戳非常好,因为它们没有时区问题。
另请注意,最好不要使用setTimeout
setInterval
来衡量时间,因为setTimeout
可以重命名为runAfterAtLeastThatTimeIfYouDontHaveBetterToDo()
。在契约中,放置setIterval(()=>{},1000)
并不能保证它会每1秒运行一次,如果用户在浏览时切换选项卡,您可能会遇到失步。如果你想让它准确的话,你最好每隔几秒运行一次间隔函数 - 例如每10毫秒。
通常,我使用requestAnimationFrame
来显示计时器。
在这段代码中,我为每个用户使用相同的基准日期(我没有放任何10秒的冷静时间,因为我很懒,但你可以看到这个想法):
const startDate = 0; // Unix epoch
const interval = 90000; // 90 seconds
var now = Date.now();
var count = (now - startDate) / interval; // should have run {{count}} times since Unix epoch
var next = Math.ceil(count) * interval + startDate; // so the next time it should run is at timestamp {{next}}
function timer() => {
var now = Date.now();
distance = next - now;
if (now >= next) {
document.getElementById("image").src = "http://domain.tld/my-script.php?now=" + now; // the query string parameter is just to avoid browser caching the image
next += interval;
} else {
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60))
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
document.getElementById("countdown").innerHTML = ("0" + minutes).slice(-2) + ":" + ("0" + seconds).slice(-2);
}
}
var requestID = window.requestAnimationFame(timer);
// use window.cancelAnimationFrame(requestID) to cancel the timer
关于img.src
部分的说明:
这是服务器必需的唯一部分,您必须实现一个基于时间发送图像的脚本。我添加了一个queryString ?now=timestamp
来避免浏览器缓存图像,并且不使其保持最新,但服务器应该依靠它自己的日期/时间来显示图像,而不是用户发送的图像。
PS:请注意,我没有任何反对通过websocket左右持久连接的东西,但这对于仅定期显示计时器和图像听起来有点过分。如果您认为所有用户都已正确设置计算机的时间,并且如果某些计算机未同步,则不会有大问题,请使用此解决方案。否则,请转到websocket。