可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

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.

What I did

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?

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

回答1:

timerset.php. This file creates the file for the server side to push the finish 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 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 . 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, Use UTC time to cater for different clients in different timezones.

I have the above code working on both my localhost (Windows) and at SouthCoastHosting (Linux), so let me know if you have any problems.

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.

回答2:

Try this instead, using HTML5's server-side-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 (asuming the server file is in the same folder and is called 'gsim_server.php'. This is just a basic example, but you could use the value passed to decide wether to reset or not. Hope that helps.