En este artículo, aprenderá cómo codificar aplicaciones angulares en tiempo real con Pusher. Haremos una aplicación que proporcione comentarios en tiempo real cuando se haga clic en una publicación, como la función de aplauso de Medium!

Que es empujador?

Pusher es un servicio que proporciona a los desarrolladores API que les permiten integrar funcionalidades en tiempo real en aplicaciones web, móviles y de back-end. Para obtener más información sobre Pusher, echa un vistazo a este video tutorial para una introducción.

Comenzando con el empujador en angular

Como se mencionó al comienzo de este tutorial, nuestra aplicación le dará comentarios en tiempo real cada vez que alguien haga clic en una publicación.. 

Para principiantes, asegúrese de tener Node y npm instalados en su máquina. También necesitarás Angular CLI para arrancar rápidamente nuestra aplicación, así que asegúrate de tenerla instalada también. Si no tiene la CLI de Angular instalada, simplemente ejecute el siguiente comando.

npm install -g @ angular / cli

A continuación, use Angular CLI para crear la aplicación Angular.

ng nuevo empujador angular

La interfaz de usuario de nuestra aplicación será muy simple. Tendrá una publicación, un botón de aplauso que se representará con un icono de mano y un contador de la cantidad de palmadas que ha obtenido la publicación. Abierto app.component.html y agregue el siguiente código, en el que vinculamos el evento de clic con el Aplausos() función.

 
 title! 
 
Este artículo mostrará cómo implementar la funcionalidad en tiempo real en aplicaciones angulares usando Pusher. Haremos una aplicación que proporcione comentarios en tiempo real cuando se haga clic en una publicación. La aplicación se centrará principalmente en agregar funcionalidad en tiempo real a la aplicación Angular.
 
La funcionalidad en tiempo real es un componente importante en las aplicaciones modernas. Los usuarios desean comentarios inmediatos cuando interactúan con aplicaciones. Esto ha llevado a muchos desarrolladores a considerar la inclusión de esta funcionalidad debido a la tremenda demanda..
 
Que es empujador?
 
Pusher es un servicio que proporciona a los desarrolladores API que les permiten integrar funcionalidades en tiempo real en aplicaciones web, móviles y de back-end..
 
 
aplausos
  
 

Agregando Pusher a tu aplicación

Primero necesitaremos instalar la biblioteca de Pusher con el npm instalar mando. 

npm instalar --save pusher-js

A continuación, cargue la biblioteca de Pusher agregando el siguiente script en el angular.json expediente.

//angular.json "scripts": ["... /node_modules/pusher-js/dist/web/pusher.min.js"]

También deberá tener credenciales de Pusher, que se pueden obtener desde el panel de Pusher..

Para obtener las credenciales, inicie sesión en el panel de Pusher y haga clic en Crear nueva aplicación. Luego, completará algunos detalles sobre su aplicación y finalmente hará clic en Crear mi aplicación. Pusher también le proporciona un código para comenzar de acuerdo con la tecnología que ha elegido. El aspecto más importante de este proceso son las credenciales de la aplicación, que se pueden encontrar en el Teclas de aplicación lengüeta.

Integrar el servicio Pusher

Entonces crearemos nuestra PusherService ejecutando el comando:

ng generar servicio empujador

El comando anterior creará dos archivos, a saber pusher.service.ts y pusher.service.spec.ts, que contienen algún código repetitivo para comenzar. 

Ahora importe el servicio en el módulo principal e inclúyalo como proveedor de la siguiente manera:

// app.module.ts importa PusherService de './pusher.service' ;… @NgModule (suppliers: [PusherService], ...)

Angular también proporciona un archivo de entorno para almacenar credenciales por motivos de seguridad: incluya su tecla de empuje en medio ambiente.ts.

// environment.ts export const environment = pusher: production: false, key: '',;

A continuación, importe el módulo de entorno para su uso, declare Pusher como una importación desde el script que agregamos anteriormente en angular.json, y declarar un Arribista constante en el PusherService archivo de la siguiente manera:

// pusher.service.ts import environment de '… / environment / environment'; declarar const Pusher: cualquiera; clase de exportación PusherService pusher: any; constructor () this.pusher = new Pusher (environment.pusher.key); 

Queremos hacer una solicitud que contenga el número de aplausos al servidor cada vez que a una persona le guste una publicación y también suscribirse a nuestro canal Pusher. Adelante e incluye el HttpClient en el constructor de la PusherService. Tu servicio de pusher El archivo ahora debería verse así:

declarar const Pusher: cualquiera; importar Inyectable desde '@ angular / core'; importar entorno desde '... / ambientes / entorno'; importe HttpClient desde '@ angular / common / http'; @Injectable (includedIn: 'root') exportar clase PusherService pusher: any; canal: cualquiera; constructor (http privado: HttpClient) this.pusher = new Pusher (environment.pusher.key); this.channel = this.pusher.subscribe ('my_channel'); 

A continuación, cree una función que envíe el número de aplausos al servidor cuando se hace clic en el botón de aplauso.

// pusher.service.ts export class PusherService //… clap (claps_count) this.http.get ('http: // localhost: 3000 / add / $ claps_count') .subscribe (); 

Aún en el lado del cliente, escribiremos una función que escuche los eventos de clics de la aplicación angular e incremente el número de aplausos. También vincularemos el servicio Pusher a nuestro evento..

importe PusherService desde './pusher.service'; // ... la clase de exportación AppComponent implementa OnInit title = 'Pusher Realtime Notifications'; palmadas: cualquiera = 0; // Escuche el evento clic y envíe incrementos de aplausos al servidor Aplausos () this.claps = parseInt (this.claps, 10) + 1; this.pusherService.clap (this.claps);  constructor (private pusherService: PusherService)  ngOnInit () this.pusherService.channel.bind ('new-event', data => this.claps = data.claps;);  

Construyendo el Servidor Node.js

Se usará un servidor para recibir las solicitudes de datos de la aplicación Angular. Lo construiremos utilizando Express, un marco de Node.js simple y rápido..

Crear un directorio llamado servidor, y ejecuta los siguientes comandos.

mkdir server cd server npm init

Esto crea todos los archivos necesarios para arrancar una aplicación Node.js. A continuación, instale los módulos Pusher, Express y body-parser..

 npm install --save pusher express body-parser 

A continuación, crea un archivo index.js e importar todos los módulos requeridos:

const express = require ('express'); const http = require ('http'); const bodyParser = require ('body-parser'); const port = process.env.PORT || «3000»; const app = express (); const Pusher = require ('empujher');

El siguiente paso es iniciar Pusher mediante la creación de una instancia de Pusher con las credenciales necesarias. Puede obtener las credenciales del panel de Pusher.

const empujer = new Pusher (appId: '607521', clave: 'e9f68f905ee8a22675fa', secreto: '37ab37aac91d180050c2',);

Defina middleware, encabezados CORS y el resto de las configuraciones de la aplicación Node.

// define middleware app.use (bodyParser.json ()); app.use (bodyParser.urlencoded (extended: false)); app.use ((req, res, next) => res.header ("Access-Control-Allow-Origin", "*") res.header ("Access-Control-Allow-Headers", "Origin, X -Requested-With, Content-Type, Accept ") next ();); // Definir rutas app.set ('puerto', puerto); const server = http.createServer (aplicación); server.listen (port, () => console.log ('Ejecutando en el puerto $ port'));

Luego, crearemos el punto final que escuchará las solicitudes entrantes de nuestra aplicación Angular. El punto final obtendrá el número de aplausos del cliente y luego desencadenará un evento de mensajería.

//server.js… app.get ("/ add /: claps", function (req, res) pusher.trigger ("my_channel", "new-event", );); 

Nuestro servidor ahora está completo; puedes empezar a escuchar las suscripciones entrantes ejecutando npm start.

Probando nuestra aplicación

Ahora ejecuta el cliente y el servidor al mismo tiempo emitiendo ng servir para la aplicación Angular y npm start para el Servidor Express.

Asegúrese de que ha habilitado los eventos del cliente en el panel de Pusher, como se muestra a continuación.

Vaya a http: // localhost: 4200 y comience a interactuar con la aplicación haciendo clic en el botón de aplausos. Asegúrese de tener dos pestañas una al lado de la otra para poder observar en tiempo real cómo aumenta el número de palmadas cuando le gusta una publicación..

Otra característica interesante de Pusher es que puede ver todas las conexiones y mensajes enviados mediante el panel de control. Aquí hay una captura de pantalla del panel de esta aplicación..

Conclusión

Como ha visto, es muy fácil integrar Pusher con una aplicación Angular. Esto hace posible agregar funcionalidades como el intercambio de datos en tiempo real y las notificaciones push a su aplicación.

Pusher también está disponible para diferentes plataformas, así que dirígete al sitio y descubre la magia de Pusher.