In diesem Artikel erfahren Sie, wie Sie mit Pusher Echtzeit-Winkelapplikationen programmieren. Wir erstellen eine App, die ein Echtzeit-Feedback liefert, wenn auf einen Beitrag geklickt wird - genau wie bei der Applaus-Funktion von Medium!

Was ist Schieber??

Pusher ist ein Dienst, der Entwicklern APIs bietet, mit denen sie Echtzeitfunktionalitäten in Web-, Mobil- und Back-End-Anwendungen integrieren können. Weitere Informationen zu Pusher finden Sie in diesem Tutorial-Video.

Erste Schritte mit Pusher in Angular

Wie zu Beginn dieses Tutorials erwähnt, gibt unsere App ein Echtzeit-Feedback, wenn jemand auf einen Beitrag klickt. 

Für Starter, Vergewissern Sie sich, dass auf Ihrem Computer Node und npm installiert sind. Sie benötigen auch Angular CLI, um unsere App schnell zu booten. Vergewissern Sie sich, dass Sie sie auch installiert haben. Wenn Sie keine Angular-CLI installiert haben, geben Sie einfach den folgenden Befehl ein.

npm install -g @ angle / cli

Verwenden Sie anschließend die Angular-CLI, um die Angular-App zu erstellen.

ng neuer Schieberwinkel

Die Benutzeroberfläche unserer App wird sehr einfach sein. Es wird einen Beitrag, einen Applaus-Button, der durch ein Handsymbol dargestellt wird, und einen Zähler für die Anzahl der Klatschen, die der Beitrag erhalten hat, anzeigen. Öffnen app.component.html und fügen Sie den folgenden Code hinzu, in dem wir das click-Ereignis an das Ereignis binden Beifall() Funktion.

 
  Titel ! 
 
In diesem Artikel wird gezeigt, wie Sie Echtzeitfunktionen in Angular Applications mithilfe von Pusher implementieren. Wir werden eine Anwendung erstellen, die ein Echtzeit-Feedback gibt, wenn auf einen Beitrag geklickt wird. Die Anwendung wird sich hauptsächlich darauf konzentrieren, der Angular-Anwendung Echtzeitfunktionalität hinzuzufügen.
 
Echtzeitfunktionalität ist eine wichtige Komponente in modernen Anwendungen. Benutzer wünschen sofortiges Feedback, wenn sie mit Anwendungen interagieren. Dies hat viele Entwickler dazu veranlasst, die Einbeziehung dieser Funktionalität aufgrund der enormen Nachfrage in Betracht zu ziehen.
 
Was ist Schieber??
 
Pusher ist ein Dienst, der Entwicklern APIs bietet, mit denen sie Echtzeitfunktionalitäten in Web-, Mobil- und Back-End-Anwendungen integrieren können.
 
 
claps
  
 

Hinzufügen von Pusher zu Ihrer App

Wir müssen zuerst die Pusher-Bibliothek mit der installieren npm installieren Befehl. 

npm install --save pusher-js

Laden Sie als Nächstes die Pusher Library, indem Sie das folgende Skript in das eckig.json Datei.

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

Sie benötigen außerdem Pusher-Anmeldeinformationen, die Sie über das Pusher-Dashboard erhalten.

Um die Berechtigungsnachweise zu erhalten, melden Sie sich beim Pusher-Dashboard an und klicken Sie auf Neue App erstellen. Sie werden dann einige Details zu Ihrer Bewerbung ausfüllen und abschließend auf klicken Meine App erstellen. Pusher gibt Ihnen auch etwas Code, um entsprechend der von Ihnen gewählten Technologie zu beginnen. Der wichtigste Aspekt dieses Prozesses sind die Anmeldeinformationen der App, die auf der Website zu finden sind App-Tasten Tab.

Integrieren Sie den Pusher-Service

Wir werden dann unsere erstellen PusherService indem Sie den Befehl ausführen:

ng Service Pusher generieren

Der obige Befehl erstellt zwei Dateien, nämlich pusher.service.ts und pusher.service.spec.ts, die einige Boilerplate-Codes enthalten, um loszulegen. 

Importieren Sie nun den Dienst im Hauptmodul und fügen Sie ihn wie folgt als Anbieter hinzu:

// app.module.ts import PusherService aus './pusher.service' ;… @NgModule (provider: [PusherService],…)

Angular bietet auch eine Umgebungsdatei zum Speichern von Anmeldeinformationen zu Sicherheitszwecken: Geben Sie Ihren Pusher-Schlüssel ein environment.ts.

// environment.ts export const environment = Schieber: production: false, Schlüssel: '',;

Als nächstes importieren Sie das Umgebungsmodul für die Verwendung. Deklarieren Sie Pusher als Import aus dem Skript, das wir zuvor hinzugefügt haben eckig.json, und erkläre a Pusher konstant in der PusherService Datei wie folgt:

// pusher.service.ts import environment aus '… / environment / environment'; const Pusher deklarieren: any; Exportklasse PusherService Pusher: beliebig; constructor () this.pusher = neuer Pusher (environment.pusher.key); 

