Cómo crear notificaciones en vivo como en Facebook y Quora usando PHP y MySQL

Hola,

Para crear un sistema de notificación que se utilice como ventana emergente en Facebook, Quora, Linkedin, Twitter , etc., se puede seguir el siguiente enfoque.

Permítanme presentarles algunos fragmentos del código en PHP / MySQL / JavaScript / HTML para mostrar los conceptos. Se puede aplicar en cualquier otro lugar también en otras plataformas.

La solución completa se puede dividir en 4 componentes:

  1. Tabla de base de datos para almacenar notificaciones iniciadas por usuario
  2. Script del lado del servidor que gestiona la notificación
  3. Código JavaScript frontal para mostrar notificaciones
  4. Pantalla administrativa para enviar notificaciones a los usuarios registrados

1er Paso: Tabla de base de datos para almacenar notificaciones registradas en el usuario:

Creemos una tabla MySQL [ notificaciones ] para almacenar notificaciones en el lado del servidor.

  1. id-Long Integer – PK (clave primaria, autoamplificado)
    1. Identificación única para la notificación
  2. creation_date_time – Varchar (30)
    1. Guardar fecha y hora como texto cuando el administrador crea notificaciones
  3. view_date_time – Varchar (30)
    1. Almacene la fecha y hora como texto cuando lo ve un usuario registrado
  4. user_id- Entero largo
    1. Identificación única (FK) de la tabla [ usuario ] para quien se ha creado la notificación
  5. notificación_texto – Varchar (255)
    1. Notificación de texto en formato HTML para que las imágenes también se puedan mostrar
  6. is_viewed- Varchar (3)
    1. “SÍ / NO” para indicar si la notificación ha sido vista o no por el usuario conectado
  7. El siguiente es el comando MySQL para crear la estructura de la tabla:

CREAR TABLA `notificaciones` (
`id` int (11) NO NULL,
`creation_date_time` varchar (30) NOT NULL,
`view_date_time` varchar (30) NOT NULL,
`user_id` int (11) NOT NULL,
`notify_text` varchar (255) NO NULL,
`is_viewed` varchar (3) NO NULL
) ENGINE = InnoDB DEFAULT CHARSET = latin1;

Segundo paso: secuencia de comandos del lado del servidor que gestiona las notificaciones:

Permítanos crear un archivo .php ( notifications_controller.php ) que se usará para administrar las notificaciones:

<? php
// Este script aceptará los siguientes tres comandos como parámetro GET y actuará de la siguiente manera:
// INSERT_NOTIFICATION – Inserta la notificación en la tabla [notificaciones]
// FETCH_NOTIFICATIONS: obtenga todas las notificaciones para un usuario de la tabla [notificaciones]
// DELETE_NOTIFICATIONS: elimina todas las notificaciones para un usuario de la tabla [notificaciones]
// SET_IS_VIEWED_FLAG – Llama a este comando desde el front-end cuando el usuario ha visto la notificación
$ comando = “”;
if (isset ($ _ GET [‘comando’])) {$ comando = $ _GET [‘comando’]; }
$ user_id = “”;
if (isset ($ _ GET [‘user_id’])) {$ user_id = $ _GET [‘user_id’]; }
if (strcmp ($ user_id, “”) == 0) {echo “
Error: user_id debe especificarse como parámetro GET.”; salida; }
if (strcmp ($ command, “”) == 0) {
echo “
Lo sentimos, no se especificó ningún comando. Saliendo …”;
salida;
}
// Abra la conexión de la base de datos MySQL aquí y seleccione la base de datos en la que se ha creado la tabla [notificaciones]
$ servername = “localhost”;
$ username = “root”;
$ contraseña = “”;
$ dbname = “notifications_db”;
// Crear conexión
$ conn = new mysqli ($ nombre de servidor, $ nombre de usuario, $ contraseña, $ dbname);
// Verifica la conexión
if ($ conn-> connect_error) {
morir (“Error de conexión:”. $ conn-> connect_error);
}
if (strcmp ($ command, “INSERT_NOTIFICATION”) == 0) {
$ notificación_texto = “”;
if (isset ($ _ GET [‘notificación_texto’])) {$ notificación_texto = $ _GET [‘notificación_texto’];
}
$ is_viewed = “”;
if (isset ($ _ GET [‘is_viewed’])) {$ is_viewed = $ _GET [‘is_viewed’]; }
if (strcmp ($ notificación_texto, “”) == 0) {
echo “
Error: notificación_texto debe especificarse como parámetro GET.”;
salida;
}
if (strcmp ($ is_viewed, “”) == 0) {
echo “
Error: is_viewed debe especificarse como parámetro GET.”;
salida;
}
// Insertar notificación en la tabla para un usuario dado
$ sql = “seleccionar * de las notificaciones”;
$ resultado = $ conn-> consulta ($ sql);
$ id = mysql_num_rows ($ resultado);
$ id = $ id + 1;
$ creation_date_time = date (“Y: m: d H: i: s”);
$ view_date_time = date (“Y: m: d H: i: s”);
$ is_viewed = “NO”;
$ sql = “INSERTAR EN` notificaciones` (`id`,` creation_date_time`, `view_date_time`,` user_id`, `notify_text`,` is_viewed`) VALUES (‘”. $ id.”‘, “‘. $ creation_date_time . “‘,'”. $ view_date_time. “‘,'”. $ user_id. “‘,'”. $ notify_text. “‘,'”. $ is_viewed. “‘)”;
$ resultado = $ conn-> consulta ($ sql);
$ conn-> close ();
salida;
}
if (strcmp ($ command, “FETCH_NOTIFICATIONS”) == 0) {
// Seleccione todas las notificaciones para un usuario_id dado y regrese en formato JSON
$ sql = “seleccione * de las notificaciones donde use_id = ‘”. $ user_id. “‘ y is_viewed = ‘NO'”;
$ res = mysqli_query ($ con, $ sql);
$ resultado = array ();
while ($ row = mysqli_fetch_array ($ res)) {
array_push ($ result, array (‘id’ => $ row [0], ‘creation_date_time’ => $ row [1], ‘view_date_time’ => $ row [2], ‘user_id’ => $ row [3] , ‘notify_text’ => $ fila [4], ‘is_viewed’ => $ fila [5]));
}
$ conn-> close ();
echo json_encode (array (“resultado” => $ result_array));
// Aquí puede formatear todas las notificaciones en un código HTML bien organizado al igual que Facebook para presentar de manera agradable
// Por ejemplo, se devuelve en formato JSON
salida;
}
if (strcmp ($ command, “DELETE_NOTIFICATIONS”) == 0) {
// Eliminar todas las notificaciones para un usuario_id dado
$ sql = “eliminar de notificaciones donde use_id = ‘”. $ user_id. “‘”;
$ res = mysqli_query ($ con, $ sql);
$ conn-> close ();
salida;
}
if (strcmp ($ command, “SET_IS_VIEWED_FLAG”) == 0) {
// Actualice aquí el indicador is_viewed a YES para la notificación y user_id
salida;
}

