Как динамически обновлять цвет div, каждая функция php повторно запускается на странице html
Я пытаюсь создать div, который будет показывать статус сервера зеленым или красным цветом фона. Цвет фона должен измениться, когда функция php устанавливает переменную $ status в зеленый или красный цвет, который будет использоваться в div для установки параметра background-color! Это работает, когда я перезагружаю веб-страницу, но я хотел бы запускать функцию php через определенные промежутки времени и автоматически обновлять цвет поля div без перезагрузки веб-страницы.
Посмотрите, что у меня есть до сих пор:
<!DOCTYPE HTML>
<html>
<head>
<h1>Measurements - graphs</h1>
<?php
function getStatus() {
$status = "#008000";
$latestFile = '/my/web/logs/logging_rotation.out';
if (file_exists($latestFile)) {
$fileTime = filectime($latestFile);
$now = microtime(true);
$timediff = $now - $fileTime;
}
if ($timediff < 60) {
$status = "#008000";
} else {
$status = "#FF0000";
}
return $status;
}
?>
<div style = "height: 20px; background-color: <?php echo getStatus()?>;">
Server status
</div>
</head>
<body>
</body>
</html>
Итак, что мне сейчас не хватает, так это способ запускать php getStatus с интервалами, который должен обновлять цвет фона и должен обновлять поле div. Есть способ сделать это?
После нескольких первых предложений я изменил свой код на:
<script>
console.info('Starting doSomething'); // test printout
async function doSomething() {
const url = "status.php";
await fetch(
url,
{
method: "POST",
body: new URLSearchParams("function=serverStatus")
}
)
.then(response => response.text())
.then((response) => {
console.info(response); // printout response
document.getElementById('serverStatus').style.backgroundColor = response; //set the response from the php function as the background color
})
.catch(err => console.info('s/g went wrong', err));
}
</script>
<script>
setInterval(doSomething, 1000);
</script>
<div id = "serverStatus" style = "height: 20px;">Server status</div>
Но похоже, что doSomething() не запускается, потому что я не вижу распечаток console.info!
Вся указанная выше страница сохраняется как mypage.php, и я тестирую это двумя способами:
- перезагрузите mypage.php в браузере.
- выполнить mypage.php через команду php:
php mypage.php > test.html
В обоих случаях я не получаю распечаток в doSomething().
Это правильный способ тестирования PHP-страниц такого типа?
Обновите после нескольких попыток, и теперь он работает, в status.php никаких изменений, проблема заключалась в пути к status.php:
<script>
async function doSomething() {
const url = "/status.php"; // this is the correct path
await fetch(
url,
{
method: "POST",
body: new URLSearchParams("function=serverStatus")
}
)
.then(response => response.text())
.then((response) => {
console.info(response);
document.getElementById('serverStatus').style.backgroundColor = response; //set the response from the php function as the background color
})
.catch(err => console.info('s/g went wrong', err));
};
setInterval('doSomething()', 1000); // correct call of doSomething()
</script>
<h2>Measurements - graphs</h2>
<div id = "serverStatus" style = "height: 20px;">Server status</div>
И ответы ниже, и решения работают! Что касается второго решения, я изменил его на:
<script>
setInterval(function() {
fetch('/status.php').then(response=>response.text()).then(function(text){
document.getElementById('serverStatus').style.backgroundColor = text;
})
}, 1000) // in milliseconds
</script>
<h2>Measurements - graphs</h2>
<div id = "serverStatus" style = "height: 20px;">Server status</div>
status.php:
<?php
$status = "#008000";
$latestFile = '/my/web/logs/logging_rotation.out';
if (file_exists($latestFile)) {
$fileTime = filectime($latestFile);
$now = microtime(true);
$timediff = $now - $fileTime;
}
if ($timediff < 60) {
$status = "#008000";
} else {
$status = "#FF0000";
}
exit($status); //return the result to the JS
?>
Мне нравятся оба решения, потому что в одном используется асинхронное программирование, а в другом очень компактно! Я предполагаю, что в моем случае асинхронное программирование дает больше знаний, чем на самом деле для моего веб-сайта, и просто проверяет, работает ли мой сервер, проверяя, не превышает ли прошедшее время последней модификации файла журнала 60 секунд.
Еще раз спасибо
Ответы 2
Вам понадобятся 2 функции javascript.
- setTimeout ()
https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval
Это вызовет функцию с интервалом - fetch ()
https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API
Этот сделать http-вызов на сервер
Пример
<script>
var myDiv = document.getElementById('serverStatus');
setInterval(function() {
fetch('status.php').then(response=>response.text()).then(function(text){
myDiv.style.backgroundColor = text;
})
}, 1000) // in milliseconds
</script>
или если вы любите приключения:
const myDiv = document.getElementById('serverStatus');
setInterval(async () =>
myDiv.style.backgroundColor = await (await fetch('status.php')).text(),
1000 // ms
);
ваш status.php должен только вернуть цветовой код
На самом деле у меня такая же проблема с этим решением, как и у Daniel82. Похоже, что status.php никогда не запускается !?
HTML в вашем примере не работает. Это может быть причиной того, что javascript не выполняется. Тег <head> предназначен только для заголовков, вы должны добавить структуру html в тег <body>. Убедитесь, что тег <script> находится непосредственно перед закрытием тела (</body>). Затем нажмите F12 в браузере, чтобы открыть панель разработчика, и проверьте вкладку «сеть», чтобы увидеть, поступают ли запросы к «status.php».
Я запустил его, это был путь к status.php не правильный, ему нужен был /. Я обновил свой вопрос.
Я рад, что у тебя все получилось. Не используйте async, потому что setTimeout() не использует возвращаемое значение обратного вызова. Вы можете дождаться функций fetch() и text(), чтобы избавиться от блоков then(). Добавлю пример. См. MDN, чтобы узнать больше: developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchrono нас /…
Вы можете сделать это с помощью javascript.
Добавьте идентификатор к вашему <div>, скажем, <div id = "serverStatus" style = "height: 20px; background-color: <?php echo getStatus()?>;">, а затем добавьте временную функцию в раздел <script> внизу:
<script>
setInterval(doSomething, 5000); // Time in milliseconds
</script>
Затем создайте js для вызова функции PHP и обновления цвета фона:
<script>
async function doSomething() {
await fetch('myPhpFile.php', {
method: "POST",
body: new URLSearchParams("function=serverStatus")
})
.then(response => response.text())
.then((response) => {
document.getElementById('serverStatus').style.backgroundColor = response; //set the response from the php function as the background color
})
.catch(err => console.info('s/g went wrong', err));
}
</script>
Это будет использовать Fetch API для запуска функции в файле PHP с именем «myPhpFile.php». Я сформулировал это, как показано ниже, используя ваш PHP сверху и добавляя только проверки, чтобы убедиться, что это функция, которую вы вызываете:
<?php
If(isset($_POST['function'])) { //checks that the parameter function is set
if ($_POST['function']= = "serverStatus") { //checks that this is the function asked for
$status = "#008000";
$latestFile = '/my/web/logs/logging_rotation.out';
if (file_exists($latestFile)) {
$fileTime = filectime($latestFile);
$now = microtime(true);
$timediff = $now - $fileTime;
}
if ($timediff < 60) {
$status = "#008000";
} else {
$status = "#FF0000";
}
exit($status); //return the result to the JS
}
}
?>
Замечу, что я не тестировал функцию PHP, которую вы используете для получения времени файла, но используется javascript, а также базовая модель php.
Кажется, на самом деле прямолинейно, но я использовал его, и похоже, что он никогда не выполняет myPhpFile.php, а <div> остается с цветом фона по умолчанию (белый). Один вопрос, в части <div> я что-то упускаю? А пока у меня <div id = "serverStatus" style = "height: 20px">Server status</div>. Я удалил php-часть <?php echo getStatus()?>, так как теперь она должна заменить doSomething(), правильно !?
Мне твой div нравится. Да, doSomething теперь берет на себя функцию PHP. Проверьте, находится ли «myPhpFile.php» в том же каталоге, что и файл, содержащий страницу. Если нет, измените await fetch('myPhpFile.php', так как это должен быть адрес, т.е. если myPhpFile.php находится в подпапке, это необходимо отразить здесь. Вы можете вставить console.info(response) непосредственно перед строкой document.getElementById('serverStatus').style.backgroundColor = response;, чтобы посмотреть, получаете ли вы какой-либо ответ от файла.
Я заметил, что он не выполняет функцию doSomething(). Я поместил console.info в несколько мест в начале и в том месте, которое вы предложили, и ни одна из распечаток console.info не распечатана! V Я обновил свой код до сих пор.
Самый простой подход - AJAX. См. руководство для начинающих или, возможно, версия jQuery. Если вам нужно запускать это через довольно короткие промежутки времени, вы можете вместо этого исследовать веб-сайты.