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

时间:2017-04-18 14:41:26

标签: javascript html random server clients

我在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;
&#13;
&#13;

有谁知道服务器如何管理,所以每个人都有相同的计时器,同时显示相同的图片?

非常感谢你的帮助!

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

2 个答案:

答案 0 :(得分:0)

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

答案 1 :(得分:0)

突发新闻:时间在世界各地以同样的方式传播:-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。