Skip to main content
adicionou 390 caracteres ao conteúdo
Fonte Link
Syzoth
  • 100,5mil
  • 23
  • 169
  • 361
<div id="resposta"><id="respostas"></div>
function Notificacoes() {
    var request = new XMLHttpRequest();
    request.open("GET", "test.html", true);//true é "assincrono"
    
    request.onreadystatechange = function (event) {
        if (request.readyState === 4) {
            var target = document.getElementById("respostas");
            var newItem = document.createElement("div");

            if (request.status === 200) {
                 document.getElementById("resposta")newItem.innerHTML = request.responseText;
            } else {
                 document.getElementById("resposta")newItem.innerHTML = "Erro na resposta: " + request.status;
            } 

            //Adiciona nova mensagem do chat no corpo
            target.appendChild(newItem);

            setTimeout(Notificacoes, 500);//Espera 500ms pra fazer uma nova requisição
        }
    };
    request.send(null);
}

Notificacoes(); //Inicia o Ajax (recomendo window.onload ou $.ready do jQuery)
var socket = new WebSocket(host);
 
socket.onopen = function(msg) 
{ 
    if(this.readyState == 1)
    {
        console.log("conectado"); 
    }
};
 
//Recebe os dados do socket
socket.onmessage = function(msg) 
{
    var target = document.getElementById("respostas");
    consolevar newItem = document.logcreateElement("Recebeu:"div");

 " +  newItem.innerHTML = msg.datadata;
    
    //Adiciona nova mensagem do chat no corpo
    target.appendChild(newItem); 
};
 
socket.onclose = function(msg) 
{ 
    console.log("Desconectado " + this.readyState); 
};
 
socket.onerror = function()
{
    console.log("Erro");
};
<div id="resposta"></div>
function Notificacoes() {
    var request = new XMLHttpRequest();
    request.open("GET", "test.html", true);//true é "assincrono"
    
    request.onreadystatechange = function (event) {
        if (request.readyState === 4) {
            if (request.status === 200) {
                 document.getElementById("resposta").innerHTML = request.responseText;
            } else {
                 document.getElementById("resposta").innerHTML = "Erro na resposta: " + request.status;
            }

            setTimeout(Notificacoes, 500);//Espera 500ms pra fazer uma nova requisição
        }
    };
    request.send(null);
}

Notificacoes(); //Inicia o Ajax (recomendo window.onload ou $.ready do jQuery)
var socket = new WebSocket(host);
 
socket.onopen = function(msg) 
{ 
    if(this.readyState == 1)
    {
        console.log("conectado"); 
    }
};
 
//Recebe os dados do socket
socket.onmessage = function(msg) 
{ 
    console.log("Recebeu: " + msg.data); 
};
 
socket.onclose = function(msg) 
{ 
    console.log("Desconectado " + this.readyState); 
};
 
socket.onerror = function()
{
    console.log("Erro");
};
<div id="respostas"></div>
function Notificacoes() {
    var request = new XMLHttpRequest();
    request.open("GET", "test.html", true);//true é "assincrono"
    
    request.onreadystatechange = function (event) {
        if (request.readyState === 4) {
            var target = document.getElementById("respostas");
            var newItem = document.createElement("div");

            if (request.status === 200) {
                 newItem.innerHTML = request.responseText;
            } else {
                 newItem.innerHTML = "Erro na resposta: " + request.status;
            } 

            //Adiciona nova mensagem do chat no corpo
            target.appendChild(newItem);

            setTimeout(Notificacoes, 500);//Espera 500ms pra fazer uma nova requisição
        }
    };
    request.send(null);
}

Notificacoes(); //Inicia o Ajax (recomendo window.onload ou $.ready do jQuery)
var socket = new WebSocket(host);
 
socket.onopen = function(msg) 
{ 
    if(this.readyState == 1)
    {
        console.log("conectado"); 
    }
};
 
//Recebe os dados do socket
socket.onmessage = function(msg) 
{
    var target = document.getElementById("respostas");
    var newItem = document.createElement("div");

    newItem.innerHTML = msg.data;
    
    //Adiciona nova mensagem do chat no corpo
    target.appendChild(newItem);
};
 
socket.onclose = function(msg) 
{ 
    console.log("Desconectado " + this.readyState); 
};
 
socket.onerror = function()
{
    console.log("Erro");
};
Fonte Link
Syzoth
  • 100,5mil
  • 23
  • 169
  • 361

PHP é back-end, não tem como ele fazer uma interação tão direta com o front-end.

Você tem duas opções:

Ajax + setTimeout

Não tem por que não querer usar o setTimeout (ele é seu amigo), um exemplo de ajax com setTimeout:

html:

<div id="resposta"></div>

Js:

function Notificacoes() {
    var request = new XMLHttpRequest();
    request.open("GET", "test.html", true);//true é "assincrono"
    
    request.onreadystatechange = function (event) {
        if (request.readyState === 4) {
            if (request.status === 200) {
                 document.getElementById("resposta").innerHTML = request.responseText;
            } else {
                 document.getElementById("resposta").innerHTML = "Erro na resposta: " + request.status;
            }

            setTimeout(Notificacoes, 500);//Espera 500ms pra fazer uma nova requisição
        }
    };
    request.send(null);
}

Notificacoes(); //Inicia o Ajax (recomendo window.onload ou $.ready do jQuery)

Outra recomendação que faço é trazer dados json ao invés de html, pois é assim será menos consumo do servidor e a resposta irá demorar menos. Então com estes dados json você usar javascript pra gerar o HTML.

Usando websockets

WebScokets são mais complicados, no entanto a vantagem que eles exercem é que o servidor é que envia a resposta pois a conexão é constante:

js:

var socket = new WebSocket(host);
 
socket.onopen = function(msg) 
{ 
    if(this.readyState == 1)
    {
        console.log("conectado"); 
    }
};
 
//Recebe os dados do socket
socket.onmessage = function(msg) 
{ 
    console.log("Recebeu: " + msg.data); 
};
 
socket.onclose = function(msg) 
{ 
    console.log("Desconectado " + this.readyState); 
};
 
socket.onerror = function()
{
    console.log("Erro");
};

php:

#!/usr/local/bin/php -q
<?php
error_reporting(E_ALL);

/* Allow the script to hang around waiting for connections. */
set_time_limit(0);

/* Turn on implicit output flushing so we see what we're getting
 * as it comes in. */
ob_implicit_flush();

$address = '192.168.1.53';
$port = 10000;

if (($sock = socket_create(AF_INET, SOCK_STREAM, SOL_TCP)) === false) {
    echo "socket_create() failed: reason: " . socket_strerror(socket_last_error()) . "\n";
}

if (socket_bind($sock, $address, $port) === false) {
    echo "socket_bind() failed: reason: " . socket_strerror(socket_last_error($sock)) . "\n";
}

if (socket_listen($sock, 5) === false) {
    echo "socket_listen() failed: reason: " . socket_strerror(socket_last_error($sock)) . "\n";
}

do {
    if (($msgsock = socket_accept($sock)) === false) {
        echo "socket_accept() failed: reason: " . socket_strerror(socket_last_error($sock)) . "\n";
        break;
    }
    /* Send instructions. */
    $msg = "\nWelcome to the PHP Test Server. \n" .
        "To quit, type 'quit'. To shut down the server type 'shutdown'.\n";
    socket_write($msgsock, $msg, strlen($msg));

    do {
        if (false === ($buf = socket_read($msgsock, 2048, PHP_NORMAL_READ))) {
            echo "socket_read() failed: reason: " . socket_strerror(socket_last_error($msgsock)) . "\n";
            break 2;
        }
        if (!$buf = trim($buf)) {
            continue;
        }
        if ($buf == 'quit') {
            break;
        }
        if ($buf == 'shutdown') {
            socket_close($msgsock);
            break 2;
        }
        $talkback = "PHP: You said '$buf'.\n";
        socket_write($msgsock, $talkback, strlen($talkback));
        echo "$buf\n";
    } while (true);
    socket_close($msgsock);
} while (true);

socket_close($sock);

Documentação PHP:

Porque não o setInterval

Diferente do setTimeout o setInterval não espera o processo terminar, portanto o se as requisições ajax forem longas você podera sobrecarregar o navegador.