central control timer using php any jquery or WebS

I want to design central control timer with php and any other client side script.

enter image description here

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

标签： php jquery node.js websocket real-time

2条回答

够拽才男人

2楼-- · 2020-07-22 19:59

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.

0人赞添加讨论(0) 举报

叛逆

3楼-- · 2020-07-22 20:13

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.

0人赞添加讨论(0) 举报

central control timer using php any jquery or WebS

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间