Wir möchten eine Anfrage mit der Anzahl von Klatschen an den Server senden, wenn eine Person einen Beitrag mag und auch unseren Pusher-Kanal abonniert. Gehen Sie voran und schließen Sie das ein HttpClient im Erbauer der PusherService. Ihre Drückerservice Die Datei sollte jetzt so aussehen:

const Pusher deklarieren: any; import Injectable aus '@ angle / core'; Umgebung aus '… / Umgebungen / Umgebung' importieren; HttpClient aus '@ angle / common / http' importieren; @Injectable (providedIn: 'root') Exportklasse PusherService Pusher: beliebig; Kanal: beliebig; Konstruktor (privates http: HttpClient) this.pusher = new Pusher (environment.pusher.key); this.channel = this.pusher.subscribe ('mein_Kanal'); 

Erstellen Sie als Nächstes eine Funktion, die die Anzahl der Klatschsignale an den Server sendet, wenn Sie auf die Schaltfläche Applaus klicken.

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

Auf der Clientseite schreiben wir eine Funktion, die Klickereignisse aus der Winkelanwendung abhört und die Anzahl der Klatschschritte erhöht. Wir werden den Pusher-Service auch an unsere Veranstaltung binden.

import PusherService von './pusher.service'; //… export class AppComponent implementiert OnInit title = 'Echtzeitbenachrichtigungen für Pusher'; klatscht: beliebig = 0; // Hören Sie sich das Klick-Ereignis an und senden Sie Claps-Inkrement an den Server Applause () this.claps = parseInt (this.claps, 10) + 1; this.pusherService.clap (this.claps);  Konstruktor (privater PusherService: PusherService)  ngOnInit () this.pusherService.channel.bind ('new-event', data => this.claps = data.claps;);  

Erstellen des Node.js-Servers

Ein Server wird verwendet, um die Datenanforderungen von der Angular-App zu erhalten. Wir erstellen sie mit Express, einem einfachen und schnellen Node.js-Framework.

Erstellen Sie ein Verzeichnis mit dem Namen Server, und führen Sie die folgenden Befehle aus.

mkdir server cd server npm init

Dadurch werden alle erforderlichen Dateien erstellt, um eine Node.js-Anwendung zu booten. Installieren Sie anschließend die Pusher-, Express- und Body-Parser-Module.

 npm install --save Drücker-Body-Parser 

Als nächstes erstellen Sie eine Datei index.js und importieren Sie alle benötigten Module:

const express = erfordern ('express'); const http = erfordern ('http'); const bodyParser = required ('Body-Parser'); const port = process.env.PORT || '3000'; const app = express (); const Schieber = erfordern ('Schieber');

Der nächste Schritt ist die Initialisierung von Pusher durch Instantiieren von Pusher mit den erforderlichen Anmeldeinformationen. Sie können die Anmeldeinformationen über das Pusher-Dashboard erhalten.

const pusher = neuer Pusher (appId: '607521', Schlüssel: 'e9f68f905ee8a22675fa', geheim: '37ab37aac91d180050c2',);

Definieren Sie Middleware, CORS-Header und die restlichen Anwendungskonfigurationen für Knoten.

// Middleware definieren 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-Header"), "Origin, X -Requested-With, Content-Type, Accept ") next ();); // Routen definieren app.set ('port', port); const server = http.createServer (App); server.listen (port, () => console.log ('An Port $ port ausgeführt'));

Wir erstellen dann den Endpunkt, der alle eingehenden Anfragen von unserer Angular-App abhört. Der Endpunkt erhält die Anzahl der Klatschvorgänge vom Client und löst dann ein Messaging-Ereignis aus.

//server.js… app.get ("/ add /: claps", Funktion (req, res) pusher.trigger ("mein_Kanal", "neues Ereignis", );); 

Unser Server ist jetzt fertig. Sie können ankommende Abonnements abhören, indem Sie sie ausführen npm starten.

Testen Sie unsere App

Führen Sie nun den Client und den Server gleichzeitig aus, indem Sie ihn ausgeben ng dienen für die Angular App und npm starten für den Express Server.

Stellen Sie sicher, dass Sie Client-Ereignisse im Pusher-Dashboard aktiviert haben (siehe unten).

Navigieren Sie zu http: // localhost: 4200 und beginnen Sie mit der App zu interagieren, indem Sie auf die Schaltfläche Applaus klicken. Stellen Sie sicher, dass Sie zwei Registerkarten nebeneinander haben, sodass Sie in Echtzeit beobachten können, wie die Anzahl der Klatschen steigt, wenn ein Beitrag gewünscht wird.

Eine weitere tolle Funktion von Pusher ist, dass Sie alle Verbindungen und Nachrichten anzeigen können, die über das Dashboard gesendet werden. Hier ist ein Screenshot des Dashboards für diese App.

Fazit

Wie Sie gesehen haben, ist es sehr einfach, Pusher mit einer Angular-App zu integrieren. Auf diese Weise können Sie Funktionen wie Echtzeit-Datenfreigabe und Push-Benachrichtigungen für Ihre App hinzufügen.

Pusher ist auch für verschiedene Plattformen verfügbar. Besuchen Sie die Website und entdecken Sie die Magie von Pusher.