Puntos clave:
- El sondeo AJAX te permite crear notificaciones en tiempo real en PHP haciendo que el navegador compruebe periódicamente si hay actualizaciones en el servidor.
- Los componentes clave incluyen tablas de base de datos para almacenar las notificaciones, scripts PHP para manejar los datos y jQuery para gestionar las actualizaciones del front-end.
- Aunque es fácil de implementar, el sondeo AJAX puede no ser ideal para aplicaciones a gran escala debido a su sobrecarga.
¿Qué te viene a la mente cuando oyes la palabra notificación push? ¿Algo que aparece en tu navegador o un anuncio molesto? Pues eso se acerca mucho a su significado y uso.
Con las Notificaciones Push, puedes enviar fácilmente mensajes personalizados en tiempo real que aparecerán en el navegador, como Chrome, Firefox, Safari y otros. Y lo utilizan habitualmente las aplicaciones web para mantener la conectividad de los usuarios.
Independientemente del sitio que visites, lo más probable es que recibas una notificación de consentimiento pidiéndote que actives o restrinjas las alertas. Estas notificaciones suelen proporcionar noticias, chat, correos electrónicos y ofertas y descuentos a los usuarios.
Ahora, puede que pienses ¿cómo creamos estas notificaciones en aplicaciones basadas en PHP? Bueno, hay múltiples formas de crear sistemas de notificación en tiempo real, como por ejemplo
- Sondeo Ajax
- Sondeo largo
- Web-Sockets
- Eventos enviados por el servidor (SSE)
En este blog, hemos cubierto el método de sondeo Ajax para crear un Sistema de Notificación en Tiempo Real en PHP, así que veamos cómo funciona.
- Requisitos previos
- Cómo Crear un Sistema de Notificación en Tiempo Real en PHP con Sondeo AJAX (Guía Paso a Paso)
- Paso 1: Crear una Tabla en la Base de Datos
- Paso 2: Crear un formulario y un proceso de navegación para las notificaciones
- Paso 3: Crear una conexión a la base de datos
- Paso 4: Insertar comentarios en la base de datos
- Paso 5: Obtener notificaciones
- Paso 6: Crear un método de envío en jQuery
- Paso 7: Accede a la URL de tu aplicación
- ¡Terminando!
Requisitos previos
Lo primero es lo primero, para crear el sistema de notificaciones en tiempo real PHP, necesitas tener un ligero conocimiento de las siguientes cosas, o si no, no te preocupes, tenemos el código para ayudarte 😉
- PHP y MySQL
- HTML, CSS y JavaScript
- jQuery y AJAX
¿Listo para llevar tus aplicaciones PHP al siguiente nivel?
Con Cloudways, tienes la flexibilidad de experimentar, optimizar y perfeccionar cada aspecto de tus aplicaciones PHP. Prueba Cloudways con una prueba gratuita de 3 días y despliega tus proyectos PHP sin esfuerzo.
Cómo Crear un Sistema de Notificación en Tiempo Real en PHP con Sondeo AJAX (Guía Paso a Paso)
Sólo tienes que seguir los sencillos pasos que se indican a continuación para crear un sistema de notificaciones en tiempo real en PHP con sondeo AJAX:
Paso 1: Crear una Tabla en la Base de Datos
Si eres usuario de Cloudways, estás de suerte.
- Ve a la Plataforma Cloudways e inicia sesión con tus datos de acceso. ¿No eres usuario de Cloudways? Regístrate gratis y disfruta de sus 3 días de prueba gratuita, sin necesidad de dar los datos de tu tarjeta de crédito.
- Inicia el gestor de bases de datos pulsando el botón «Iniciar Gestor de Bases de Datos«.
- Ejecuta la siguiente consulta.
💡Nota: Si no eres usuario de Cloudways, puedes crear la tabla como se indica.
Consulta SQL:
CREATE TABLE `comments` ( `comment_id` INT AUTO_INCREMENT PRIMARY KEY, `comment_subject` VARCHAR(250) NOT NULL, `comment_text` TEXT NOT NULL, `comment_status` TINYINT(1) NOT NULL DEFAULT 0 ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
- Una vez ejecutada la consulta, verás la siguiente Salida.
Paso 2: Crear un formulario y un proceso de navegación para las notificaciones
Crearemos una navegación básica y un formulario Bootstrap declarando el CDN. Puedes modificarlo a tu gusto, pero si quieres probar el mismo código, copia el siguiente código y añádelo al archivo index.php de tu aplicación.
💡Nota: Borra el archivo antes de añadir el código. Para los usuarios de Cloudways, verás un archivo index.php por defecto una vez que lances una aplicación PHP personalizada, borra el archivo bajo public_html para crear uno nuevo con el código que hemos compartido a continuación.
Antes de compartir el código, esto es lo que tienes que hacer:
- Inicia el terminal SSH para entrar en tu servidor y accede a la ruta de la aplicación para realizar los cambios necesarios. Puedes utilizar vim o nano para editar el archivo.
- Una vez que estés en el servidor, puedes eliminar el archivo index.php predeterminado y añadir el siguiente código:
Eliminar el archivo predeterminado Index.php
Índice.php Código:
<!DOCTYPE html> <html> <head> <title>PHP Real-time Notifications System</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> <body> <br /><br /> <div class="container"> <nav class="navbar navbar-inverse"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">PHP Notification System</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="dropdown-menu"></ul> </li> </ul> </div> </nav> <br /> <form method="post" id="comment_form"> <div class="form-group"> <label>Enter Subject</label> <input type="text" name="subject" id="subject" class="form-control"> </div> <div class="form-group"> <label>Enter Comment</label> <textarea name="comment" id="comment" class="form-control" rows="5"></textarea> </div> <div class="form-group"> <input type="submit" name="post" id="post" class="btn btn-info" value="Post" /> </div> </form> </div> </body> </html>
Paso 3: Crear una conexión a la base de datos
Ahora, crearemos un archivo connect.php para gestionar la conexión a la base de datos MySQL. Asegúrate de añadir correctamente los detalles de la base de datos, como dbuser, dbname y db password.
Si eres usuario de Cloudways, encontrarás los detalles de la base de datos de tu aplicación en la pestaña de gestión de aplicaciones:
Ahora, añade el siguiente código a tu archivo connect.php. Además, modifica las credenciales con los detalles de la base de datos de tu aplicación.
Conectar.php Código:
<?php
$host = "localhost";
$username = "dbuser"; // Your DB username
$password = "dbpassword"; // Your DB password
$dbname = "dbname"; // Your DB name
$con = mysqli_connect($host, $username, $password, $dbname);
if (!$con) {
die("Connection failed: " . mysqli_connect_error());
}
?>
Verifica los detalles o la conexión del archivo utilizando el comando php -f connect.php para continuar.
Paso 4: Insertar comentarios en la base de datos
- Ahora, crearemos un archivo insert.php para insertar nuevos comentarios en la base de datos. Hemos añadido $comment_status para la inserción de consultas.
- Copia el siguiente código en el archivo insert.php.
Código Insert.php
<?php
if(isset($_POST["subject"]) && isset($_POST["comment"])) {
include("connect.php");
$subject = mysqli_real_escape_string($con, $_POST["subject"]);
$comment = mysqli_real_escape_string($con, $_POST["comment"]);
$comment_status = 0; // Default status as integer
$query = "INSERT INTO comments(comment_subject, comment_text, comment_status) VALUES ('$subject', '$comment', '$comment_status')";
if (mysqli_query($con, $query)) {
echo "New comment added successfully.";
} else {
echo "Error: " . mysqli_error($con);
}
mysqli_close($con);
}
?>
Paso 5: Obtener notificaciones
- En este paso, crearemos el archivo fetch.php en public_html para obtener las notificaciones en tiempo real.
- Hacerlo te ayudará a verificar si se han añadido nuevos comentarios a la vista AJAX.
- Añade el siguiente código al archivo fetch.php.
Código Fetch.php
<?php
include("connect.php");
$output = '';
$query = "SELECT * FROM comments WHERE comment_status = 0 ORDER BY comment_id DESC LIMIT 5";
$result = 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);
$unseen_notification = $row['count'];
if(mysqli_num_rows($result) > 0) {
while($row = mysqli_fetch_array($result)) {
$output .= '
<li>
<a href="#">
<strong>' . $row["comment_subject"] . '</strong><br />
<small>' . $row["comment_text"] . '</small>
</a>
</li>
<li class="divider"></li>
';
}
} else {
$output .= '<li>No Notification Found</li>';
}
$data = array(
'notification' => $output,
'unseen_notification' => $unseen_notification
);
echo json_encode($data);
?>
Paso 6: Crear un método de envío en jQuery
Ahora que nos acercamos a los últimos pasos, tenemos que crear un método de envío en jQuery que valide los datos de entrada y seleccione la(s) última(s) notificación(es) que hemos insertado en insert.php. Para ello, añadiremos el siguiente código en el archivo index.php dentro de las etiquetas body como se muestra a continuación:
Código de index.php para el método de envío en jQuery:
<script>
$(document).ready(function() {
// Function to load notifications
function load_unseen_notification(view = '') {
$.ajax({
url: "fetch.php",
method: "POST",
data: { view: view },
dataType: "json",
success: function(data) {
$('.dropdown-menu').html(data.notification);
if(data.unseen_notification > 0) {
$('.count').html(data.unseen_notification);
}
}
});
}
load_unseen_notification(); // Initial call to load notifications
// Submit form using AJAX
$('#comment_form').on('submit', function(event) {
event.preventDefault();
if($('#subject').val() != '' && $('#comment').val() != '') {
var form_data = $(this).serialize();
$.ajax({
url: "insert.php",
method: "POST",
data: form_data,
success: function(data) {
$('#comment_form')[0].reset();
load_unseen_notification();
}
});
} else {
alert("Both Fields are Required");
}
});
// Mark notifications as seen on dropdown click
$(document).on('click', '.dropdown-toggle', function() {
$('.count').html('');
load_unseen_notification('yes');
});
// Set interval to refresh notifications
setInterval(function() {
load_unseen_notification();
}, 5000);
});
</script>
Si quieres añadir el código index.php completo para mayor claridad, hay que añadirlo de una sola vez. Pero en este blog, hemos dividido los pasos para una mejor explicación. De todas formas, aquí tienes el código index.php completo:
Código Index.php completo:
<!DOCTYPE html>
<html>
<head>
<title>PHP Real-time Notifications</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>
<body>
<br /><br />
<div class="container">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">PHP Notification Tutorial</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="dropdown-menu"></ul>
</li>
</ul>
</div>
</nav>
<br />
<form method="post" id="comment_form">
<div class="form-group">
<label>Enter Subject</label>
<input type="text" name="subject" id="subject" class="form-control">
</div>
<div class="form-group">
<label>Enter Comment</label>
<textarea name="comment" id="comment" class="form-control" rows="5"></textarea>
</div>
<div class="form-group">
<input type="submit" name="post" id="post" class="btn btn-info" value="Post" />
</div>
</form>
</div>
<script>
$(document).ready(function() {
// Function to load notifications
function load_unseen_notification(view = '') {
$.ajax({
url: "fetch.php",
method: "POST",
data: { view: view },
dataType: "json",
success: function(data) {
$('.dropdown-menu').html(data.notification);
if(data.unseen_notification > 0) {
$('.count').html(data.unseen_notification);
}
}
});
}
load_unseen_notification(); // Initial call to load notifications
// Submit form using AJAX
$('#comment_form').on('submit', function(event) {
event.preventDefault();
if($('#subject').val() != '' && $('#comment').val() != '') {
var form_data = $(this).serialize();
$.ajax({
url: "insert.php",
method: "POST",
data: form_data,
success: function(data) {
$('#comment_form')[0].reset();
load_unseen_notification();
}
});
} else {
alert("Both Fields are Required");
}
});
// Mark notifications as seen on dropdown click
$(document).on('click', '.dropdown-toggle', function() {
$('.count').html('');
load_unseen_notification('yes');
});
// Set interval to refresh notifications
setInterval(function() {
load_unseen_notification();
}, 5000);
});
</script>
</body>
</html>
Paso 7: Accede a la URL de tu aplicación
Por último, accede ahora a la URL de tu aplicación para probar el Sistema de Notificaciones. Y de nuevo, los usuarios de Cloudways pueden acceder a él directamente desde la Plataforma.
💡Nota: Asegúrate de que Varnish está desactivado en tu aplicación para evitar cualquier inconveniente, ya que no se aconseja utilizar Varnish con aplicaciones PHP personalizadas.
Tras acceder a la URL, verás el formulario que hemos creado. Y ya está. Podemos ver que el sistema de Notificación funciona correctamente después de enviar los comentarios.
¡Terminando!
En este blog hemos podido desarrollar un sistema de Notificaciones PHP en Tiempo Real utilizando el Sondeo Ajax. Utilizar el sondeo AJAX en PHP para crear un sistema de notificaciones en tiempo real es una técnica fácil pero eficaz para informar a los visitantes sin que tengan que recargar la página. Utilizando este método, puedes integrar rápidamente notificaciones en tu aplicación, lo que puede hacerla más dinámica y fácil de usar. Hemos probado la configuración realizada utilizando la Plataforma Cloudways. Puedes probarla gratuitamente registrándote en Cloudways o utilizando tu propio hosting.
Los proyectos pequeños y medianos pueden beneficiarse del sondeo AJAX, pero para sistemas más grandes y complicados, es crucial tener en cuenta otras técnicas como los WebSockets o el sondeo largo. Ahora que sabes más sobre esta guía, puedes ampliar y modificar tu sistema de notificaciones para adaptarlo a tus propias necesidades. ¡Feliz programación!
1. ¿Qué es la técnica de sondeo Ajax?
La técnica conocida como sondeo AJAX consiste en que el navegador solicite periódicamente actualizaciones al servidor. Esto nos evita tener que recargar la página para comprobar si hay nuevas alertas.
2. ¿Cómo puedo crear un sistema de notificaciones en PHP?
Para crear un sistema de notificaciones en PHP, empieza por crear una tabla de base de datos para almacenar las notificaciones. Después, desarrolla un formulario y un proceso de navegación para gestionar estas notificaciones. Establece una conexión a la base de datos para gestionar las operaciones con los datos. Inserta nuevas notificaciones en la base de datos según sea necesario. Por último, implementa un método para obtener y mostrar las notificaciones a los usuarios.
3. ¿Cómo puedo implementar notificaciones en tiempo real en PHP?
Implementar notificaciones en tiempo real en PHP implica configurar tu backend para que gestione los eventos que activan las notificaciones. Integrar un servicio de notificaciones push para enviar mensajes a los usuarios. Desarrollar el manejo del frontend para mostrar estas notificaciones a los usuarios. Permitir que los usuarios establezcan sus preferencias para recibir notificaciones. Prueba y optimiza el sistema de notificaciones para garantizar su fiabilidad y rendimiento.
4. ¿Cómo envío notificaciones push utilizando PHP?
Para enviar notificaciones push en PHP, utiliza un servicio de notificaciones push que proporcione una API. Utiliza PHP para interactuar con esta API, enviando los datos necesarios para entregar notificaciones a los usuarios. Asegúrate de que tu aplicación gestiona adecuadamente las respuestas de la API.
5. ¿Qué son las notificaciones en tiempo real?
Las notificaciones en tiempo real son mensajes enviados desde un servidor a una aplicación cliente al instante, proporcionando actualizaciones o alertas inmediatas. Este sistema permite a los usuarios recibir información puntual sin necesidad de actualizar o buscar actualizaciones manualmente.
6. ¿Cómo puedo mostrar notificaciones PHP en tiempo real que no sean mensajes de texto?
Para personalizar el contenido del aviso, realiza cambios en el HTML dentro del script fetch.php. Pueden formar parte de él imágenes, enlaces y cualquier otro material que quieras mostrar.
Start Growing with Cloudways Today.
Our Clients Love us because we never compromise on these
Salwa Mujtaba
Salwa Mujtaba es redactora de contenidos técnicos en Cloudways. Con una sólida formación en Informática y experiencia previa como jefa de equipo en Operaciones de Cloudways, aporta a sus escritos un profundo conocimiento de la Plataforma Cloudways. Salwa crea contenidos que simplifican conceptos complejos, haciéndolos accesibles y atractivos para los lectores. Cuando no está escribiendo, puedes encontrarla disfrutando de la buena música, leyendo un libro o pasando tiempo con su familia.
