таймер центрального управления с использованием php любого jquery или WebSocket ИЛИ node.js

Я хочу разработать таймер центрального управления с помощью php и любого другого скрипта на стороне клиента.

введите описание изображения здесь

основные вещи, которые нужно иметь в виду, это то, что: таймер будет виден на моем веб-сайте, поэтому, возможно, сотни пользователей в настоящее время подключены к моему веб-сайту. Теперь всякий раз, когда админ сброс таймер на той же точке он должен отражать на всей клиентской машине. так важно сохранить синхронный все время машины.

Что я сделал

Я использовал сторону клиента Таймер обратного отсчета (http://keith-wood.name/countdown.html)
и в фоновом режиме я вызывая ajax каждую секунду, чтобы проверить, нажата перезагрузка или нет.
но проблема в том, не поддерживает синхронность на всех клиентских компьютерах.
отмечается промежуток времени между двумя машинами. Так как это реализовать?

код:

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

3

Решение

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. Этот файл получает время окончания и обновляет отображаемое время.

<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. Один из способов обновления времени.

<?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 для обслуживания разных клиентов в разных часовых поясах.

У меня есть приведенный выше код, работающий как на моем локальном хосте (Windows), так и на SouthCoastHosting (Linux), поэтому дайте мне знать, если у вас возникнут проблемы.

Чтобы использовать его, откройте вкладку southcoasthosting.com/timer/timerform.php и другую вкладку southcoasthosting.com/timer/timer.php. Используйте форму таймера, чтобы изменить время окончания, и вы увидите изменение времени в timer.php. Из-за природы EventSource всегда будет в лучшем случае задержка в 3 секунды перед обновлением таймера. В зависимости от скорости подключения ваших клиентов к серверу возможны дальнейшие задержки. Я решил отправить время окончания, чтобы клиент не отставал из-за этих задержек.

Я надеюсь, что все имеет смысл. Дай мне знать иначе.

1

Другие решения

Попробуйте вместо этого, используя серверные события HTML5.

<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');

$reset = "true";
echo "data: reset: {$reset}\n\n";
flush();
?>

на сервере, и

<script>
var source = new EventSource("gsim_server.php");
source.onmessage = function(event)
{
document.getElementById("result").innerHTML = event.data;
};
</script>
<div id="result">test</div>

на клиенте (при условии, что файл сервера находится в той же папке и называется «gsim_server.php». Это просто базовый пример, но вы можете использовать переданное значение, чтобы решить, сбросить или нет). Надеюсь, это поможет.

1

По вопросам рекламы ammmcru@yandex.ru
Adblock
detector