I den här artikeln lär du dig hur du kodar realtidsvinkliga appar med Pusher. Vi gör en app som ger feedback i realtid när ett inlägg klickas - precis som medias applåderfunktion!

Vad är Pusher?

Pusher är en tjänst som ger utvecklare API: er som gör det möjligt för dem att integrera funktioner i realtid i web-, mobil- och back-end-applikationer. För att lära dig mer om Pusher, kolla in denna handledning video för en introduktion.

Komma igång med pusher i vinkel

Som nämnts i början av denna handledning kommer vår app att ge realtids återkoppling när någon klickar på ett inlägg. 

Till att börja, se till att du har Nod och NPM installerad på din maskin. Du behöver också Angular CLI för att snabbt starta upp vår app, så se till att du har den installerad också. Om du inte har Angular CLI installerad, utfärdar du bara följande kommando.

npm installera -g @ vinkel / cli

Använd sedan Angular CLI för att skapa Angular-appen.

ng ny pusher-vinkel

Applikationen till vår app kommer att vara väldigt enkel. Den kommer att ha ett inlägg, en applåderknapp som kommer att representeras av en handikon och en räknare av antalet klappar posten har fått. Öppna app.component.html och lägg till följande kod, där vi knyter klickhändelsen till Applåder() fungera.

 
 title! 
 
Den här artikeln visar hur man implementerar realtidsfunktioner i Angular Applications med Pusher. Vi kommer att göra en ansökan som ger realtids återkoppling när ett inlägg klickas. Applikationen kommer huvudsakligen att fokusera på att lägga till realtidsfunktionalitet till Angular-applikationen.
 
Real-time funktionalitet är en viktig komponent i moderna applikationer. Användare vill ha omedelbar feedback när de interagerar med applikationer. Detta har fått många utvecklare att överväga att inkludera denna funktion på grund av stor efterfrågan.
 
Vad är Pusher?
 
Pusher är en tjänst som ger utvecklare APIer som gör det möjligt för dem att integrera funktioner i realtid i webb-, mobil- och back-end-applikationer.
 
 
klappar
  
 

Lägga till Pusher till din app

Vi måste först installera Pusher biblioteket med npm installera kommando. 

npm installera - spara pusher-js

Ladda sedan Pusher Library genom att lägga till följande skript i angular.json fil.

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

Du måste också ha Pusher-referenser, som kan erhållas från Pusher-instrumentbrädan.

För att få inloggningsuppgifterna loggar du in på Pusher-instrumentpanelen och klickar på Skapa ny app. Du fyller i några detaljer om din ansökan och äntligen klickar på Skapa min app. Pusher ger dig också en kod för att komma igång enligt den teknik du valt. Den viktigaste aspekten av denna process är appuppgifterna, som finns på App Keys flik.

Integrera Pusher Service

Vi ska då skapa vår PusherService genom att köra kommandot:

ng generera service Pusher

Ovanstående kommando kommer att skapa två filer, nämligen pusher.service.ts och pusher.service.spec.ts, som innehåller en del boilerplate-kod för att komma igång. 

Importera nu tjänsten i huvudmodulen och inkludera den som leverantör enligt följande:

// app.module.ts import PusherService från './pusher.service';... @NgModule (leverantörer: [PusherService], ...)

Angular tillhandahåller också en miljöfil för att lagra referenser för säkerhetsändamål: inkludera din pushernyckel i environment.ts.

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

Importera sedan miljömodulen för användning, förklara Pusher som en import från det skript vi lagt till tidigare i angular.json, och deklarera a Langare konstant i PusherService filen enligt följande:

// pusher.service.ts importerar environment från "... / miljö / miljö"; förklara const Pusher: any; export klass PusherService pusher: any; constructor () this.pusher = new Pusher (environment.pusher.key); 

Vi vill göra en förfrågan som innehåller antalet klumpar till servern närhelst en person gillar ett inlägg och även prenumererar på vår Pusher-kanal. Fortsätt och inkludera Httpclient i konstruktören av PusherService. Din pusher.service filen ska nu se ut så här:

