Estoy tratando de crear un sistema de verificación de dispositivos conectados en red por medio de ICMP
(ping). Todo el trabajo con respecto a la verificación lo hace PHP
(Funcional). Inicialmente lo que hago con la aplicación es mostrar los registros que simulan ser los dispositivos (dirección ip). Luego con un elemento tipo button
capturo el evento click
y hago una solicitud ajax
, que manda a traer los registros de dispositivos del gestor de base de datos; estos datos los extraigo en un objeto JSON
.
Código PHP (gn.TestingShowUsers.php
):
<?php
@session_start();
#Importar constantes.
include (@$_SESSION['getConsts']);
include (PF_CONNECT_SERVER);
include (PF_SSH);
$CN = new ConnectSSH();
$CN->ConnectDB($H, $U, $P, $D, $X);
$R = $CN->getHostWithOutInterfaces();
#Esto es lo importante...
$jsondata = array();
if ($R->num_rows > 0){
$jsondata["success"] = true;
$jsondata["data"]["message"] = sprintf("Se han encontrado %d registros", $R->num_rows);
$jsondata["data"]["hosts"] = array();
while ($row = $R->fetch_object())
$jsondata["data"]["hosts"][] = $row;
} else {
$jsondata["success"] = false;
$jsondata["data"] = array(
"message" => "No se encontraron resultados"
);
}
header('Content-type: application/json; charset=utf-8');
echo json_encode($jsondata, JSON_FORCE_OBJECT);
exit();
?>
Este código utiliza un par de clases para que todo funcione, lo muestro para que observen la estructura del JSON
. La petición Ajax
es la siguiente:
var respuesta;
$("#TestingShowUsers").click(function(){
$.ajax({
url: "app/Desktop/Root/php/gn.TestingShowUsers.php",
type: "post",
dataType: "json",
})
.done(function(response) {
respuesta = response;
})
.fail(function( jqXHR, textStatus, errorThrown ) {
if ( console && console.log ) {
console.log( "La solicitud a fallado: " + textStatus);
}
})
.then(function(){
if (respuesta.success){
$.each(respuesta.data.hosts, function( key, value ) {
//recorremos los valores de cada dispositivo
$.each( value, function ( userkey, uservalue) {
if (userkey == "ip_host"){
//Este lo ocupo para seleccione a una clase que ya está automatizada para aplicarle cambios.
var ClassParent = uservalue.split(".").slice(0,4).join("");
var parametros = {
"ip_addr" : uservalue,
}
$.ajax({
url: "app/Desktop/Root/php/gn.CheckPing.php",
type: "post",
data: parametros,
beforeSend: function() {
//Código para que el contenedor con la clase automatizada, cargue un loader antes de la ejecución de la petición.
NProgress.configure({ parent: '.host' + ClassParent });
NProgress.start();
},
success: function(data){
//Que el proceso del loader, deje de continuar porque ya está verificado.
NProgress.done();
}
});
}
});
});
}
});
});
Script (gn.CheckPing.php
):
<?php
@session_start();
#Importar constantes.
include (@$_SESSION['getConsts']);
include (PD_DESKTOP_ROOT_PHP_CLASS."/gn.class.ping.php");
$CD = new CheckDevice();
#El retorno es 1 o 0. Aunque no tiene importancia porque en JS de momento no hago la verificación.
echo ($CD->ping($_POST['ip_addr'])) ? "1" : "0";
?>
El la solicitud al script: gn.CheckPing.php
no se manda a llamar después del .then.
Pero si luego doy otro click en el botón que vuelve a hacer las solicitudes, entonces sí es mandado a llamar, en este caso en el JSON
he mostrado 3 registros, lo cual si manda a ejecutar 3 veces con sus respectivos parámetros, ahí todo bien.
Problema:
El código para cargar el loader
, se ejecuta asíncronamente, lo cual corre de una sola vez sin esperar la respuesta de las solicitudes, ya que antes de la solicitud necesito mostrar el loader
encima del contenedor que representa al dispositivo, luego de haber hecho la verificación, entonces pasaré al siguiente registro del objeto JSON
para que haga lo mismo con los demás. Pero el ciclo $.each
pasa de un solo toque, no espera que devuelva un resultado es por esa razón, cuando necesito que el primer contenedor del dispositivo presente el loader
, lo está presentando en el último contenedor porque ya pasó por todos sin haber verificado.