1

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.

1 respuesta 1

2

He resuelto el problema, aprendí sobre ejecución asíncrona con generadores, workers, promesas y corrutinas; totalmente un mundo que desconocía. Con esa idea de programación, logré enviar y recibir las peticiones al servidor en orden.

La solución es la siguiente:

function CheckPingAjax(value, callback) {
    console.log('START execution with value =', value);
    var ip_host = respuesta.data.hosts[value].ip_host;
    var parametros = {"ip_addr" : ip_host}

    NProgress.start();

    $.ajax({
        url: "app/Desktop/Root/php/gn.CheckPing.php",
        type: "post",
        data: parametros,
        success: function(data){
            NProgress.done();
            callback(value, {ip_host: ip_host, data: data});
        }
    });
}

function nuevallamada(){

    var max_host = respuesta.data.count;
    var i_host = 0;

    NProgress.configure({parent: '.host' + respuesta.data.hosts[i_host].ip_host.split(".").slice(0,4).join("")});
    CheckPingAjax(i_host, function callback(value, result) {


        console.log('END execution with value =', value, 'and result =', result.ip_host, ' and status: ', result.data);
        if (result.data == "1"){
            var request = ".host" + respuesta.data.hosts[i_host].ip_host.split(".").slice(0,4).join("");
            $(request).css("border-top", "3px solid blue");
        }

        if (i_host === max_host-1) {
            console.log('COMPLETED Principal');
            i_host = 0;
            NProgress.done();
        } else {
            // NProgress.start();
            if (i_host < max_host-1){
                NProgress.configure({parent: '.host' + respuesta.data.hosts[++i_host].ip_host.split(".").slice(0,4).join("")});
                CheckPingAjax(i_host, callback);
            }
        }
    });
}
1
  • Hola Jerson! me alegra que lo solucionaras. Por favor, explica un poco el funcionamiento de tu respuesta siguiendo Cómo responder. Y recuerda marcarla como aceptada. Un saludo
    – lois6b
    Commented el 19 abr. 2018 a las 15:05

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.