Central control timer using php any jquery or WebSocket OR node.js
I want to create a central control timer with php and any other client side script.
basically the things to keep in mind are: the timer will be visible on my website, so there may be hundreds of users currently logged into my site. Now when admin reset the timer at the same point, it should reflect the entire client computer. therefore, the main thing is the need to maintain synchronous timing of the entire machine.
What I've done
I have used a client side countdown timer ( http://keith-wood.name/countdown.html ) and in the background I call ajax every second to push reset or not . but the problem is that it does not maintain sync on all client machines . some time is played out between two machines. Also how to implement it?
code:
$('#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');
}
source to share
timerset.php. This file creates a file for the server side to push the end time.
<?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. This file gets the end 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. One way to update 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 . Use UTC time to serve different customers in different time zones.
I have the above code working on both my localhost (Windows) and SouthCoastHosting (Linux), so let me know if you run into problems.
To use it, go to southcoasthosting.com/timer/timerform.php and another tab at southcoasthosting.com/timer/timer.php. Use the timer form to change the end time and you will see the chage time in timer.php. Due to the nature of the EventSource, there will always be at best a 3 second delay before the timer is updated. There may be additional delays depending on the speed of your client's connection to the server. I decided to post the end time so that the client would keep up with these delays.
I hope everything makes sense. Let me know otherwise.
source to share
Try this instead using HTML5 Server Events.
<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
$reset = "true";
echo "data: reset: {$reset}\n\n";
flush();
?>
on the server and
<script>
var source = new EventSource("gsim_server.php");
source.onmessage = function(event)
{
document.getElementById("result").innerHTML = event.data;
};
</script>
<div id="result">test</div>
on the client (assuming the server file is in the same folder and called "gsim_server.php". This is just a basic example, but you can use the value passed to decide whether to reset or not. which helps.
source to share