How to update data without auto refresh, through PHP and Ajax functions?

0
Hello, I'm a beginner in PHP and the web world and I'm doing a project with hardware (NodeMCU, MPU6050, LM35) where the data read by the sensors is being sent to a server, and on the client side the data is being presented in a table and a graph for temperature.

I have the following functions:

if(!function_exists('returnGraficoData_Hora')){
  function returnGraficoData_Hora(){  
    include('conexao.php');
    $sql = "SELECT TIME(data_hora) AS data_hora FROM tbdados ORDER 
    BY id DESC LIMIT 4;";
    $stmt = $PDO->prepare($sql);
    $stmt->execute();
    $chartData_hora = [];

    while($linha = $stmt->fetch(PDO::FETCH_ASSOC)){
      $chartData_hora[] = "'".$linha['data_hora']."'";
    }
    echo join(",",array_reverse($chartData_hora));
  }
}

if(!function_exists('returnGraficoTemp')){
  function returnGraficoTemp(){  
    include('conexao.php');
    $sql = "SELECT Tlm35 FROM tbdados ORDER BY id DESC LIMIT 4;";
    $stmt = $PDO->prepare($sql);
    $stmt->execute();
    $chartTemp = [];

    while($linha = $stmt->fetch(PDO::FETCH_ASSOC)){
      $chartTemp[] = "'".$linha['Tlm35']."'";
    }
    echo join(",",array_reverse($chartTemp));
  }
}

if(!function_exists('tabelaDados')){
  function tabelaDados(){
    include('conexao.php');
    $sql = "SELECT * FROM tbdados ORDER BY id DESC LIMIT 15;";
    $stmt = $PDO->prepare($sql);
    $stmt->execute();

    while($linha = $stmt->fetch(PDO::FETCH_OBJ)){
      $timestamp = strtotime($linha->data_hora);
      $dataTabela = date('d/m/Y H:i:s', $timestamp);
      echo "<tr>";
      echo "<td id='data'>" . $dataTabela . "</td>";
      echo "<td>" . $linha->Ax . "</td>";
      echo "<td>" . $linha->Ay . "</td>";
      echo "<td>" . $linha->Ax . "</td>";
      echo "<td>" . $linha->Gx . "</td>";
      echo "<td>" . $linha->Gy . "</td>";
      echo "<td>" . $linha->Gz . "</td>";
      echo "</tr>";
    }
  }
}

Where the data appears:

<div class="table-responsive">
  <table class="table table-striped table-sm">
    <thead>
      <tr>
        <th>Data/Hora</th>
        <th>Ax</th>
        <th>Ay</th>
        <th>Az</th>
        <th>Gx</th>
        <th>Gy</th>
        <th>Gz</th>
      </tr>
    </thead>
    <tbody>
      <?php 
        include('../dao/leitura.php'); 
        tabelaDados();
      ?>
    </tbody>
  </table>
</div>

<script src="../js/Chart.bundle.min.js"></script>
<script src="../js/utils.js"></script>

<script>
var config = {
    type: 'line',
    data: {
      labels: [<?php 
        include('../dao/leitura.php'); 
        returnGraficoData_Hora();
      ?>],
      datasets: [{
        label: 'Temperatura',
        backgroundColor: window.chartColors.blue,
        borderColor: window.chartColors.blue,
        data: [<?php 
          include('../dao/leitura.php'); 
          returnGraficoTemp();
        ?>],
        fill: false,
      }]
    },
    options: {
      responsive: true,
      title: {
        display: false
      },
      scales: {
        yAxes: [{
          ticks: {
            min: 0,
            max: 50
          }
        }]
      }
    }
};

window.onload = function() {
    var ctx = document.getElementById('grafico').getContext('2d');
    window.myLine = new Chart(ctx, config);
};
</script>

I tested with Ajax:

    if(!function_exists('teste')){
      function teste(){
       include('conexao.php');
       $stmt = $PDO->prepare('SELECT Gx FROM tbdados ORDER BY RAND() 
       LIMIT 1');
       if ($stmt->execute()){
          $teste = $stmt->fetchObject();
          echo json_encode($teste);
       }
      }
    }

    if(isset($_POST['action']) && !empty($_POST['action'])) {
      $action = $_POST['action'];
      switch($action) {
      case 'test' : teste();break;
     }
    }

JS:

   function atualizar(){
    $.ajax({ url: '../dao/leitura.php',
     data: {action: 'test'},
     type: 'post',
     dataType: "json",
     success: function(teste) {
       $('#teste').html('<p>' + teste.Gx + '</p>');
     }
    });
   }

   setInterval("atualizar()", 100);
   $(function() {
     atualizar();
   });

Data is entering the bank every 7 seconds, I do not want real-time data, I just want to update the data without using the auto refresh and as new data is entered into the database. How do I do this using the functions I have there? Thank you.

    
asked by anonymous 18.07.2018 / 14:33

1 answer

-1

If you have a defined amount of time to refresh you can still use setInterval , otherwise you will only be able to get a callback from the database if it is a Realtime Database, such as Firebase. In any case, to update any data on the front via back triggers you will need websockets.

If the setInterval is still the output you think fits you, you can change the second argument of the function, which corresponds to the time (in milliseconds):

setInterval(atualizar,7000);
    
18.07.2018 / 14:57