Eventos de publicación-suscripción en una app Ionic

El paso de mensajes es un patrón que garantiza flexibilidad en las aplicaciones, en la actualidad existen implementaciones en varios lenguajes para su uso en lo interno de aplicaciones y para su trabajo en aplicaciones que operen de forma desacopladas a través de un tercero como es el caso de Mosquitto, RabbitMQ, etc. En este artículo hablaremos de publish-subscribe dentro de una aplicación Ionic, en post posteriores hablaremos de MQTT, creo que es un protocolo que aunque surgió inicialmente para la Internet de las Cosas (IoT) debemos tenerlo muy en cuenta para paso de mensajes y priorizarlo sobre HTTP.

El patrón

Publicador/Suscriptor funciona de la siguiente forma desde una vista de alto nivel en lo interno de una aplicación.

Implementación en Ionic 2/3 y valor práctico

El valor práctico es infinito, por solo citar un ejemplo imaginemos un aplicación Ionic con barra lateral (sideMenu) y que el menú de la izquierda es contextual y depende del usuario que está logueado en el sistema. Por defecto cuando creamos una aplicación de tipo sideMenu la barra lateral se carga en el app.component.html, lo que significa que antes de loguear el usuario ya se construyo la barra lateral, entonces sería útil contar con un mecanismo que cuando el usuario haga loguin envié a la barra lateral los menus que deben visualizarse de acuerdo al usuario o a sus preferencias. En este escenario resulta útil crear un mecanismo publicador-suscriptor, donde en el constructor de app.components tengamos un suscriptor a un token por ejemplo usercredentials en el cual le escribiremos la credenciales del usuario cuando esten disponibles (posterior al proceso de loguin) y en el proceso de loguin cuando este se complete exitosamente colocamos un publicador que escriba en el token usercredentials entonces los valores necesitados para actualizar el menú de la barra lateral.

Creando el suscriptor para el ejemplo anterior

Para el suscriptor solo importamos Events de ionic-angular y en el constructor añadimos la líneas que aparecen debajo. El método refreshsidemenu (user, password) se encargará de cargar el menú lateral pertinente para el usuario user.

import { Events } from 'ionic-angular';
...
constructor (public events: Events) {
....
this.events.subscribe("usercredentials", (user,password) => {
this.refreshsidemenu(user,password);
})
...
}

Para el caso del publicador no difiere mucho en implementación, siendo aún mas sencillo.

import { Events } from 'ionic-angular';
...
constructor (public events: Events) {
....
this.events.publish("usercredentials", "unusuario","unpass");
...
}

Siempre el primer parámetro de publish es el token al cual le estamos poniendo el/los mensajes, que son en definitiva los siguiente parametros del publish.

Esto enviará un mensaje a todos los suscriptores de una nuestra aplicación que esten leyendo el token usercredentials, la valor práctico de aplicación es alto.

NOTA: Este artículo es tomado del blog Código 200, el cual es propiedad del autor.