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

Question

我用 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);

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;
}

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

有谁知道这可以由服务器如何管理，所以每个人都有相同的计时器和同时显示的相同图片？

非常感谢您的帮助！

[编辑 1] 我在这个项目中使用的后端语言是 PHP

Answer 1

突发新闻：世界各地的时间都以同样的方式流逝：-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。

Answer 2

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