Share
In dieser Serie haben wir uns mit Channels von Pusher vertraut gemacht, einer Plattform, mit der Sie Ihren Benutzern das nahtlose Echtzeiterlebnis bieten können, das sie möchten.
In dieser ganzen Serie haben wir uns streng mit Serverereignissen befasst, die auf dem Server beruhen. Wir haben jedoch auch die Möglichkeit, Ereignisse vom Client auszulösen. Diese Ereignisse werden Clientereignisse genannt. Sie bieten einen anderen Dienst als Serverereignisse, da für einige Aktionen möglicherweise keine Überprüfung oder Persistenz erforderlich ist.
Für Clientereignisse gelten einige Einschränkungen, die Ihre Anwendung einhalten muss, um sie verwenden zu können. Die bemerkenswertesten sind:
Wir betrachten ein Beispiel für Kundenereignisse, indem wir unserer privaten Chat-App einen Link hinzufügen, der einen Alarm an alle verbundenen Clients sendet. Clientereignisse werden von dem Objekt ausgelöst, das von der Pusher-Bibliothek zurückgegeben wird abonnieren() Methode. Wir verwenden diese Methode im ChannelsChat Vue.js-Komponente mit dem folgenden Code:
Accentsconagua
let channel = pusher.subscribe ('private-chat');Das Auslösen eines Clientereignisses ist dem Auslösen eines Serverereignisses sehr ähnlich. Sie verwenden channel.trigger () um das Ereignis zu initiieren und den Namen und die Ereignisdaten wie folgt an das Ereignis zu übergeben:
channel.trigger ('client-send-alarm', message: 'Alarm!');Clientereignisnamen müssen mit beginnen Klient-, wie in diesem Code gezeigt. Der Rest des Namens liegt ganz bei Ihnen. Die Ereignisdaten sind nichts weiter als ein normales JavaScript-Objekt, das die Eigenschaften (und ihre Werte) enthält, die Sie mit dem Ereignis senden möchten.
Die Chat-Anwendung Kanal Objekt befindet sich im ChannelsChat Vue.js-Komponente - hier erstellen wir das Objekt und richten den Listener für die Nachricht senden Veranstaltung. Wir können diese Komponente so umstrukturieren, dass sie einen Mechanismus zum Auslösen von Clientereignissen bereitstellt.
Als Erstes müssen wir unsere speichern Kanal Objekt als Instanzdaten, so dass wir es in der gesamten Komponente referenzieren können. Wir werden dies tun, indem Sie eine hinzufügen Kanal Eigentum an unserer Komponente, wie folgt:
data () return messages: [], channel: null
Dann ändern wir die erstellt () Haken, damit wir unsere aufbewahren können Kanal Objekt im neuen Kanal Eigenschaft statt der Kanal Variable.
// lass channel = pusher.subscribe ('private-chat'); // alter Code this.channel = pusher.subscribe ('private-chat');Denken Sie daran, dass diese Änderung voraussetzt, dass wir den vorherigen Verwendungen von vorangestellt sind Kanal mit diese.
Fügen wir nun eine Methode hinzu, die ein Client-Ereignis auslöst. Nennen wir es mal auslösen(), und sein Code wird wie folgt aussehen:
Methoden: Auslöser (Ereignisname, Nachricht) this.channel.trigger (Ereignisname, Nachricht);
Er akzeptiert den Ereignisnamen und die Nachricht, die in das Ereignis aufgenommen werden sollen, und leitet diese Daten weiter this.channel.trigger (), Dadurch wird das Client-Ereignis ausgelöst.
Der Benutzer interagiert hauptsächlich mit dem Nachricht gesendet Komponente, weil sie die Benutzeroberfläche zum Eingeben und Senden von Nachrichten enthält. Also passieren wir die auslösen() Methode als Requisite zu Nachricht gesendet, so was:
Das letzte, was wir in dieser Komponente tun müssen, ist das Abhören Client-Sendealarm Veranstaltung. Das Abhören von Clientereignissen ist fast identisch mit dem Abhören von Serverereignissen. Der einzige Unterschied besteht in den Daten, die wir an den Server übergeben binden() Methode. Fügen Sie Folgendes als letzte Zeile der hinzu erstellt () Haken:
this.channel.bind ('client-send-alarm', (data) => alert (data.message));Für dieses Ereignis drücken wir die bereitgestellte Nachricht nicht auf den Chat-Bildschirm. Stattdessen zeigen wir die bereitgestellte Nachricht einfach in einem Benachrichtigungsfeld an.
In dem Nachricht gesendet Komponente, lassen Sie uns zuerst die Trigger-Requisite zur Komponente hinzufügen.
Requisiten: ['auslösen']
Fügen Sie dann den neuen Alarmlink nach dem hinzu Senden Taste.
Alarm!
Die Links klicken Ereignis ist an die gebunden sendAlarm () Methode, die wir der Komponente hinzufügen Methoden Erklärung. Hier ist der sehr einfache Code dieser Methode:
Methoden: // sendMessage () here sendAlarm () this.trigger ('client-send-alarm', 'Alarm!'); Das sendAlarm () Methode wird einfach aufgerufen auslösen(), Vorbeigehen Client-Sendealarm als Veranstaltungsname und Alarm! als die Nachricht.
Um die Ergebnisse unserer Codeänderungen zu sehen, benötigen Sie zwei Clients, die mit der Chat-App verbunden sind. Obwohl dies offensichtlich erscheint, gibt es einen sehr guten Grund, zwei Clients zu öffnen: Der Client, der das Ereignis initiiert, empfängt das Ereignis nicht.
Klicken Sie bei geöffneten Clients also auf die Schaltfläche Alarm! Link in einem Client, und Sie sehen das Ereignis im anderen Client, wie hier gezeigt:
Der Client auf der linken Seite hat das Ereignis ausgelöst und Sie können es im Client auf der rechten Seite behandelt sehen.
Selbstverständlich handelt es sich bei den meisten in von Channels betriebenen Anwendungen verwendeten Ereignissen um Serverereignisse. In einigen Fällen möchten Sie jedoch möglicherweise ein Ereignis initiieren, für das keine serverseitige Validierung oder Persistenz erforderlich ist. Mit Channels von Pusher ist es unglaublich einfach, Client-Events auszulösen und zu überwachen!
