Principais conclusões:
- A sondagem AJAX permite-te criar notificações em tempo real em PHP, fazendo com que o browser verifique periodicamente se existem actualizações no servidor.
- Os principais componentes incluem tabelas de bases de dados para armazenar notificações, scripts PHP para tratar os dados e jQuery para gerir as actualizações do front-end.
- Embora simples de implementar, o polling AJAX pode não ser ideal para aplicações de grande escala devido à sua sobrecarga.
O que te vem à cabeça quando ouves a palavra notificação push? Algo a aparecer no teu browser ou um anúncio irritante? Bem, isso está muito próximo do seu significado e utilização.
Com as Notificações Push, podes facilmente enviar mensagens personalizadas em tempo real que aparecerão no browser, como o Chrome, o Firefox, o Safari e outros. E é normalmente utilizado por aplicações Web para manter a conetividade do utilizador.
Independentemente do sítio que visitares, é muito provável que recebas um aviso de consentimento de notificação a pedir-te para activares ou restringires os alertas. Estas notificações fornecem frequentemente notícias, chat, e-mails e ofertas e descontos aos utilizadores.
Agora, podes pensar como é que criamos estas notificações em aplicações baseadas em PHP? Bem, existem várias formas de criar sistemas de notificação em tempo real, tais como:
- Sondagem Ajax
- Sondagem longa
- Web-Sockets
- Eventos enviados pelo servidor (SSE)
Neste blogue, abordámos o método de sondagem Ajax para criar um sistema de notificação em tempo real em PHP, por isso vamos ver como funciona.
- Pré-requisitos
- Como criar um sistema de notificação em tempo real em PHP com sondagem AJAX (guia passo a passo)
- Passo 1: Cria uma tabela na base de dados
- Passo 2: Cria um formulário e um processo de navegação para as notificações
- Passo 3: Criar uma ligação à base de dados
- Passo 4: Insere comentários na base de dados
- Passo 5: Obter notificações
- Passo 6: Cria um método Submit em jQuery
- Passo 7: Aceder ao URL da tua aplicação
- Terminar!
Pré-requisitos
Em primeiro lugar, para criar o sistema de notificação em tempo real em PHP, precisas de ter uma ligeira compreensão das seguintes coisas, ou então não te preocupes, temos o código para te ajudar. 😉
- PHP e MySQL
- HTML, CSS e JavaScript
- jQuery e AJAX
Pronto para levar as tuas aplicações PHP para o próximo nível?!
Com o Cloudways, você tem a flexibilidade de experimentar, otimizar e aperfeiçoar cada aspeto de seus aplicativos PHP. Experimente o Cloudways com uma avaliação gratuita de 3 dias e implemente seus projetos PHP sem esforço.
Como criar um sistema de notificação em tempo real em PHP com sondagem AJAX (guia passo a passo)
Basta seguir os passos simples abaixo para criar um sistema de notificação em tempo real em PHP com sondagem AJAX:
Passo 1: Cria uma tabela na base de dados
Se és um utilizador da Cloudways, estás com sorte.
- Vai à plataforma Cloudways e inicia sessão com os teus dados de acesso. Não és utilizador de Cloudways? Inscreve-te gratuitamente e aproveita os seus 3 dias de teste gratuito, sem sequer forneceres os dados do teu cartão de crédito.
- Lança o gestor da base de dados clicando no botão “Launch Database Manager“.
- Executa a seguinte consulta.
Nota: Se não fores um utilizador da Cloudways, podes criar a tabela como aconselhado.
Consulta SQL:
CREATE TABLE `comments` ( `comment_id` INT AUTO_INCREMENT PRIMARY KEY, `comentário_assunto` VARCHAR(250) NOT NULL, `texto_do_comentário` TEXT NOT NULL, `comment_status` TINYINT(1) NOT NULL DEFAULT 0 ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
- Depois de executares a consulta, verás o seguinte Resultado.
Passo 2: Cria um formulário e um processo de navegação para as notificações
Vamos criar uma navegação básica e um formulário Bootstrap, declarando o CDN. Podes modificá-lo a teu gosto, mas se quiseres testar o mesmo código, copia o seguinte código e adiciona-o ao ficheiro index.php da tua aplicação.
Nota: Limpa o ficheiro antes de adicionares o código. Para os utilizadores da Cloudways, verás um ficheiro index.php predefinido assim que iniciares uma aplicação PHP personalizada, elimina o ficheiro em public_html para criares um novo com o código que partilhámos abaixo.
Antes de partilharmos o código, eis o que tens de fazer:
- Abre o terminal SSH para entrar no teu servidor e aceder ao caminho da aplicação para fazer as alterações necessárias. Podes utilizar o vim ou o nano para editar o ficheiro.
- Quando estiveres no servidor, podes remover o ficheiro index.php predefinido e adicionar o seguinte código:
Removendo o arquivo Index.php padrão
Index.php Código:
<!DOCTYPE html> <html> <cabeça> <título>Sistema de notificações em tempo real PHP</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <corpo> <br /><br /> <div class="contentor"> <nav class="navbar navbar-inverse"> <div class="contentor-fluido"> <div class="navbar-header"> <a class="navbar-brand" href="#">Sistema de notificação PHP</a> </div> <ul class="nav navbar-nav navbar-right"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> <span class="label label-pill label-danger count" style="border-radius:10px;"></span> <span class="glyphicon glyphicon-bell" style="font-size:18px;"></span> </a> <ul class="menu pendente"></ul> </li> </ul> </div> </nav> <br /> <form method="post" id="comment_form"> <div class="grupo-formulário"> <etiqueta>Introduzir assunto</label> <input type="text" name="subject" id="subject" class="form-control"> </div> <div class="grupo-formulário"> <etiqueta>Introduzir comentário</label> <textarea name="comment" id="comment" class="form-control" rows="5"></textarea> </div> <div class="grupo-formulário"> <input type="submit" name="post" id="post" class="btn btn-info" value="Post" /> </div> </form> </div> </body> </html>
Passo 3: Criar uma ligação à base de dados
Agora, vamos criar um arquivo connect.php para lidar com a conexão com o banco de dados MySQL. Certifica-te de que adicionas os detalhes da tua base de dados corretamente, como o dbuser, o dbname e a password da base de dados.
Se fores um utilizador Cloudways, encontrarás os detalhes da base de dados da tua aplicação no separador de gestão de aplicações:
Agora, adiciona o seguinte código ao teu ficheiro connect.php. Além disso, modifica as credenciais com os detalhes da base de dados da tua aplicação em causa.
Liga.php Código:
<?php
$host = "localhost";
$username = "dbuser"; // O teu nome de utilizador da BD
$password = "dbpassword"; // A tua palavra-passe da BD
$dbname = "dbname"; // O teu nome de BD
$con = mysqli_connect($host, $username, $password, $dbname);
se (!$con) {
morre ("A ligação falhou: " . mysqli_connect_error());
}
?>
Verifica os detalhes ou a ligação do ficheiro utilizando o comando php -f connect.php para prosseguir.
Passo 4: Insere comentários na base de dados
- Agora, vamos criar um ficheiro insert.php para inserir novos comentários na base de dados. Adicionámos $comment_status para a inserção da consulta.
- Copia o seguinte código para o ficheiro insert.php.
Insere.php Código:
<?php
se(isset($_POST["subject"]) && isset($_POST["comment"])) {
inclui("connect.php");
$subject = mysqli_real_escape_string($con, $_POST["subject"]);
$comment = mysqli_real_escape_string($con, $_POST["comment"]);
$comment_status = 0; // Estado por defeito como um número inteiro
$query = "INSERT INTO comments(comment_subject, comment_text, comment_status) VALUES ('$subject', '$comment', '$comment_status')";
Se (mysqli_query($con, $query)) {
echo "Novo comentário adicionado com sucesso.";
} else {
echo "Erro: " . mysqli_error($con);
}
mysqli_close($con);
}
?>
Passo 5: Obter notificações
- Nesta etapa, criaremos o arquivo fetch.php em public_html para buscar as notificações em tempo real.
- Ao fazê-lo, ajuda-te a verificar se existem novos comentários adicionados à vista AJAX.
- Adiciona o seguinte código ao ficheiro fetch.php.
Busca.php Código:
<?php
inclui("connect.php");
$output = '';
$query = "SELECT * FROM comments WHERE comment_status = 0 ORDER BY comment_id DESC LIMIT 5";
$resultado = mysqli_query($con, $query);
$count_query = "SELECT COUNT(*) AS count FROM comments WHERE comment_status = 0";
$count_result = mysqli_query($con, $count_query);
$row = mysqli_fetch_assoc($count_result);
$notificação_não-vista = $linha['contagem'];
se(mysqli_num_rows($result) > 0) {
while($row = mysqli_fetch_array($result)) {
$output .= '
<li>
<a href="#">
<forte>' . $row["comment_subject"] . '</strong><br />
<pequeno>' . $row["comment_text"] . '</small>
</a>
</li>
<li class="divisor"></li>
';
}
} else {
$output .= '<li>Nenhuma nota encontrada</li>';
}
$data = array(
'notificação' => $output,
'unseen_notification' => $unseen_notification
);
eco json_encode($data);
?>
Passo 6: Cria um método Submit em jQuery
Agora que estamos a chegar aos últimos passos, temos de criar um método de submissão em jQuery que validará os dados de entrada e selecionará a(s) última(s) notificação(ões), que inserimos em insert.php. Para isso, adiciona o seguinte código no ficheiro index.php, dentro das etiquetas body, como se mostra abaixo:
Código index.php para o método de submissão em jQuery:
<guião>
$(document).ready(function() {
// Função para carregar as notificações
função load_unseen_notification(view = '') {
$.ajax({
url: "fetch.php",
método: "POST",
dados: { view: vista },
dataType: "json",
sucesso: função(dados) {
$('.dropdown-menu').html(data.notification);
se(data.unseen_notification > 0) {
$('.count').html(data.unseen_notification);
}
}
});
}
load_unseen_notification(); // Chamada inicial para carregar notificações
// Envia o formulário usando AJAX
$('#comment_form').on('submit', function(event) {
event.preventDefault();
se($('#assunto').val() != '' && $('#comentário').val() != '') {
var form_data = $(this).serialize();
$.ajax({
url: "insere.php",
método: "POST",
dados: dados_do_formulário,
sucesso: função(dados) {
$('#comment_form')[0].reset();
carrega_unseen_notification();
}
});
} else {
alerta("Ambos os campos são obrigatórios");
}
});
// Marca as notificações como vistas ao clicar no menu pendente
$(document).on('click', '.dropdown-toggle', function() {
$('.count').html('');
carrega a notificação não vista('sim');
});
// Define o intervalo para atualizar as notificações
setInterval(function() {
carrega_unseen_notification();
}, 5000);
});
</script>
Se quiseres adicionar o código index.php completo para maior clareza, tens de o adicionar de uma só vez. Mas neste blogue, dividimos os passos para te explicar melhor. De qualquer forma, aqui tens o código completo do index.php:
Completa o código do Index.php:
<!DOCTYPE html>
<html>
<cabeça>
<título>PHP Notificações em tempo real</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<corpo>
<br /><br />
<div class="contentor">
<nav class="navbar navbar-inverse">
<div class="contentor-fluido">
<div class="navbar-header">
<a class="navbar-brand" href="#">Tutorial de notificação PHP</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<span class="label label-pill label-danger count" style="border-radius:10px;"></span>
<span class="glyphicon glyphicon-bell" style="font-size:18px;"></span>
</a>
<ul class="menu pendente"></ul>
</li>
</ul>
</div>
</nav>
<br />
<form method="post" id="comment_form">
<div class="grupo-formulário">
<etiqueta>Introduzir assunto</label>
<input type="text" name="subject" id="subject" class="form-control">
</div>
<div class="grupo-formulário">
<etiqueta>Introduzir comentário</label>
<textarea name="comment" id="comment" class="form-control" rows="5"></textarea>
</div>
<div class="grupo-formulário">
<input type="submit" name="post" id="post" class="btn btn-info" value="Post" />
</div>
</form>
</div>
<guião>
$(document).ready(function() {
// Função para carregar as notificações
função load_unseen_notification(view = '') {
$.ajax({
url: "fetch.php",
método: "POST",
dados: { view: vista },
dataType: "json",
sucesso: função(dados) {
$('.dropdown-menu').html(data.notification);
se(data.unseen_notification > 0) {
$('.count').html(data.unseen_notification);
}
}
});
}
load_unseen_notification(); // Chamada inicial para carregar notificações
// Envia o formulário usando AJAX
$('#comment_form').on('submit', function(event) {
event.preventDefault();
se($('#subject').val() != '' && $('#comment').val() != '') {
var form_data = $(this).serialize();
$.ajax({
url: "insere.php",
método: "POST",
dados: dados_do_formulário,
sucesso: função(dados) {
$('#comment_form')[0].reset();
carrega_unseen_notification();
}
});
} else {
alerta("Ambos os campos são obrigatórios");
}
});
// Marca as notificações como vistas ao clicar no menu pendente
$(document).on('click', '.dropdown-toggle', function() {
$('.count').html('');
carrega a notificação não vista('sim');
});
// Define o intervalo para atualizar as notificações
setInterval(function() {
carrega_unseen_notification();
}, 5000);
});
</script>
</body>
</html>
Passo 7: Aceder ao URL da tua aplicação
Finalmente, acessa a URL do seu aplicativo agora para testar o Sistema de Notificação. E, novamente, os usuários do Cloudways podem acessá-lo diretamente da Plataforma.
Nota: Certifica-te de que o Varnish está desativado na tua aplicação para evitar qualquer inconveniente, uma vez que não é aconselhável utilizar o Varnish com aplicações PHP personalizadas.
Depois de acederes ao URL, verás o formulário que criámos. E pronto! Podes ver que o sistema de Notificação está a funcionar bem depois de submeteres os comentários.
Terminar!
Conseguimos desenvolver um sistema de notificação em tempo real em PHP usando Ajax Polling neste blog. Usar o polling AJAX em PHP para criar um sistema de notificação em tempo real é uma técnica fácil, mas eficiente, para informar os visitantes sem exigir que eles recarreguem a página. Usando este método, podes integrar rapidamente as notificações na tua aplicação, o que pode torná-la mais dinâmica e fácil de usar. Testamos a configuração realizada usando a plataforma Cloudways. Podes testá-la gratuitamente inscrevendo-te na Cloudways ou utilizando o teu próprio alojamento.
Os projectos de pequena e média dimensão podem beneficiar do polling AJAX, mas para sistemas maiores e mais complicados, é crucial ter em conta outras técnicas, como WebSockets ou polling longo. Agora que já sabes mais sobre este guia, podes expandir e modificar o teu sistema de notificações de acordo com os teus próprios requisitos. Boa programação!
1. O que é a técnica de sondagem Ajax?
A técnica conhecida como polling AJAX implica que o browser solicite periodicamente actualizações ao servidor. Isto evita que tenhamos de recarregar a página para verificar se há novos alertas.
2. Como é que posso criar um sistema de notificações em PHP?
Para criar um sistema de notificação em PHP, começa por configurar uma tabela de base de dados para armazenar as notificações. Em seguida, desenvolve um formulário e um processo de navegação para gerir estas notificações. Estabelece uma ligação à base de dados para tratar das operações de dados. Insere novas notificações na base de dados conforme necessário. Por fim, implementa um método para obter e apresentar notificações aos utilizadores.
3. Como é que posso implementar notificações em tempo real em PHP?
A implementação de notificações em tempo real no PHP envolve a configuração do back-end para lidar com eventos que acionam notificações. Integrar um serviço de notificação push para enviar mensagens aos usuários. Desenvolver o tratamento do frontend para exibir essas notificações aos usuários. Permitir que os usuários definam suas preferências para receber notificações. Testa e optimiza o sistema de notificação para garantir a fiabilidade e o desempenho.
4. Como é que envio notificações push utilizando PHP?
Para enviar notificações push em PHP, utiliza um serviço de notificação push que fornece uma API. Utiliza o PHP para interagir com esta API, enviando os dados necessários para entregar notificações aos utilizadores. Certifica-te de que a tua aplicação trata as respostas da API de forma adequada.
5. O que são as notificações em tempo real?
As notificações em tempo real são mensagens enviadas instantaneamente de um servidor para uma aplicação cliente, fornecendo actualizações ou alertas imediatos. Este sistema permite que os utilizadores recebam informações atempadas sem necessidade de atualizar ou verificar manualmente se existem actualizações.
6. Como é que posso apresentar notificações PHP em tempo real que não sejam mensagens de texto?
Para personalizar o conteúdo do aviso, faz alterações ao HTML no script fetch.php. Imagens, links e qualquer outro material que queiras mostrar podem fazer parte disto.
Salwa Mujtaba
Salwa Mujtaba é redatora de conteúdo técnico na Cloudways. Com uma sólida formação em Ciência da Computação e experiência anterior como líder de equipe em Operações da Cloudways, ela traz uma profunda compreensão da Plataforma Cloudways para sua escrita. Salwa cria conteúdo que simplifica conceitos complexos, tornando-os acessíveis e envolventes para os leitores. Quando não está a escrever, podes encontrá-la a apreciar boa música, a ler um livro ou a passar tempo de qualidade com a sua família.
