0

Tenho um arquivo chamado processa_vis.php onde trás o resultado de todas ID com o status online, até ai tudo certo e exibe normalmente os usuários online na tela onde chamo a função.

Porém gostaria que atualizasse a página mas somente o texto onde exibe a quantidade de usuários online. Básicamente incluo o arquivo de processa_visitas.php com include e depois chamo a variável $result onde está armazenado a quantidade de usuários online dentro do processa_visitas.php, queria atualizar esse resultado a cada 5 segundos.

Vi em alguns lugares usarem jQuery com setInterval mas não tenho experiência com jQuery. Parece ser simples demais porém várias tentativas falhas.

Arquivos:

processa_vis.php

<?php
include_once("conexao.php");

$query = "SELECT * FROM usuarios WHERE status_online = 'S';";
$sql = mysqli_query($conn, $query);
$result = mysqli_num_rows($sql);

echo $result;

?>

index.php

<?php
session_start();
include("conexoes/conexao.php");
if($_SESSION["id"]){
    header("location: painel.php");
}
?>
<!DOCTYPE html>
<html lang="pt-br">
    <head>
        <title>Banco de Dados - Login</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    </head>
    <body>
        <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
            <div class="container">
                <a class="navbar-brand" href="#">Banco de Dados</a>
            </div>
        </nav>
        <div class="container">
            <h4 class="mt-4 display-4 text-center">Área de Login</h4><hr>
            <div class="col-md-6 offset-md-3 mt-5">
                <form method="post" action="conexoes/login.php" class="p-3" style="background-color: #e4e4e4; border-top: 20px #999999 solid;">
                <?php
                    if(isset($_SESSION['msg'])){
                        echo "<div class='col-md-6 offset-md-3'>";
                        echo $_SESSION['msg'];
                        unset($_SESSION['msg']);
                        echo "</div>";
                    }       
                ?>
                    <div class="form-group">
                        <div class="col-md-6 offset-md-3">
                            <label for="inputLogin">Login</label>
                            <input class="form-control" name="login" id="InputLogin" placeholder="Usuário">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-6 offset-md-3">
                            <label for="InputSenha">Senha</label>
                            <input type="password" class="form-control" name="senha" id="InputSenha" placeholder="Senha">
                        </div>
                    </div>
                    <div class="col-md-6 offset-md-3">
                        <button type="submit" id="btnLogin" class="btn btn-block btn-primary">Entrar</button>
                    </div><br>
                    <span>Ainda não possui uma conta?</span><br>
                    <small class="text-muted"><a href="cadastrar.php">Crie uma aqui.</a></small>
                </form>
            </div>
            <div id="qtd_usuarios_online"></div>
            <div class="footer" style="margin-top: 20px; margin-bottom: 10px;"><hr>
                <footer>
                    <p class="text-muted text-center">&copy 2019</p>
                </footer>
            </div>
        </div>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

        <script>

        $(document).ready(function(){ // iniciar assim que o documento estiver carregado
        setInterval(update_visitas(),5000); // vai rodar a função a cada 5000 milésimos (5 segundos)
        function update_visitas(){ //função que será carregada
            $.ajax({url: "conexoes/processa_vis.php", // ajax que vai carregar o arquivo PHP
                cache: false, // remover cache caso haja
                success: function(result){ //se carregar com sucesso, carrega os dados do PHP
        $('#qtd_usuarios_online').html(result); //exibe dentro da DIV #qtd_usuarios_online a saída do PHP
        }});
        }
        });

        </script>

    </body>
</html>
3
  • Consegue colocar algumas dessas tentativas falhas para vermos onde está com dificuldade?
    – Woss
    Commented 6/06/2019 às 23:41
  • Não tenho aqui pois apaguei todas tentativas Commented 7/06/2019 às 0:29
  • Mas modifiquei e coloquei os códigos básicos dos arquivos Commented 7/06/2019 às 0:29

2 Respostas 2

1

em primeiro lugar, o que você precisa realmente é ter uma comunicação reversa com o servidor, utilizando por exemplo o NodeJS, dessa forma, o servidor avisa por broadcast as "novidades", em seu caso, a quantidade de visitantes.

Mas também é possível fazer com jquery dando um jeitinho, mais ou menos assim:

  1. Sempre que você for utilizar Jquery, você precisa adicionar a biblioteca. Você pode baixá-lo ou usar um CDN:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

  1. Você vai chamar de tempo em tempo via Ajax seu arquivo PHP e exibir seu conteúdo em uma div, assim:

HTML DO INDEX.PHP

<div id="qtd_usuarios_online"></div>

Jquery no final da página

    <script>

$(document).ready(function(){ // iniciar assim que o documento estiver carregado

setInterval(update_visitas(),5000); // vai rodar a função a cada 5000 milésimos (5 segundos)

function update_visitas(){ //função que será carregada

$.ajax({url: "processar_visitas.php", // ajax que vai carregar o arquivo PHP
        cache: false, // remover cache caso haja
        success: function(result){ //se carregar com sucesso, carrega os dados do PHP

$('#qtd_usuarios_online').html(result); //exibe dentro da DIV #qtd_usuarios_online a saída do PHP

}});  

}
});

</script>
  1. Precisamos alterar um pouco seu processar_visitas.php para ele exibir as visitas:

    include_once("conexao.php");
    
    $query = "SELECT * FROM usuarios WHERE status_online = 'S';";
    $sql = mysqli_query($conn, $query);
    $result = mysqli_num_rows($sql);
    $usuarios_online = $result;
    echo $usuarios_online; /*vai exibir a variável como resultado do processamento em ajax */
    
6
  • Fiz exatamente da forma em que me instruiu e não obtive sucesso, os números não atualizam sozinhos, somente se eu atualizar a página. Commented 10/06/2019 às 19:38
  • Oi @CarlosPereira, você está usando o Chrome? Cheque na aba "Console" do inspecionar Elementos se está retornando algum erro no ajax, utilize console.log se necessário para imprimir as etapas e qualquer coisa me avisa, abs Commented 10/06/2019 às 20:07
  • Não exibiu nenhum erro no console Commented 10/06/2019 às 20:37
  • Eu editei e inseri o código todo na pergunta, talvez assim seja melhor para resolver este problema. ( ignora os erros visuais do site, eu só crio o bootstrap para não deixar seco o estudo de aperfeiçoamento no php ) Commented 10/06/2019 às 20:42
  • Carlos, tenta em seu process_vis.php colocar um echo "teste"; por exemplo para ver se imprime no HTML a palavra teste, se for isso, o problema é no processamento do PHP ou SQLs Commented 11/06/2019 às 12:50
0

Você pode tentar algo como:

<div id="output"></div>
<script>
$(document).ready(function() {
    setInterval(function()
        $.ajax({
             url:'processar_visitas.php',
             type: "post",
             complete: function (response) { // ou success
                  $('#output').html(response);
             },
             error: function () {
                  $('#output').html('Aconteceu alguma coisa errada!');
             },
        });
    }, 5000);
});
</script>

processar_visitas.php

<?php
    include_once("conexao.php");

    $query = "SELECT * FROM usuarios WHERE status_online = 'S';";
    $sql = mysqli_query($conn, $query);
    $result = mysqli_num_rows($sql);
    echo $result;
?>
1
  • Não obtive sucesso também, o seu código não chega nem a exibir o número :/ Commented 10/06/2019 às 19:41

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .