În acest articol, veți afla cum să codificați aplicațiile în timp real cu aplicația Pusher. Vom face o aplicație care oferă feedback în timp real când se face clic pe o postare - la fel ca și funcția de aplauze a lui Medium!

Ce este Pusher?

Pusher este un serviciu care oferă dezvoltatorilor API-uri care le permit să integreze funcționalități în timp real în aplicații web, mobile și back-end. Pentru a afla mai multe despre Pusher, citiți acest tutorial pentru o introducere.

Noțiuni de bază cu Push în Angular

După cum sa menționat la începutul acestui tutorial, aplicația noastră va oferi feedback în timp real ori de câte ori cineva face clic pe o postare. 

Pentru început, asigurați-vă că aveți Nod și npm instalate pe aparat. Veți avea nevoie, de asemenea, de CLI Angular pentru a lansa rapid aplicația noastră, așa că asigurați-vă că ați instalat-o de asemenea. Dacă nu aveți instalat CLI unghiular, lansați pur și simplu următoarea comandă.

npm install -g @ unghiular / cli

Apoi, utilizați CLI Angular pentru a crea aplicația Angular.

ng nou-unghiular

Interfața de utilizare a aplicației noastre va fi foarte simplă. Acesta va avea un post, un buton de aplauze, care va fi reprezentat de o pictogramă de mână și un contor cu numărul de clape pe care postul le-a strâns. Deschis app.component.html și adăugați următorul cod, în care legăm evenimentul de clic la Aplauze() funcţie.

 
  titlu ! 
 
Acest articol va arăta modul de implementare a funcționalității în timp real în Aplicații Angulare utilizând Pusher. Vom face o aplicație care oferă feedback în timp real când se face clic pe o postare. Aplicația se va concentra în principal pe adăugarea în aplicația Angular a funcționalității în timp real.
 
Funcționalitatea în timp real este o componentă importantă în aplicațiile moderne. Utilizatorii doresc feedback imediat când interacționează cu aplicațiile. Acest lucru a determinat mulți dezvoltatori să ia în considerare includerea acestei funcționalități datorită unei cereri enorme.
 
Ce este Pusher?
 
Pusher este un serviciu care oferă dezvoltatorilor aplicații API care le permit să integreze funcționalități în timp real în aplicații web, mobile și back-end.
 
 
Claps
  
 

Adăugarea dispozitivului de împingere la aplicația dvs.

Vom mai întâi să instalăm biblioteca Pusher cu npm install comanda. 

npm instalează -save pusher-js

Apoi, încărcați Biblioteca Pusher prin adăugarea următorului script în angular.json fişier.

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

De asemenea, va trebui să aveți acreditări Pusher, care pot fi obținute din tabloul de bord Pusher.

Pentru a obține acreditările, conectați-vă la tabloul de bord Pusher și dați clic pe Creați o aplicație nouă. Veți completa apoi câteva detalii despre cererea dvs. și apoi faceți clic pe Creați aplicația mea. Pusher vă oferă, de asemenea, un cod pentru a începe în funcție de tehnologia pe care ați ales-o. Cel mai important aspect al acestui proces îl constituie acreditările aplicației, care pot fi găsite pe Taste pentru aplicații fila.

Integrați serviciul de împingere

Vom crea apoi PusherService prin rularea comenzii:

ng genera Pusher serviciu

Comanda de mai sus va crea două fișiere, și anume pusher.service.ts și pusher.service.spec.ts, care conțin un cod de boilerplate pentru a începe. 

Acum importați serviciul în modulul principal și includeți-l ca furnizor după cum urmează:

// app.module.ts import PusherService de la "./pusher.service"; ... @NgModule (furnizori: [PusherService], ...)

Angular oferă, de asemenea, un fișier de mediu pentru stocarea acreditărilor în scopuri de securitate: includeți cheia dvs. de împingere environment.ts.

// environment.ts export const mediu = pusher: producție: false, cheie: '',;

Apoi, importați modulul de mediu pentru utilizare, declarați Pusher ca un import din scriptul pe care l-am adăugat anterior angular.json, și să declare a Pusher constantă în PusherService dosar după cum urmează:

// pusher.service.ts import mediu din '... / environment / environment'; declară const Pusher: orice; clasa de export PusherService pusher: any; constructor () this.pusher = Pusher nou (environment.pusher.key); 

