Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

sambuka

Carregar novas postagens sem refresh

Por , em Javascript

Recommended Posts

sambuka    1

sambuka
Postado

Boa tarde galera!

Estou com o seguinte problema.

Atualmente quando efetuo uma postagem no meu site, ele chama um processo, e após o processo terminar ele da um refresh na pagina.

porém não acho legal isso,.

Eu quero algo que quando eu efetue a postagem, automaticamente ja apareça o novo post na page sem dar refresh.

Pesquisei sobre NODE js e Websocket, mas não acho nada de explicação envolvendo PHP, Mysql.

Alguém tem alguma dica sobre como devo fazer, ou o que devo usar.

 

Obrigado!!!!

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Existe uma alternativa para php implementando sockets, mas eu nunca usei.

 

Com socket.io ficaria perfeito =)

Compartilhar este post

Link para o post
Compartilhar em outros sites

sambuka    1

sambuka
Postado

Bom William, pesquisei sobre várias coisas para tentar resolver meu problema, e que eu consegui-se adaptar no meu site.

Socket.io, NoDE, websocket etc.... Pra min tudo muito fora do meu conhecimento, ou os exemplos que eu encontro que são ruins, kkkk mas acho que sou eu mesmo que tenho que estudar mais.

 

Por fim achei o seguinte código que funcionou para meu proposito.

Porém o site fica lento, da pra perceber nitidamente a diferença da pagina com e sem esse código.

 

1 - O que posso fazer nesse código para otimizar ele ?

2 - Tem algo que estou fazendo errado ? o que posso fazer para corrigir ?

Esse código é um exemplo do que eu estou usando no meu site, a diferença é que no lugar dos números randômicos eu faço o select no banco e apresento as postagens na pagina.

<!--INDEX BUSCA.php-->

<html>
<head>
<?php $randrefre=rand(1,1000); ?>
    <title>BargePoller</title>
    <script type="text/javascript" language="javascript" src="../js/jquery-2.1.1.js"></script>

    <style type="text/css" media="screen">
      body{ background:#000;color:#fff;font-size:.9em; }
      .msg{ background:#aaa;padding:.2em; border-bottom:1px #000 solid}
      .old{ background-color:#246499;}
      .new{ background-color:#3B9957;}
    .error{ background-color:#992E36;}
    </style>

    <script type="text/javascript" charset="utf-8">
    function addmsg(type, msg){
        /* Simple helper to add a div.
        type is the name of a CSS class (old/new/error).
        msg is the contents of the div */
		$('#messages').html(
            "<div id='messages "+ type +"'>"+ msg +"</div>"
        );
    }

    function waitForMsg(){
        /* This requests the url "msgsrv.php"
        When it complete (or errors)*/
        $.ajax({
            type: "GET",
            url: "base busca.php?first=<?php echo $randrefre ?>",

            async: true, /* If set to non-async, browser shows page as "Loading.."*/
            cache: false,
            timeout:50000, /* Timeout in ms */

            success: function(data){ /* called when request to barge.php completes */
                addmsg("new", data); /* Add response to a .msg div (with the "new" class)*/
                setTimeout(
                    waitForMsg, /* Request next message */
                    1000 /* ..after 1 seconds */
                );
            },
            error: function(XMLHttpRequest, textStatus, errorThrown){
                addmsg("error", textStatus + " (" + errorThrown + ")");
                setTimeout(
                    waitForMsg, /* Try again after.. */
                    15000); /* milliseconds (15seconds) */
            }
        });
    };

    $(document).ready(function(){
        waitForMsg(); /* Start the inital request */
    });
    </script>
</head>
<body>
    <div id="messages">

    </div>
</body>
</html>

<!--BASE BUSCA.php-->

<?php
session_start();
if(isset($_GET['first'])){
	if(!isset($_SESSION['attpost'])){
		$_SESSION['attpost'] = $_GET['first']; 
		sleep(1);	
	}else if($_GET['first'] !== $_SESSION['attpost']){
		$_SESSION['attpost'] = $_GET['first']; 
		sleep(1);
	}else{
		
		sleep(rand(5,15));
	}	
}
$teste=rand(1,15);
echo $teste;
?>

Compartilhar este post

Link para o post
Compartilhar em outros sites

sambuka    1

sambuka
Postado

Mudei para long polling, funcionou legal, porém as funções javascript e jquery que eu tinha no arquivo que o long polling chama não funcionam.

 

parte da função do long polling que pega o resultado.

    var url = "consulta/busca_postagem.php?verifica=ok&grupo=<?php echo $grulogcodigo?>";
    
    // Chamada do metodo open e envia os dados para o arquivo buscar.php.
    busca_ajax.open("Get", url, true);

    // Quando o objeto recebe o retorno, chamamos a seguinte função;
    busca_ajax.onreadystatechange = function(){

        //Aguarda o ajax executar
        if(busca_ajax.readyState == 4 && busca_ajax.status == 200) {

            //Resposta retornada pelo "buscar.php" via "echo"
            var resposta = busca_ajax.responseText;
            
            //Verifica se e um conteudo vazio.
            if(resposta != "" && !(resposta.match(/^\s+$/))){

                //Criamos uma "div" com o conteudo encontrado dentro e colocamos tudo dentro da tag "p".
				element = document.getElementById("postbase");
				if (element) {
					element.innerHTML =resposta;
				}
                permicao = 1; //Coloca 1 para que a função "buscar_auxiliar()" consiga chamar novamente esta função ("buscar(binario)").
            }

Compartilhar este post

Link para o post
Compartilhar em outros sites

sambuka    1

sambuka
Postado

na parte do ajax onde imprime o resultado, só trocar pra esse código aqui:

				$("#postbase").html(resposta);
                $("#postbase").find("script").each(function(i) {
                    eval($(this).text());
                });

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito