Dynamic return with JavaScript fetch and PHP

Question

I have a PHP code that prints a message every second. I would like to take this return and print it via JavaScript every second. The JavaScript code sends a request for my PHP code to process, below I list my JavaScript code, if any please help me I will be grateful, I thank you all for your attention

async function enviarPushAppAss() {
        enviarPushAppAssociado.innerHTML = 'Enviando...';
    
        // let form = document.querySelector('#frmSendPushAppAss');
        let data = new FormData();
    
        let titulo = document.querySelectorAll('#titulo')[0].value;
        let desc = document.querySelectorAll('#descricao')[0].value;
        let uf = document.querySelectorAll('#uf')[0].value;
        let sexo = document.querySelectorAll('#sexo')[0].value;
        let img = document.querySelectorAll('#imagem')[0].files[0];
        let men = document.querySelectorAll('#mensagem')[0].value;
        let dos = document.querySelectorAll('.dosContent')[0];
    
        data.append('titulo', titulo);
        data.append('descricao', desc);
        data.append('uf', uf);
        data.append('sexo', sexo);
        data.append('imagem', img);
        data.append('mensagem', men);
    
        let requestOptions = {
            method: 'POST',
            headers: myHeadersFormData,
            body: data,
            redirect: 'follow',
        };
    
        await fetch(BASE_URL + 'enviarPush/', requestOptions)
            .then((response) => response.text())
            .then((result) => {
                console.log(result)
            })
            .catch((error) => console.log('error', error));
}

Meu PHP

public function enviarPush() {
$titulo     = $_POST['titulo'];
      $descricao  = $_POST['descricao'];
      $uf         = $_POST['uf'];
      $sexo       = $_POST['sexo'];
      $mensagem   = $_POST['mensagem'];

      try {

        $conn = new ConexaoMysql('app');
        $associados = $conn->dbCon()->prepare(" SELECT 
                                          a.idAssociado, 
                                          a.nome, 
                                          a.tokenPush 
                                        FROM 
                                          associado a
                                        WHERE 
                                            a.tokenPush <> ''
                                        AND a.estado IN ($uf)
                                        AND a.sexo IN ($sexo)
                                        AND a.idAssociado NOT IN (  SELECT 
                                                                      anp.idAssociado 
                                                                    FROM 
                                                                      appNotificationPush AS anp
                                                                    WHERE 
                                                                      anp.titulo = '$titulo'
                                                                  )
                                        ORDER BY 
                                          nome ASC");
          if( $associados->execute() ) {
            $associados = $associados->fetchAll(PDO::FETCH_CLASS);

            echo 'Total de registros para envio: ' . count($associados) . ".\n";
            foreach ($associados as $key => $value) {
              echo $value->nome;
              ob_flush();
              flush();
              sleep(1);
            }
          }
      } catch (PDOException $e) {
        die($e);
      }  
}

Your question is not very clear. Do you want to make a fetch call to PHP file every second and print response inside "enviarPushAppAssociado"? — AbsoluteBeginner, Oct 15 '20 at 20:22
i want to get the php return and print the answer inside dos.innerHTML but according to Barma's answer it is not possible, is there any way to do what i need? — Jonathan Brambati, Oct 15 '20 at 20:25
The PHP script should just return one result each time it's called. You can use `setInterval()` to perform the fetch periodically. — Barmar, Oct 15 '20 at 20:25
But the return from php is a result of mysql and I use fetch to send the query parameter — Jonathan Brambati, Oct 15 '20 at 20:27
As Barmar said, you may want to use `setInterval()` to perform the fetch every second (in your JS code). — AbsoluteBeginner, Oct 15 '20 at 20:29
my script php foreach ($associados as $key => $value) { echo $value->nome; ob_flush(); flush(); sleep(1); } — Jonathan Brambati, Oct 15 '20 at 20:29

score 0 · Answer 1 · answered Oct 15 '20 at 20:32

You could use setTimeout and recursion. It will call itself after it got the response from your server.

async function enviarPushAppAss() {
        enviarPushAppAssociado.innerHTML = 'Enviando...';
    
        // let form = document.querySelector('#frmSendPushAppAss');
        let data = new FormData();
    
        let titulo = document.querySelectorAll('#titulo')[0].value;
        let desc = document.querySelectorAll('#descricao')[0].value;
        let uf = document.querySelectorAll('#uf')[0].value;
        let sexo = document.querySelectorAll('#sexo')[0].value;
        let img = document.querySelectorAll('#imagem')[0].files[0];
        let men = document.querySelectorAll('#mensagem')[0].value;
        let dos = document.querySelectorAll('.dosContent')[0];
    
        data.append('titulo', titulo);
        data.append('descricao', desc);
        data.append('uf', uf);
        data.append('sexo', sexo);
        data.append('imagem', img);
        data.append('mensagem', men);
    
        let requestOptions = {
            method: 'POST',
            headers: myHeadersFormData,
            body: data,
            redirect: 'follow',
        };
    
        enviarPush(requestOptions);
}


async function enviarPush(requestOptions)
{
    setTimeout(() => {
        await fetch(BASE_URL + 'enviarPush/', requestOptions)
            .then((response) => response.text())
            .then((result) => {
                console.log(result);
                enviarPush();
            })
            .catch((error) => console.log('error', error));
    }, 1000);
}

The problem is that I can't keep resending the request because mysql returns 55 thousand records — Jonathan Brambati, Oct 15 '20 at 20:34
Then I believe you can't get 55 thousand records in a second. So just send another request after it finishes. — Ryan Le, Oct 15 '20 at 20:39
I get the records in mysql example the 55 thousand, then I do a foreach and I print these results, these results that I would like to obtain with each impression — Jonathan Brambati, Oct 15 '20 at 20:42
I got your idea. Then this could help. https://stackoverflow.com/a/18964123/7020255 — Ryan Le, Oct 15 '20 at 21:03

Dynamic return with JavaScript fetch and PHP

1 Answers1