3er Paso: Código JavaScript de front-end para mostrar notificaciones:

Para mostrar notificaciones en la página HTML front-end, podemos hacer una llamada ajax a nuestro controlador (notifications_controller.php) de esta manera:

display_notifications.html

función show_notifications () {
// user_id = 1 ID del primer usuario
// comando = FETCH_NOTIFICATIONS
var show_notifications_url = “http://www.yourdomanin.com/notifications_controller.php?command=FETCH_NOTIFICATIONS&user_id=1”;
$ (documento) .ready (función () {
$ .ajax ({
url: show_notifications_url,
caché: falso
éxito: función (html) {
$ (“# notificación_resultados”). append (html);
// Cambia el contenido del DIV en la página de perfil del usuario donde se mostrarán las notificaciones
}}); });
} // función show_notifications
función startTimer () {
// llame a show_notifications
mostrar notificaciones();
// luego comienza el intervalo
setInterval (show_notifications, 30000); // Actualizar después de 30 segundos
} // función startTimer ()

// Llame a la función show_notifications automáticamente cuando se cargue la página HTML y configure un temporizador de JavaScript para que se actualice cada 30 segundos

Cuarto paso: pantalla administrativa para enviar notificaciones a los usuarios registrados:

Cree una GUI en formato HTML que acepte los detalles del usuario y los detalles de las notificaciones y se insertará en la tabla [notificaciones].

create_notifications.html

función create_notifications () {
// user_id = 1 ID del primer usuario
// comando = INSERT_NOTIFICATION
var create_notifications_url = “http://www.yourdomanin.com/notifications_controller.php?command=INSERT_NOTIFICATION&user_id=1&creation_date_time=201610101200&view_date_time=2016101012000&notification_text=Hello&is_viewed=NO”;
$ (documento) .ready (función () {
$ .ajax ({
url: create_notifications_url,
caché: falso
éxito: función (html) {
}}); }); }

El vendedor listo para usar

Related Content

¿Por qué React se parece a PHP?

Cómo optimizar imágenes para mi sitio

¿Qué es alert (1) ?

.NET MVC o MEAN? ¿Por qué?

¿Cuál es la diferencia de rendimiento entre 'let' y 'var' en JavaScript?

Hola,

La cuestión de las notificaciones en vivo debe abordarse mediante una conexión constante con el servidor. El protocolo HTTP no tiene estado. Hay una solicitud y respuesta y eso es todo. El servidor no puede iniciar la conexión con el cliente. Quiero decir que el servidor HTTP no puede enviar datos al navegador a través de solo HTTP.

Si piensa de esta manera, todo el contenido que obtiene cuando navega por la web son respuestas a su solicitud.

Las notificaciones son algo que se origina en el servidor (debido a la acción de algún otro usuario como un mensaje, actualización de estado, etc.).

La pregunta es cómo ser derribado?

Respuesta: 1) Haz otra solicitud. Podemos hacer un bucle de JavaScript que seguirá enviando solicitudes al servidor. Siempre que el servidor tenga alguna notificación, se recibirá en la respuesta. Un código javascript será algo como esto:

función getNotification () {
$ .post (‘ http: // servidor / notificación / & # 039 ;, {userid: userid, contraseña: contraseña}, función (raw) {
datos var = $ .parseJSON (sin procesar);
if (data.hasNotification) {
sendBroserNotification (data.message);
}
settimeout (5000, getNotification);
});
}

La función de notificación sendBrowserNotification puede ser como este violín

2) Use una conexión de socket persistente: es posible no sondear siempre, sino depender de la conexión de websocket. Websocket es muy común en estos días. Puede usar y usar fácilmente la función de devolución de llamada para mostrar notificaciones en el navegador.

Eche un vistazo a este ejemplo de cliente websocket que solo se conecta al servidor.

Ahora la pregunta de la respuesta! Cómo hacer el servidor websocket. Tarea bien difícil hecha fácil con sockets web trinqueteados

Puede notar que necesita hacer un seguimiento del usuario que se conecta. Esto puede hacerlo almacenando el ID de recurso del socket. Una vez que se ha establecido una conexión inicial desde el navegador web al servidor websocket, puede enviar notificaciones, mensajes, código html y lo que no.

Akhilesh Maurya

primero deberá crear un trabajador de servicio que irá a una url y obtendrá los resultados. Tendrá que ver su API y cómo usarla. Además, tendrá que tener un script que envíe una sola vez los datos, como una función llamada “push_notifications” ejemplo (php):

función push_notifications ($ User_id) {/ * creo que puede obtener los valores de cookies de esta API, así que … poner la identificación del usuario allí * /
$ con = mysqli_connect ($ host, $ usuario, $ pass, $ base de datos, $ puerto);
$ query = mysqli_query ($ con, ‘SELECT * from push_notifications_table donde userid = “‘. mysqli_real_escape_string ($ con, $$ user_id). ‘” y push_complete = “0”‘);
$ temp_results = array ();
if (mysqli_num_rows ($ consulta)> 0) {
para ($ i = 0; $ i $ temp_results [] = $ resultados = mysqli_fetch_assoc ($ consulta);
}
}
/*y así sucesivamente*/
/ * en algún lugar cerca de la impresión y el regreso … * /

mysqli_query ($ con, ‘Actualizar push_notifications_table establece’ push_notifications_table ‘valor (‘ 1 ‘) donde userid = “‘. mysqli_real_escape_string ($ con, $$ user_id). ‘” y push_id = “% the_push_notification_id%”‘);
// print_r (% formated_data%);
// devuelve verdadero;
}

Akhilesh Maurya

El siguiente enlace debe proporcionarle una respuesta perfecta

¿Qué puedo usar para agregar notificaciones dinámicas en vivo a mi sitio web?

Akhilesh Maurya

¿Por qué no usas getStream para crear notificaciones?

Personalmente he trabajado con getStream y es realmente genial.

Sin embargo, si desea verificar acerca de PHP y MySQL, puede encontrarlo aquí.

http://blog.ostrainer.com

Akhilesh Maurya

Bueno, las notificaciones en vivo también necesitarán ‘Ajax’. Las llamadas Ajax deben implementarse para que el sistema siga buscando las notificaciones y dé la ilusión de notificaciones en vivo.

Akhilesh Maurya

More Interesting

¿Qué es la teoría del marco relacional?

¿Cuál es mejor: construir primero la página de destino antes o después de toda la página web?

¿Cuál es la mejor clase de desarrollo web en Pune? ¿Por qué?

¿Cuáles son las ventajas de seleccionar un servicio de diseño web confiable y de calidad?

¿Cómo hago para que un usuario envíe un sitio de revisión usando WordPress o algo similar?

¿Por qué un desarrollador elegiría usar AngularJs sobre jQuery?

¿Continuarán los desarrolladores desarrollando para IE6 en 2011? ¿Por qué o por qué no?

¿Qué debo elegir para hacer una comunidad educativa? ¿Qué CMS?

¿Cuándo uso asíncrono y cuándo uso aplazar?

¿Cómo creamos aplicaciones en angular js 2.0?

¿Cuáles son los mejores recursos (libros, clases, otros) que los cofundadores no técnicos pueden usar para ponerse al día sobre cuestiones tecnológicas relacionadas con las nuevas empresas web?

¿Cuál es el mejor lugar / sitio web para aprender a hablar inglés (no hay sitios web de citas, por supuesto)?

¿Qué es XAMPP y cómo usarlo?

¿Qué es la función de devolución de llamada en JavaScript?

¿Es posible ser seleccionado en GSoC con conocimientos en HTML, CSS y Python básico?