Esta es la segunda parte del post anterior, Tutorial implementación de notificaciones push en Angular, en el cual creamos un cliente con Angular para recibir notificaciones push. En este nuevo post vamos a desarrollar un servidor web para emitir nuestras notificaciones.
Comencemos.
En esta ocasión para desarrollar nuestro servidor web, voy a utilizar Express como servidor web y la siguiente librería: web-push, que nos ayudara a enviar nuestros mensajes a los suscriptores según el protocolo Web Push.
Credenciales
Antes de comenzar propiamente a desarrollar nuestro servidor de notificaciones debemos crear unas credenciales VAPID.
VAPID es un protocolo que permite restringir la validez de una suscripción a un servidor de aplicaciones específico. Es decir, al usar VAPID solo un servidor podrá enviar notificaciones a su suscriptor. Además al utilizar este protocolo agregamos más información a las notificaciones push. De esta forma el operador del servicio push sabrá quien le está enviando las notificaciones.
Una de las ventajas de utilizar la librería web-push es que no permite crear unas nuevas credenciales VAPID para nuestro servidor.
Para ello utilizaremos el siguiente comando:
./node_modules/.bin/web-push generate-vapid-keys
Que nos generará tanto la clave pública como privada para utilizar nuestro servidor de notificaciones.
=======================================
Public Key:
BJIi33DcIJFfrrvao9CKgRW-dc2W14C6ZLCSoI1UgAd9b-0gA2odF496J7_iNWFkyiBtM8Hhi3fjmcGqjqwDPNg
Private Key:
VIH2GywYhfj85evbo-rES1MgygmJCRi9zGbSU16PxbQ
=======================================
Una vez hemos creado nuestras credenciales comenzaremos a desarrollar nuestro servidor web.
Servidor
Como he comentado anteriormente vamos a utilizar express como servidor web, que será el encargado de enviar las notificaciones a los clientes suscritos.
Lo primero será instalar el paquete de express, si no lo hemos instalado con anterioridad. Además deberemos añadir el módulo body-parser de express que nos permitirá recuperar los datos de un formulario HTML.
Doy por hecho que ya conoces express y el módulo body-parser por lo que no voy a entrar en más detalle de cómo instalar ambos paquetes. En esta ocasión me centraré en el código para crear nuestro servidor de notificaciones.
Suscriptores
Nuestro servidor tendrá dos partes. Una donde se deberán dar de alta nuestros suscriptores para recibir nuestros mensajes, y un segunda parte que será la encarga de emitir los mensajes a nuestros suscriptores.
Para nuestra primera parte crearemos un nuevo endpoint, en el cual recibiremos las peticiones de los suscriptores con nuestra clave pública.
Si recuerdas el artículo "Tutorial implementación de notificaciones push en Angular" el usuario nos enviaba una petición post con un objeto que llamamos "subscription" con su información de conexión.
El código sería como el siguiente.
let Subcription;
app.post('/subscribe', (req, res) => {
Subcription = req.body;
res.status(201).json({status: 'Subscription Correct'});
sendMessage('Subscription Correct');
});
Este código crea un nuevo endpoint, subscribe de tipo post. En él se guardamos el cuerpo del mensaje recibido, que es el que posee la información de nuestro suscriptor en la variable Subcription que hemos definido con anterioridad a crear nuestro nuevo endpoiint. Como estamos haciendo una demo almacenamos la información en la variable Subcription pero en un proyecto real deberíamos tener una base de datos donde almacenar la información de todos nuestros suscriptores.
Una vez almacenado el cuerpo del mensaje enviamos un código de respuesta 201. Este código de respuesta de indica que la solicitud ha tenido éxito y se ha llevado a la creación de un recurso. Y posteriormente se invoca a la función sendMessage que será la encargada de enviar el mensaje "Subscription Correct" a nuestro suscriptor.
Mensaje
Para enviar el mensaje propiamente dicho utilizaremos la librería web-push que instalamos anteriormente.
Para ello lo primero que deberemos hacer es importarla antes de hacer uso de ella.
const webpush = require('web-push');
Una vez importada, deberemos configurarla. Para ello utilizaremos el método setVapidDetails, enviando los siguientes parámetros: una dirección de correo electrónico, y las claves pública y privada creadas al principio de este artículo.
const publicVapidKey = 'BJIi33DcIJFfrrvao9CKgRW-dc2W14C6ZLCSoI1UgAd9b-0gA2odF496J7_iNWFkyiBtM8Hhi3fjmcGqjqwDPNg';
const privateVapidKey = 'VIH2GywYhfj85evbo-rES1MgygmJCRi9zGbSU16PxbQ';
webpush.setVapidDetails('mailto:example@test.com', publicVapidKey, privateVapidKey);
Una vez importada y configurada la librería web-push, crearemos nuestra función de envió de notificaciones.
function sendMessage(message) {
const payload = JSON.stringify({
title: 'Test Push Notificaction',
message: message
});
webpush.sendNotification(subscription, payload).catch(error => {
console.error(error.stack);
});
}
Como puedes observar la función para el envió de las notificaciones es muy sencilla.
En primer lugar creamos un objeto JSON con las propiedades title y message, que contendrá el cuerpo de la notificación que queremos enviar a nuestros suscriptores. Y posteriormente llamamos al método sendNotification que será el encargado de enviar las notificaciones a nuestros suscriptores.
Final
Y este es el final de este segundo artículo donde hemos visto cómo programar tanto desde la parte del cliente, como de la del servidor el envío de notificaciones a los suscriptores de una página web.
Top comments (0)