förklara const Pusher: any; importera Injectable från '@ angle / core'; importera environment från "... / environments / environment"; importera HttpClient från '@ vinkel / vanlig / http'; @Injectable (providedIn: 'root') exportklass PusherService pusher: any; kanal: någon; konstruktör (privat http: HttpClient) this.pusher = new Pusher (environment.pusher.key); this.channel = this.pusher.subscribe ('my_channel'); 

Skapa sedan en funktion som skickar antalet klumpar till servern när applåderknappen är klickad.

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

Fortfarande på klientsidan skriver vi en funktion som lyssnar på klickhändelser från vinkelapplikationen och ökar antalet klumpar. Vi kommer också att binda Pusher-tjänsten till vårt evenemang.

importera PusherService från './pusher.service'; // ... exportklass AppComponent implementerar OnInit title = 'Pusher Realtime Notifications'; claps: any = 0; // Lyssna på att klicka på händelse och skicka claps increment till server Applause () this.claps = parseInt (this.claps, 10) + 1; this.pusherService.clap (this.claps);  konstruktör (privat pusherService: PusherService)  ngOnInit () this.pusherService.channel.bind ('new-event', data => this.claps = data.claps;);  

Bygga Node.js-servern

En server kommer att användas för att ta emot dataförfrågningarna från Angular-appen. Vi bygger den med Express, en enkel och snabb Node.js-ram.

Skapa en katalog som heter server, och kör följande kommandon.

mkdir server cd server npm init

Detta skapar alla nödvändiga filer för att starta upp en Node.js-applikation. Installera sedan Pusher, Express och Body-Parser-modulerna.

 npm installera - saves pusher express body-parser 

Skapa sedan en fil index.js och importera alla nödvändiga moduler:

const express = kräver ("express"); const http = kräver ('http'); const bodyParser = kräver ("body-parser"); const port = process.env.PORT || '3000'; const app = express (); const Pusher = kräver ('pusher');

Nästa steg är att initiera Pusher genom att instansera Pusher med nödvändiga uppgifter. Du kan hämta referenser från Pusher-instrumentpanelen.

const pusher = ny Pusher (appId: '607521', nyckel: 'e9f68f905ee8a22675fa', hemlig: '37ab37aac91d180050c2',);

Definiera middleware, CORS-rubriker och resten av nodkonfigurationerna.

// definiera 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" -Requested-With, Content-Type, Accept ") nästa ();); // Definiera rutter app.set ('port', port); const server = http.createServer (app); server.listen (port, () => console.log ('Kör på port $ port'));

Vi kommer då att skapa slutpunkten som kommer att lyssna på inkommande förfrågningar från vår Angular app. Slutpunkten kommer att få antalet klumpar från klienten och sedan utlösa ett meddelandehändelse.

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

Vår server är nu färdig; du kan börja lyssna på inkommande prenumerationer genom att köra npm start.

Testa vår app

Kör nu klienten och servern samtidigt genom att utfärda ng tjäna för Angular app och npm start för Express Server.

Se till att du har aktiverat klienthändelser på Pusher-instrumentpanelen, som visas nedan.

Navigera till http: // localhost: 4200 och börja interagera med appen genom att klicka på applåderknappen. Se till att du har två flikar sida vid sida så att du i realtid kan observera hur antalet klumpar ökar när ett inlägg är gillat.

En annan cool egenskap hos Pusher är att du kan se alla anslutningar och meddelanden som skickas med hjälp av instrumentbrädan. Här är en skärmdump av instrumentpanelen för den här appen.

Slutsats

Som du har sett är det väldigt enkelt att integrera Pusher med en Angular app. Detta gör det möjligt att lägga till funktionalitet som realtidsdata och push-meddelanden till din app.

Pusher är också tillgänglig för olika plattformar, så gå över till webbplatsen och upptäck Pusher's magi.