Dans cet article, vous apprendrez à coder des applications angulaires en temps réel avec Pusher. Nous allons créer une application qui donne des commentaires en temps réel quand un message est cliqué, exactement comme la fonctionnalité d'applaudissements de Medium.!

Qu'est-ce qu'un poussoir?

Pusher est un service qui fournit aux développeurs des API qui leur permettent d’intégrer des fonctionnalités temps réel dans des applications Web, mobiles et back-end. Pour en savoir plus sur Pusher, consultez ce didacticiel vidéo pour une introduction..

Débuter avec Pusher in Angular

Comme mentionné au début de ce didacticiel, notre application donnera des informations en temps réel chaque fois que quelqu'un clique sur un message.. 

Pour commencer, assurez-vous que Node et NPM sont installés sur votre ordinateur. Vous aurez également besoin de la CLI angulaire pour amorcer rapidement notre application, alors assurez-vous de l’avoir également installée. Si vous n'avez pas installé Angular CLI, lancez simplement la commande suivante.

npm install -g @ angular / cli

Ensuite, utilisez Angular CLI pour créer l'application Angular..

ng nouveau poussoir angulaire

L'interface utilisateur de notre application sera très simple. Il y aura un message, un bouton d’applaudissements qui sera représenté par une icône représentant une main et un compteur du nombre de coups reçus. Ouvrir app.component.html et ajoutez le code suivant, dans lequel on lie l'événement click à la Applaudissements() une fonction.

 
  Titre ! 
 
Cet article montrera comment implémenter une fonctionnalité temps réel dans les applications angulaires à l'aide de Pusher. Nous allons faire une application qui donne des commentaires en temps réel quand un message est cliqué. L'application se concentrera principalement sur l'ajout de fonctionnalités en temps réel à l'application Angular.
 
La fonctionnalité temps réel est un composant important des applications modernes. Les utilisateurs veulent un retour immédiat lorsqu'ils interagissent avec les applications. Cela a poussé de nombreux développeurs à envisager l’inclusion de cette fonctionnalité en raison de la forte demande.
 
Qu'est-ce qu'un poussoir?
 
Pusher est un service qui fournit aux développeurs des API leur permettant d’intégrer des fonctionnalités temps réel dans des applications Web, mobiles et back-end..
 
 
applaudissements
  
 

Ajout de pousseur à votre application

Nous devrons d’abord installer la bibliothèque Pusher avec le npm installer commander. 

npm installer --save pusher-js

Ensuite, chargez la bibliothèque de pousseurs en ajoutant le script suivant dans le dossier angular.json fichier.

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

Vous aurez également besoin des informations d'identification du pousseur, qui peuvent être obtenues à partir du tableau de bord du pousseur..

Pour obtenir les informations d'identification, connectez-vous au tableau de bord Pusher et cliquez sur Créer une nouvelle application. Vous allez ensuite renseigner quelques détails sur votre candidature et enfin cliquer sur Créer mon application. Pusher vous donne également du code pour démarrer en fonction de la technologie que vous avez choisie. L'aspect le plus important de ce processus concerne les informations d'identification de l'application, disponibles sur le Touches d'application languette.

Intégrer le service de pousseur

Nous allons ensuite créer notre PusherService en lançant la commande:

ng générer un service pousseur

La commande ci-dessus va créer deux fichiers, à savoir pusher.service.ts et pusher.service.spec.ts, qui contiennent du code passe-partout pour commencer. 

Importez maintenant le service dans le module principal et incluez-le en tant que fournisseur comme suit:

// app.module.ts importer PusherService à partir de './pusher.service';… @NgModule (providers: [PusherService],…)

Angular fournit également un fichier d’environnement permettant de stocker les informations d’identité à des fins de sécurité: incluez votre clé de poussoir dans environnement.ts.

// environment.ts export const environment = pousseur: production: false, clé: '';

Ensuite, importez le module d'environnement pour l'utiliser, déclarez Pusher comme une importation à partir du script que nous avons ajouté précédemment angular.json, et déclarer un Poussoir constante dans le PusherService déposer comme suit:

// pusher.service.ts import environment de '… / environment / environment'; déclarer const Pusher: any; classe d'exportation PusherService pusher: any; constructor () this.pusher = new Pusher (environment.pusher.key); 

Nous voulons faire une demande contenant le nombre de claps au serveur chaque fois qu'une personne aime un message et également vous abonner à notre canal Pusher. Allez-y et incluez le HttpClient dans le constructeur du PusherService. Votre pusher.service Le fichier devrait maintenant ressembler à ceci:

déclarer const Pusher: any; import Injectable from '@ angular / core'; importer environnement de '… / environnements / environnement'; importer HttpClient à partir de '@ angular / common / http'; @Injectable (fournirIn: 'root') classe d'exportation PusherService pusher: any; canal: tout; constructeur (privé http: HttpClient) this.pusher = new Pusher (environment.pusher.key); this.channel = this.pusher.subscribe ('my_channel'); 

Ensuite, créez une fonction qui envoie le nombre de claps au serveur lorsque vous cliquez sur le bouton d'applaudissements..

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

Toujours du côté client, nous écrirons une fonction qui écoute les événements de clic de l'application angulaire et incrémente le nombre de claps. Nous allons également associer le service Pusher à notre événement..

importer PusherService de './pusher.service'; //… la classe d'exportation AppComponent implémente OnInit title = 'Notifications en temps réel pour pousseurs'; claps: any = 0; // Écouter l'événement click et envoyer les incrustations incrémenter au serveur Applause () this.claps = parseInt (this.claps, 10) + 1; this.pusherService.clap (this.claps);  constructeur (private pusherService: PusherService)  ngOnInit () this.pusherService.channel.bind ('new-event', data => this.claps = data.claps;);  

Construire le serveur Node.js

Un serveur sera utilisé pour recevoir les demandes de données de l'application Angular. Nous le construirons à l'aide d'Express, un framework simple et rapide Node.js..

Créez un répertoire nommé serveur, et lancez les commandes suivantes.

mkdir server cd server npm init

Cela crée tous les fichiers nécessaires pour amorcer une application Node.js. Ensuite, installez les modules Pusher, Express et Body-Parser..

 npm install --save pusher express analyseur de corps 

Ensuite, créer un fichier index.js et importer tous les modules requis:

const express = require ('express'); const http = require ('http'); const bodyParser = require ('analyseur de corps'); const port = process.env.PORT || "3000"; const app = express (); const Pusher = require ('pousseur');

L'étape suivante consiste à initialiser Pusher en instanciant Pusher avec les informations d'identification nécessaires. Vous pouvez obtenir les informations d'identification à partir du tableau de bord Pusher..

const pusher = new Pusher (appId: '607521', clé: 'e9f68f905ee8a22675fa', secret: '37ab37aac91d180050c2',);

Définir le middleware, les en-têtes CORS et le reste des configurations d'application Node.

// définir le middleware app.use (bodyParser.json ()); app.use (bodyParser.urlencoded (extended: false)); app.use ((req, res, next) => res.header ("Accès-Control-Allow-Origin", "*")) res.header ("Accès-Control-Allow-Headers", "Origine, X, -Requested-With, Content-Type, Accept ") next ();); // Définir les routes app.set ('port', port); serveur const = http.createServer (app); server.listen (port, () => console.log ('Exécution sur le port $ port'));

Nous créerons ensuite le terminal qui écoutera toutes les demandes entrantes provenant de notre application Angular. Le point final obtiendra le nombre de claps du client, puis déclenchera un événement de messagerie..

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

Notre serveur est maintenant complet. vous pouvez commencer à écouter les abonnements entrants en exécutant npm start.

Test de notre application

Maintenant, exécutez le client et le serveur en même temps en émettant ng servir pour l'application angulaire et npm start pour le serveur express.

Assurez-vous d'avoir activé les événements clients sur le tableau de bord du pousseur, comme indiqué ci-dessous..

Accédez à http: // localhost: 4200 et commencez à interagir avec l'application en cliquant sur le bouton d'applaudissements. Assurez-vous de disposer de deux onglets côte à côte pour pouvoir observer en temps réel l'augmentation du nombre d'applaudissements lorsqu'un poste est apprécié..

Une autre fonctionnalité intéressante de Pusher est que vous pouvez afficher toutes les connexions et tous les messages envoyés à l'aide du tableau de bord. Voici une capture d'écran du tableau de bord pour cette application.

Conclusion

Comme vous l'avez vu, il est très facile d'intégrer Pusher à une application angulaire. Cela permet d'ajouter des fonctionnalités telles que le partage de données en temps réel et les notifications push vers votre application..

Pusher est également disponible pour différentes plates-formes, alors rendez-vous sur le site et découvrez la magie de Pusher.