PubSub es un patrón de diseño que nos permite establecer una comunicación de eventos entre distintas piezas de nuestro proyecto. A diferencia de patrones como el patrón de inyección de dependencias, PubSub lo hace a través de un bus de eventos creado en otro archivo. En este post, te enseñaremos cómo controlar mensajes con PubSub usando los métodos suscribe y publish de su clase.
Un poco de contexto
En nuestro post sobre implementar patrón PubSub con clase en JavaScript te hemos mostrado el código necesario para implementar el patrón PubSub en una clase. Esta clase contiene los métodos suscribe y publish en PubSub, que a su vez definen distintos parámetros con los que se comunican eventos y se reacciona a ellos.
Además de ser un patrón, PubSub es una herramienta gestionada por Google para comunicar bases de datos. Si quieres conocer más sobre esta herramienta, te aconsejamos leer su documentación en Google Cloud.
A continuación, te demostraremos cómo controlar mensajes con PubSub gracias al uso de los métodos anteriores y sus parámetros para hacer que una acción personalizada se ejecute.
¿Cómo comunicar eventos con PubSub?
Para controlar mensajes con PubSub, primero debemos insertar los métodos publish y suscribe en los elementos que ejecutarán cada rol. Para ejemplificar esto, pensemos que queremos comunicar un error para convertirlo en un elemento de interfaz que vea el usuario. Algo como lo siguiente:
Hemos creado dos piezas fundamentales para nuestro proyecto: un controlador de datos DataListController, que publicará el error con el que se encuentre, y un NotificationController, que tomará este error y lo pintará en pantalla como una alerta. En este sentido, el DataListController es el publisher pues comunica el evento y el NotificationController es el suscriber que reacciona a este.
Por lo anterior, hemos insertado la siguiente línea de código en el catch de DataListController:
pubSub.publish («SHOW_ERROR_NOTIFICATION»);
Por el otro lado, hemos insertado las siguientes líneas de código en nuestro NotificationController para suscribirlo a este evento:
pubSub.suscribe («SHOW_ERROR_NOTIFICATION», ( ) => {
this.show ( );
});
}
Con las líneas de código anteriores, hemos logrado pasarle el evento a NotificationController y definir su reacción (un método show que hemos creado en nuestro post sobre crear un elemento personalizado en frontend). Sin embargo, nuestro mensaje de alerta solo muestra undefined. A continuación, te enseñaremos cómo controlar mensaje con PubSub para que las alertas pintadas muestren un mensaje personalizado.
¿Cómo controlar mensajes con PubSub?
Para controlar mensajes con PubSub, por lo menos con la clase y métodos que nosotros hemos usado, debemos usar el segundo parámetro del método publish. Es decir, al igual que en el método suscribe hemos pasado el evento y la reacción, en el método publish debemos pasar el evento y un parámetro de información. A continuación, te recordamos las funciones de cada método:
suscribe (topic, listener)
publish (topic, info)
Como puedes ver, el método publish tiene un segundo parámetro que nos permite pasarle datos al suscriber para que use en su reacción. Entonces, para controlar mensajes con PubSub, debemos pasarle el segundo parámetro a publish. En nuestro caso, ese segundo parámetro será un string. A continuación, te mostramos cómo quedaría la línea de código de DataListController para mandar un error obteniendo los datos:
pubSub.publish («SHOW_ERROR_NOTIFICATION», «Error obteniendo datos»).
Ahora que tenemos este mensaje, debemos pasarlo al suscriber. Para ello, usamos el parámetro que hemos definido para nuestro método show: message. A continuación, te mostramos cómo quedan las líneas de código de nuestro suscriptor:
pubSub.suscribe («SHOW_ERROR_NOTIFICATION», (message) => {
this.show (message);
});
}
Con estos simples cambios en las anteriores líneas de código, hemos logrado controlar mensajes con PubSub y hacer que nuestra alerta tenga un mensaje personalizado según la situación.
¿Cuál es el siguiente paso?
Ahora que sabes cómo controlar mensajes con PubSub, ¡te invitamos a probar este patrón en tus propios proyectos! Para seguir aprendiendo sobre la creación y desarrollo de todo tipo de proyectos web, te recomendamos nuestro Desarrollo Web Full Stack Bootcamp, un espacio donde aprenderás la teoría y práctica de lenguajes, patrones y herramientas fundamentales para este ejercicio. ¿A qué esperas para dar el siguiente paso en tu formación? ¡Pide ya más información y empieza a camibar tu vida!
