I denne artikkelen lærer du hvordan du koder sanntids Angular apps med Pusher. Vi lager en app som gir tilbakemelding i sanntid når et innlegg klikkes - akkurat som Mediums applausfunksjon!

Hva er Pusher?

Pusher er en tjeneste som gir utviklere APIer som gjør at de kan integrere sanntidsfunksjoner i web-, mobil- og back-end-applikasjoner. For å lære mer om Pusher, sjekk ut denne opplæringsvideoen for en introduksjon.

Komme i gang med pusher i vinkel

Som nevnt i begynnelsen av denne opplæringen, vil vår app gi sanntids tilbakemelding når noen klikker et innlegg. 

For nybegynnere, sørg for at du har Node og npm installert på maskinen din. Du trenger også Angular CLI for å starte opp vår app raskt, så sørg for at du har den installert også. Hvis du ikke har Angular CLI installert, kan du bare utstede følgende kommando.

npm installer -g @ vinkel / cli

Deretter bruker Angular CLI til å lage Angular app.

ng ny pusher-vinkel

Brukergrensesnittet til vår app vil være veldig enkelt. Det vil ha et innlegg, en applausneknapp som vil bli representert av et håndikon, og en teller av antall klapper posten har fått. Åpen app.component.html og legg til følgende kode, der vi knytter klikkhendelsen til Bifall() funksjon.

 
 title! 
 
Denne artikkelen viser hvordan du implementerer sanntidsfunksjonalitet i Angular Applications ved hjelp av Pusher. Vi vil lage et program som gir tilbakemelding i sanntid når et innlegg klikkes. Programmet vil i hovedsak fokusere på å legge til sanntidsfunksjonalitet i Angular-applikasjonen.
 
Real-time funksjonalitet er en viktig komponent i moderne applikasjoner. Brukere vil ha umiddelbar tilbakemelding når de samhandler med applikasjoner. Dette har bedt mange utviklere om å vurdere å inkludere denne funksjonaliteten på grunn av stor etterspørsel.
 
Hva er Pusher?
 
Pusher er en tjeneste som gir utviklere APIer som gjør at de kan integrere sanntidsfunksjoner i web-, mobil- og back-end-applikasjoner.
 
 
klapper
  
 

Legge til Pusher til appen din

Vi må først installere Pusher biblioteket med npm installasjon kommando. 

npm installere - lagre pusher-js

Deretter laster du Pusher Library ved å legge til følgende skript i angular.json fil.

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

Du må også ha Pusher legitimasjon, som kan hentes fra Pusher dashbordet.

For å hente legitimasjonene, logg inn på Pusher dashbordet og klikk Opprett ny app. Deretter fyller du ut noen detaljer om søknaden din og endelig klikker du på Opprett min app. Pusher gir deg også noen kode for å komme i gang i henhold til teknologien du har valgt. Det viktigste aspektet av denne prosessen er app-legitimasjonene, som du finner på App Keys tab.

Integrer Pusher-tjenesten

Vi vil da skape vår PusherService ved å kjøre kommandoen:

ng generere service pusher

Kommandoen ovenfor vil opprette to filer, nemlig pusher.service.ts og pusher.service.spec.ts, som inneholder litt boilerplate kode for å komme i gang. 

Nå importerer tjenesten i hovedmodulen og inkluderer den som leverandør som følger:

// app.module.ts import PusherService fra './pusher.service';... @NgModule (leverandører: [PusherService], ...)

Angular gir også en miljøfil for lagring av legitimasjon for sikkerhetsformål: inkludere pushernøkkelen din environment.ts.

// environment.ts eksport const environment = pusher: produksjon: false, key: '',;

Deretter importerer du miljømodulen til bruk, erklærer Pusher som en import fra skriptet vi la til tidligere i angular.json, og erklære a Pusher konstant i PusherService filen som følger:

// pusher.service.ts importere environment fra '... / miljø / miljø'; erklære const Pusher: noen; eksport klasse PusherService pusher: any; constructor () this.pusher = new Pusher (environment.pusher.key); 

Vi ønsker å lage en forespørsel som inneholder antall claps til serveren når en person liker et innlegg og også abonnerer på vår Pusher-kanal. Gå videre og ta med Httpclient i konstruktøren av PusherService. Din pusher.service filen skal nå se slik ut:

erklære const Pusher: noen; importer Injectable fra '@ vinkel / kjerne'; importer miljø fra '... / miljøer / miljø'; importer HttpClient fra '@ vinkel / vanlig / http'; @Injectable (providedIn: 'root') eksportklasse PusherService pusher: any; kanal: noen; Konstruktør (privat http: HttpClient) this.pusher = ny Pusher (environment.pusher.key); this.channel = this.pusher.subscribe ('my_channel'); 

Deretter oppretter du en funksjon som sender antall klapper til serveren når applausnøkkelen klikkes.

// pusher.service.ts eksportklasse PusherService // ... klapp (claps_count) this.http.get ('http: // localhost: 3000 / add / $ claps_count') .subscribe (); 

Fortsatt på klientsiden, vil vi skrive en funksjon som lytter etter klikkhendelser fra vinkelapplikasjonen og øker antall klapper. Vi vil også binde Pusher-tjenesten til vårt arrangement.

importer PusherService fra './pusher.service'; // ... eksportklasse AppComponent implementerer OnInit title = 'Pusher Realtime Notifications'; claps: any = 0; // Hør å klikke på hendelsen og send claps increment til server Applaus () this.claps = parseInt (this.claps, 10) + 1; this.pusherService.clap (this.claps);  konstruktør (private pusherService: PusherService)  ngOnInit () this.pusherService.channel.bind ('new-event', data => this.claps = data.claps;);  

Bygg Node.js Server

En server vil bli brukt til å motta dataforespørsler fra Angular app-vi skal bygge den ved hjelp av Express, en enkel og rask Node.js ramme.

Opprett en katalog som heter serveren, og kjør følgende kommandoer.

mkdir server cd server npm init

Dette oppretter alle nødvendige filer for å starte opp en Node.js-applikasjon. Deretter installerer du Pusher, Express og body-parser-modulene.

 npm installere - lagre pusher express body-parser 

Deretter oppretter du en fil index.js og importere alle nødvendige moduler:

const express = kreve ('express'); const http = krever ('http'); const bodyParser = krever ('body-parser'); const port = process.env.PORT || '3000'; const app = express (); const Pusher = krever ('pusher');

Det neste trinnet er å initialisere Pusher ved å instansere Pusher med de nødvendige legitimasjonene. Du kan få legitimasjonene fra Pusher dashbordet.

const pusher = ny Pusher (appId: '607521', nøkkel: 'e9f68f905ee8a22675fa', hemmelig: '37ab37aac91d180050c2',);

Definer mellomvareprogrammer, CORS-overskrifter og resten av nodekonfigurasjonskonfigurasjonene.

// definer 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", "Opprinnelse, X -Requested-With, Content-Type, Accept ") neste ();); // Definer ruter app.set ('port', port); const server = http.createServer (app); server.listen (port, () => console.log ('Kjører på port $ port'));

Vi vil da opprette sluttpunktet som vil lytte til eventuelle innkommende forespørsler fra vår Angular app. Endepunktet vil få antall klap fra klienten og deretter utløse en meldingshendelse.

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

Serveren vår er nå fullført; Du kan begynne å lytte til innkommende abonnementer ved å kjøre npm start.

Testing Vår App

Kjør nå klienten og serveren samtidig ved å utstede ng tjene for Angular app og npm start for Express Server.

Kontroller at du har aktivert klienthendelser på Pusher-dashbordet, som vist nedenfor.

Naviger til http: // localhost: 4200 og begynn å interagere med appen ved å klikke på applausn-knappen. Sørg for at du har to faner side ved side slik at du i sanntid kan observere hvordan antall klaps øker når et innlegg er likt.

En annen kul funksjon av Pusher er at du kan vise alle tilkoblinger og meldinger som sendes ved hjelp av dashbordet. Her er et skjermbilde av dashbordet for denne appen.

Konklusjon

Som du har sett, er det veldig enkelt å integrere Pusher med en kantet app. Dette gjør det mulig å legge til funksjonalitet som sanntids datadeling og push varsler til appen din.

Pusher er også tilgjengelig for forskjellige plattformer, så gå over til nettstedet og oppdag Pusher's magi.