使用php的jquery或WebSocket OR node.js的中央控制计时器 [英] central control timer using php any jquery or WebSocket OR node.js
问题描述
我想用php和其他任何客户端脚本设计中央控制计时器.
I want to design central control timer with php and any other client side script.
基本要记住的事情是:计时器将在我的网站上可见，因此可能有数百名用户当前登录到我的网站.现在，只要管理员在同一点上重置计时器，它就应该反映到所有客户端计算机上.因此最基本的是需要保持同步对所有计算机计时.
the basically things that need to keep in mind is that : timer will be visible on my website,so may be hundred of user are currently logged in to my website. Now whenever admin reset the timer on the same point it should reflect to all the client machine. so basic is need to keep synchronous timing all the machine.
我做什么
我使用了客户端倒数计时器(( http://keith- wood.name/countdown.html ) 在后台，我每秒调用一次ajax以检查是否按下了重置. 但是问题是它的不能在所有客户端计算机上保持同步. 标记了两台机器之间的一段时间间隔.那么如何实现呢?
I have used client side countdown timer (http://keith-wood.name/countdown.html) and in background I am calling ajax on every second to check reset is pressed or not. but the problem is its not keeping synchronous in all the client machine. some time time gape between two machine is marked.so how to implement it?
代码:
$('#shortly').countdown({until: shortly,
onExpiry: liftOff, onTick: watchCountdown});
$('#shortlyStart').click(function() {
shortly = new Date();
shortly.setSeconds(shortly.getSeconds() + 5.5);
$('#shortly').countdown('option', {until: shortly});
});
function liftOff() {
alert('We have lift off!');
}
function watchCountdown(periods) {
$('#monitor').text('Just ' + periods[5] + ' minutes and ' +
periods[6] + ' seconds to go');
}
推荐答案
timerset.php.该文件为服务器端创建文件，以增加完成时间.
<?php
$year=htmlspecialchars($_GET['year']);
$month=htmlspecialchars($_GET['month']);
$day=htmlspecialchars($_GET['day']);
$hour=htmlspecialchars($_GET['hour']+2);//NBNBNB the +2 changes according to YOUR timezone.
$minute=htmlspecialchars($_GET['minute']);
$second=htmlspecialchars($_GET['second']);
$timestring=$year.":".$month.":".$day.":".$hour.":".$minute.":".$second;
echo $timestring."<br/>";
$filename = 'timerserver.php';
$file = fopen($filename, 'w');
rewind($file);
fwrite($file,"<?php\n");
fwrite($file, "header('Content-Type: text/event-stream');\n");
fwrite($file, "header('Cache-Control: no-cache');\n");
fwrite($file, "header('connection:keep-alive');\n");
fwrite($file, "\$starttime=\"$timestring\";\n");
fwrite($file, "echo \"data:{\$starttime}\\n\\n\";\n");
fwrite($file, "ob_flush();");
fwrite($file,"flush();");
fwrite($file,"sleep(3);");
fwrite($file,"?>\n");
fflush($file);
ftruncate($file, ftell($file));
fclose($file);
flush();
?>
timer.php.该文件接收完成时间并更新显示的时间.
timer.php. This file receives the finish time and updates the displayed time.
<html>
<header>
</header>
<body>
<script>
var source = new EventSource("timerserver.php");
var mystarttime="00:00";
source.onmessage = function(event)
{
mystarttime=event.data;
};
setInterval(function () {test(mystarttime)}, 1000);
function test(intime)
{
var timestring=intime;
var split = timestring.split(':');
var currentdate=new Date();
var finishtime=new Date(split[0],split[1]-1,split[2],split[3],split[4],split[5],0);
var timediff=new Date(finishtime-currentdate);
var year=timediff.getUTCFullYear();
var minutes=timediff.getUTCMinutes();
var seconds=timediff.getUTCSeconds();
var currentMinutes = ("0" + minutes).slice(-2);
var currentSeconds = ("0" + seconds).slice(-2);
if (year<1970)
{
document.getElementById("result").innerHTML="Time is up"
}
else
document.getElementById("result").innerHTML = currentMinutes+":"+currentSeconds;
}
</script>
<div id="result">Fetching time...</div>
</body>
</html>
timerform.php.一种更新时间的方法.
timerform.php . One method of updating the time.
<?php
echo "<b>NB : Time is in UTC Timezone</b><br/><hr/>";
date_default_timezone_set("UTC");
$currentdatetime=date("Y-m-d H:i:s");
$year=date("Y");
$month=date("m");
$day=date("j");
$hour=date("H");
$minute=date("i");
$second=0;
echo $currentdatetime."<hr/>";
?>
<form action="timerreset.php" method="GET">
Year <input name="year" value="<?php echo $year;?>"/><br/>
Month <input name="month" value="<?php echo $month;?>"/><br/>
Day <input name="day" value="<?php echo $day;?>"/><br/><br/>
Hour <input name="hour" value="<?php echo $hour;?>"/><br/>
Minute <input name="minute" value="<?php echo $minute+1;?>"/><br/>
Second <input name="second" value="<?php echo $second;?>"/><br/>
<input type="submit"/>
</form>
<?php
flush();
?>
NB ，使用UTC时间来满足不同时区的不同客户.
NB, Use UTC time to cater for different clients in different timezones.
我在我的本地主机(Windows)和SouthCoastHosting(Linux)上都可以使用上述代码，所以如果您有任何问题，请告诉我.
I have the above code working on both my localhost (Windows) and at SouthCoastHosting (Linux), so let me know if you have any problems.
要使用它，请打开一个指向southcoasthosting.com/timer/timerform.php的标签，并打开另一个指向southcoasthosting.com/timer/timer.php的标签.使用计时器表格更改结束时间，您将在timer.php中看到时间变化.由于EventSource的性质，在更新计时器之前最多始终会有3秒的延迟.根据客户端与服务器的连接速度，可能还会有更多延迟.我选择发送结束时间，以使客户端不会因为这些延迟而滞后.
To use it open a tab to southcoasthosting.com/timer/timerform.php and another tab to southcoasthosting.com/timer/timer.php. Use the timer form to change the finish time and you will see the time chage in timer.php. Due to the nature of EventSource there will always be at best a 3 second delay before updating the timer. Depending on your clients connection speed to the server there may be further delays. I chose to send a finish time so that the client will not lag due to these delays.
我希望一切都说得通.否则让我知道.
I hope that all makes sense. Let me know otherwise.
这篇关于使用php的jquery或WebSocket OR node.js的中央控制计时器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