Vrem să facem o cerere care să conțină numărul de clapsuri pe server ori de câte ori o persoană îi place o postare și de asemenea să se aboneze la canalul nostru Pusher. Continuați și includeți httpclient în constructorul PusherService. Ta pusher.service fișierul ar trebui să arate astfel:

declară const Pusher: orice; import Injectable de la '@ angular / core'; import environment din "... / environments / environment"; import HttpClient de la '@ angular / common / http'; @Injectable (providedIn: 'root') clasa de export PusherService pusher: any; canal: orice; constructor (privat http: HttpClient) this.pusher = Pusher nou (environment.pusher.key); this.channel = această.pusher.subscribe ('my_channel'); 

Apoi, creați o funcție care trimite numărul de clapsuri la server când este apăsat butonul Aplauze.

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

Încă pe partea clientului, vom scrie o funcție care ascultă evenimentele de clic din aplicația unghiulară și mărește numărul de clape. De asemenea, vom lega serviciul Pusher la evenimentul nostru.

import PusherService de la "./pusher.service"; // ... clasa de export AppComponent implementează OnInit title = 'Notificări Pusher în timp real'; clape: orice = 0; // Ascultați clic pe eveniment și trimiteți incrementări claps la server Applause () this.claps = parseInt (this.claps, 10) + 1; this.pusherService.clap (acest.claps);  constructor (private pusherService: PusherService)  ngOnInit () this.pusherService.channel.bind ('new-event', data => this.claps = data.claps;);  

Construirea serverului Node.js

Un server va fi folosit pentru a primi solicitările de date din aplicația Angular - o vom construi utilizând Express, un cadru simplu și rapid Node.js.

Creați un director numit Server, și executați următoarele comenzi.

Server server mkdir server cpm npm init

Aceasta creează toate fișierele necesare pentru a încărca o aplicație Node.js. Apoi, instalați modulele Pusher, Express și module parser.

 npm instalează - salvează expresorul corpului parserului 

Apoi, creați un fișier index.js și importați toate modulele necesare:

const expres = necesită ("expres"); const http = necesită ("http"); const bodyParser = necesită ('body-parser'); const port = process.env.PORT || '3000'; const app = express (); const Pusher = necesită ("împingător");

Următorul pas este de a inițializa Pusher prin instanțarea lui Pusher cu acreditările necesare. Puteți obține acreditările din tabloul de bord Pusher.

const pusher = Pusher nou (appId: '607521', cheie: 'e9f68f905ee8a22675fa', secret: '37ab37aac91d180050c2',);

Definiți middleware, anteturile CORS și restul configurațiilor aplicației Node.

// definește aplicația middleware app.use (bodyParser.json ()); app.use (bodyParser.urlencoded (extended: false); app.use ((req, res, next) => res.header ("Acces-Control-Permite-Origine", "*" -Requested-With, Content-Type, Accept ") următorul ();); // Definirea rutelor app.set ('port', port); const server = http.createServer (aplicație); server.listen (port, () => console.log ('Rularea pe portul $ port'));

Apoi vom crea punctul final care va asculta orice solicitări primite din aplicația Angular. Punctul final va primi numărul de clapsuri de la client și apoi va declanșa un eveniment de mesagerie.

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

Serverul nostru este acum complet; puteți începe să ascultați abonamentele viitoare prin difuzare npm start.

Testarea aplicației noastre

Acum rulați clientul și serverul în același timp prin emitere ng servi pentru aplicația Angular și npm start pentru serverul Express.

Asigurați-vă că ați activat evenimentele client în tabloul de bord Pusher, după cum se arată mai jos.

Navigați la http: // localhost: 4200 și începeți să interacționați cu aplicația făcând clic pe butonul aplauze. Asigurați-vă că aveți două file simultan, astfel încât să puteți observa în timp real cum crește numărul de clape atunci când se plătește un post.

O altă caracteristică interesantă a aplicației Pusher este că puteți vedea toate conexiunile și mesajele trimise prin utilizarea tabloului de bord. Iată o captură de ecran a tabloului de bord pentru această aplicație.

Concluzie

După cum ați văzut, este foarte ușor să integrați Pusher cu o aplicație Angular. Acest lucru face posibilă adăugarea de funcții cum ar fi partajarea în timp real a datelor și transmiterea de notificări către aplicația dvs..

Pusher este, de asemenea, disponibil pentru diferite platforme, așa că vă îndreptați spre site și descoperiți magia lui Pusher.