Question

我在Javascript中创建了一个小脚本，它应该向页面上连接的所有客户端显示一些信息，实际上每90秒显示一个图像。这个功能在我的电脑上工作得很好，但是一旦我必须重新加载页面，所有的过程都会重新启动。

我不知道是否有办法让服务器调用此功能，就像这样

＆＃13;

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

Answer 1

您需要通过websockets保持与服务器的持久连接，或者您可以轻松地从服务器发送变量，告知客户端下一次出现应该开始的秒数。

Answer 2

突发新闻：时间在世界各地以同样的方式传播:-D。

因此，只要用户在计算机上正确设置了时间，就不需要“持久连接”。您只需要为每个用户使用相同的基准日期。时间戳非常好，因为它们没有时区问题。

另请注意，最好不要使用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。

一个向客户发送信息的javascript函数？

2 个答案:

突发新闻：时间在世界各地以同样的方式传播:-D。

代码：