Share
Channels von Pusher ist eine Plattform, mit der Sie nahtlos Echtzeitdaten in Ihre Apps einfügen können. In diesem Video zeige ich Ihnen, wie Sie mit JavaScript und Channels von Pusher die Echtzeitkommunikation zwischen Client- und Server-Apps programmieren.
Als erstes müssen Sie ein Konto bei https://www.pusher.com erstellen. Drücke den Anmelden und wählen Sie aus, wie Sie sich bei Ihrem Konto anmelden möchten. Sie können Ihr GitHub- oder Google-Konto oder eine E-Mail-Adresse und ein Kennwort verwenden. Melden Sie sich an, nachdem Sie Ihr Konto erstellt haben.
Bei der ersten Anmeldung werden Sie aufgefordert, eine neue Channels-Anwendung zu erstellen. Channels geben einen Standardnamen für Ihre Anwendung an. Es ist jedoch sinnvoller, der Channels-Anwendung einen Namen zu geben, der Ihrer Anwendung ähnlich ist. Da wir eine Node.js-Konsolenanwendung schreiben, rufe ich meine Anwendung an Knoten-Konsolen-App. Beachten Sie, dass die Namenskonvention die Verwendung von Bindestrichen anstelle von Leerzeichen ist.
Als Nächstes müssen Sie Ihren Cluster auswählen und Sie möchten auswählen, was Ihrem Server am nächsten ist, da sich Clients überall auf der Welt befinden können. Für mich ist es ein Wurf zwischen Ohio und North Virginia. Ich habe Ohio gewählt, weil dies standardmäßig ausgewählt wurde.
Sie können dann die Technologien auswählen, mit denen Sie Ihre App schreiben. Ich habe mich für Node.js entschieden, kann aber gerne die gewünschten Technologien verwenden.
Nach dem Klicken auf Meine App erstellen Taste, sehen Sie die Fertig machen Seite. Diese Seite ist ein Client und weist darauf hin, dass der Verbindungsstatus verbunden ist. Wenn wir uns das anschauen Überblick Seite sehen wir, dass es einen Kunden gibt. Dies ist dieser Demo-Client auf der Seite "Erste Schritte".
Unten auf der Übersichtsseite finden Sie die App-ID, den Schlüssel, den geheimen Schlüssel und den Cluster. Dies sind die Informationen, die Sie benötigen, um von Ihren Client- und Serveranwendungen aus eine Verbindung zu Ihrer Channels-Anwendung herzustellen.
Erstellen Sie in einem neuen Verzeichnis eine package.json Datei mit dem folgenden Befehl:
npm init - ja
Sie möchten dann das Pusher-Paket installieren.
npm install Schieber --save
Als Nächstes erstellen Sie eine Datei mit dem Namen server.js-Dies ist unsere Anwendungsdatei. Geben Sie den folgenden Code ein:
Accentsconagua
'streng verwenden'; const Schieber = erfordern ('Schieber'); var pusher = new Pusher (appId: '530620', Schlüssel: 'b534d4fac76717b9872e', geheim: 'f84f62e45f82cc09b8c8', Cluster: 'us2', verschlüsselt: true);Dieser Code erstellt eine Pusher Objekt durch Übergabe eines Objekts mit Eigenschaften für die App-ID, den Schlüssel, den geheimen Schlüssel und den Cluster an den Konstruktor - im Wesentlichen alle Informationen, die wir gerade in der Übersicht gesehen habenSeite wird hier sein. Es gibt auch eine andere Eigenschaft namens verschlüsselt Damit wird festgelegt, dass Pusher die Kommunikation zwischen unserer Server-App und dem Channels-Dienst verschlüsseln soll.
Unsere einfache Serveranwendung akzeptiert Benutzereingaben, indem wir sie in das Konsolenfenster eingeben können. Wir greifen diese Eingabe auf und lösen dann ein Messaging-Ereignis aus. Dieser Code sieht folgendermaßen aus:
process.stdin.on ('data', (chunk) => const str = chunk.toString (). trim (); if (str === 'exit') process.exit (0); Schieber. trigger ('my-channel', 'my-event', message: str);); console.log ('Eine Nachricht eingeben ...');In diesem Code verwenden wir den Standardeingabestrom und überwachen das Datenereignis. Die Daten, die wir erhalten, sind Rohdaten, also konvertieren wir sie in eine Zeichenfolge und schneiden den Leerraum ab. Wir prüfen dann, ob der Benutzer das Wort "exit" eingegeben hat. Wenn dies der Fall ist, wird das Programm beendet.
Wir benutzen dann die Pusher Objekt ist auslösen() Methode zum Auslösen der meine Veranstaltung Veranstaltung in der mein Kanal Kanal. Das Auslösen eines Ereignisses umfasst also die folgenden drei Informationen in der angegebenen Reihenfolge:
Beachten Sie, dass der Kanalname nicht der Name der Channels-App ist. Es ist eher ein beliebiger Name, der hoffentlich eine Bedeutung für unsere Anwendung hat. Wir haben den Standard verwendet, mein Kanal, denn das ist was der demonstrationsclient auf derDie Seite "Erste Schritte" ist abonniert. Kunden, die diesen Kanal abonniert haben, können dann auf Ereignisse warten, die in der Datenbank auftreten mein Kanal Kanal. In diesem Fall müssen sie auf das hören meine Veranstaltung event, weil wir dies auslösen, wenn wir etwas in die Konsole der Anwendung Node.js eingeben.
Die Nachrichtennutzlast kann ein Objekt beliebiger Form sein. Dieser Code legt erneut eine Nachrichteneigenschaft fest, da der Client "Getting Started" danach sucht.
Wir haben unseren App-Code beendet, indem wir eine Meldung ausgegeben haben, die den Benutzer darüber informiert, dass die Anwendung bereit ist.
Sie können Ihre Server-App sofort testen, da wir bereits über einen Client verfügen: die Seite "Erste Schritte". Sie können den Server mit dem folgenden Befehl ausführen:
Knoten server.js
Nachrichten, die Sie in die Konsolen-App eingeben, sollten auf der Seite Erste Schritte in einem Warnfeld angezeigt werden. Fühlen Sie sich frei, damit herumzuspielen, bevor wir im nächsten Abschnitt die Client-App schreiben.
Initialisieren Sie das Client-Projekt in einem anderen Verzeichnis mit dem folgenden Befehl:
npm init - ja
Dann installieren Sie die Client-Pusher-Bibliothek mit dem folgenden Befehl:
npm install pusher-js --save
Erstellen Sie eine Datei mit dem Namen client.js und geben Sie den folgenden Code ein:
'streng verwenden'; const Pusher = erfordern ('pusher-js'); let pusher = new Pusher ('b534d4fac76717b9872e', Cluster: 'us2', verschlüsselt: true); let channel = pusher.subscribe ('my-channel'); channel.bind ('my-event', (data) => console.log (data.message);); console.log ('Nachrichten abhören ...');Dieser Code erstellt einen Client Pusher Objekt. Beachten Sie, dass das Client-Objekt weniger Informationen als der Server benötigt-Schließen Sie den geheimen Schlüssel oder die App-ID nicht in Ihren Clientcode ein! In unserem Beispiel abonnieren wir dann die mein Kanal Kanal mit der Pusher Objekt ist abonnieren() Methode. Auf diese Weise können Sie alle Ereignisse in diesem Kanal abhören.
Durch das Abonnieren eines Kanals erhalten Sie ein Kanalobjekt, mit dem Sie auf Ereignisse achten können, die in diesem Kanal auftreten. In diesem Code haben wir das verwendet binden() Methode, um einen Listener an die zu binden meine Veranstaltung Veranstaltung. Jedes Mal, wenn der Kunde die meine Veranstaltung Ereignis verwendet es console.log () um die Nachricht auf den Bildschirm zu schreiben.
Fahren Sie fort und führen Sie den Client in einem separaten Konsolenfenster aus, sodass Sie den Client und den Server gleichzeitig ausführen können. Der Befehl zum Ausführen der App lautet:
Knoten client.js
Geben Sie Nachrichten in die Serveranwendung ein. Der Client sollte sie empfangen und ausgeben.
Channels ist eine fantastische Plattform, mit der Sie Ihren Apps die Echtzeitkommunikation hinzufügen können. Wie Sie anhand der beiden in diesem Video beschriebenen Anwendungen gesehen haben, können Sie die Echtzeitkommunikation relativ einfach mit Hilfe von Channels und ihre Bibliotheken.
