[CODE] get ping results asynchronously for faster page loading
This commit is contained in:
parent
8446cfe206
commit
0115ea37d2
82
index.php
82
index.php
|
@ -10,8 +10,8 @@ if (isset($_GET['wake'])) {
|
||||||
$return = shell_exec('wakeonlan '.$_GET['wake']);
|
$return = shell_exec('wakeonlan '.$_GET['wake']);
|
||||||
}
|
}
|
||||||
|
|
||||||
$clients = ["nuc6i5-host"=>"b8:ae:ed:ec:18:f7",
|
$clients = ["nuc6i5-host.fra80"=>"b8:ae:ed:ec:18:f7",
|
||||||
"magrathea" =>"60:03:08:9c:25:6a"];
|
"magrathea.fra80" =>"60:03:08:9c:25:6a"];
|
||||||
?>
|
?>
|
||||||
|
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
|
@ -24,13 +24,17 @@ $clients = ["nuc6i5-host"=>"b8:ae:ed:ec:18:f7",
|
||||||
body {
|
body {
|
||||||
max-width: 500px;
|
max-width: 500px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
padding: 0 5px;
|
padding: 0 10px;
|
||||||
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
|
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
|
||||||
}
|
}
|
||||||
|
body > h1:first-child { margin-top: 0.3em; }
|
||||||
small {
|
small {
|
||||||
font-size: 0.7em;
|
font-size: 0.7em;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
|
ul {
|
||||||
|
padding-left: 20px;
|
||||||
|
}
|
||||||
li {
|
li {
|
||||||
margin-bottom: 1.5em;
|
margin-bottom: 1.5em;
|
||||||
}
|
}
|
||||||
|
@ -38,6 +42,16 @@ $clients = ["nuc6i5-host"=>"b8:ae:ed:ec:18:f7",
|
||||||
color: blue;
|
color: blue;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
div.info {
|
||||||
|
margin: -10px; padding: 10px;
|
||||||
|
background-color: #e2e2e2;
|
||||||
|
border: 1px solid #787878;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
div.info > p:first-child {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
.red { color: red; }
|
.red { color: red; }
|
||||||
.green { color: green; }
|
.green { color: green; }
|
||||||
</style>
|
</style>
|
||||||
|
@ -45,24 +59,58 @@ $clients = ["nuc6i5-host"=>"b8:ae:ed:ec:18:f7",
|
||||||
<body>
|
<body>
|
||||||
<h1>Wake On LAN Service</h1>
|
<h1>Wake On LAN Service</h1>
|
||||||
<?php if (isset($return)) : ?>
|
<?php if (isset($return)) : ?>
|
||||||
<p>The command returned:</p>
|
<div class="info">
|
||||||
<pre><?php echo $return; ?></pre>
|
<p>The command returned:</p>
|
||||||
<a href="index.php">OK</a>
|
<pre><?php echo $return; ?></pre>
|
||||||
|
<a href="index.php">OK</a>
|
||||||
|
</div>
|
||||||
<?php endif; ?>
|
<?php endif; ?>
|
||||||
<p>I can wake up the following clients:</p>
|
<p>I can try to wake up the following clients for you:</p>
|
||||||
<ul>
|
<ul id="clients">
|
||||||
<?php foreach ($clients as $name=>$mac) : ?>
|
<?php foreach ($clients as $name=>$mac) : ?>
|
||||||
<li>
|
<li data="<?php echo $name ?>">
|
||||||
<a href="?wake=<?php echo $mac ?>"><?php echo $name ?> (<?php echo $mac ?>)</a>
|
<a href="?wake=<?php echo $mac ?>">wake up</a> <?php echo $name ?> (<?php echo $mac ?>)
|
||||||
<?php $foo = array(); $status; exec("ping -c 1 ".$name.".fra80", $foo, $status); ?>
|
|
||||||
<?php if (!$status) : ?>
|
|
||||||
<span class="green">•</span> online
|
|
||||||
<?php else : ?>
|
|
||||||
<span class="red">•</span> offline
|
|
||||||
<?php endif; ?>
|
|
||||||
</li>
|
</li>
|
||||||
<?php endforeach; ?>
|
<?php endforeach; ?>
|
||||||
</ul>
|
</ul>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
<script type="text/javascript">
|
||||||
|
clients = document.getElementById("clients").children;
|
||||||
|
for (var i = 0; i < clients.length; i++) {
|
||||||
|
element = clients[i];
|
||||||
|
hostname = clients[i].attributes['data'].value;
|
||||||
|
|
||||||
|
console.log("ping: " + hostname);
|
||||||
|
asyncRequest(element, hostname);
|
||||||
|
}
|
||||||
|
|
||||||
|
function asyncRequest(element, hostname) {
|
||||||
|
var xhttp = new XMLHttpRequest();
|
||||||
|
xhttp.onreadystatechange = function(){
|
||||||
|
if (this.readyState == 4) {
|
||||||
|
if (this.status == 200) {
|
||||||
|
callBack(element, xhttp.responseText, this.status);
|
||||||
|
} else {
|
||||||
|
console.log("Error requesting ping: " + this.status + ", " + xhttp.responseText);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
xhttp.open("GET", "ping.php?hostname=" + hostname, true);
|
||||||
|
xhttp.send();
|
||||||
|
|
||||||
|
function callBack(element, response, statusCode) {
|
||||||
|
var node = document.createElement("span");
|
||||||
|
node.innerHTML = "•";
|
||||||
|
if (xhttp.responseText.substring(0, 1) == "1") {
|
||||||
|
node.className = "green";
|
||||||
|
element.appendChild(node);
|
||||||
|
element.append(" online");
|
||||||
|
} else {
|
||||||
|
node.className = "red";
|
||||||
|
element.appendChild(node);
|
||||||
|
element.append(" offline");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</html>
|
||||||
|
|
20
ping.php
Normal file
20
ping.php
Normal file
|
@ -0,0 +1,20 @@
|
||||||
|
<?php
|
||||||
|
// -------------------------------------------
|
||||||
|
// Wake On LAN Webclient -- on private LAN
|
||||||
|
|
||||||
|
// copyright: Jannik Beyerstedt | https://jannikbeyerstedt.de
|
||||||
|
// license: http://www.gnu.org/licenses/gpl-3.0.txt GPLv3 License
|
||||||
|
// -------------------------------------------
|
||||||
|
|
||||||
|
if (isset($_GET['hostname'])) {
|
||||||
|
$foo = array(); $status;
|
||||||
|
exec("ping -c 1 ".$_GET['hostname'], $foo, $status);
|
||||||
|
if (!$status) {
|
||||||
|
echo "1 online";
|
||||||
|
} else {
|
||||||
|
echo "0 offline";
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
header("HTTP/1.1 400 Bad Request");
|
||||||
|
echo "ERROR: invalid request";
|
||||||
|
}
|
Reference in a new issue