Erste Schritte mit Pusher Präsenzkanäle verwenden

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.

Präsenzkanäle bauen auf der Sicherheit auf, die von privaten Kanälen bereitgestellt wird. Sie bieten jedoch den Vorteil, zu wissen, welche Benutzer abonniert und mit diesem Kanal verbunden sind. Das Beste ist, wie einfach es ist, Präsenzkanäle zu implementieren und zu verwenden, und es ist noch einfacher, wenn Sie Ihre App bereits für die Verwendung privater Kanäle konfiguriert haben. In diesem Beitrag erfahren Sie, wie Sie Präsenzkanäle verwenden.

Eine noch bessere Chat-App

Unsere Chat-Anwendung verwendet derzeit einen privaten Kanal, um die sofortige Kommunikation zwischen Client und Server zu ermöglichen. Das Konfigurieren unserer App für die Verwendung eines Präsenzkanals wird daher extrem einfach. Beginnen wir mit der Server-App.

Server ändern

Um einen privaten Kanal zu verwenden, haben wir einen Endpunkt konfiguriert, um sicherzustellen, dass ein Benutzer mit unserer Anwendung authentifiziert wird. Dieser Endpunkt führt das aus ChannelsController's authorizeUser () Methode, und es nennt die Pusher-Bibliothek socket_auth () Methode zur Authentifizierung des Benutzers. Um einen Präsenzkanal zu verwenden, müssen wir uns ändern authorizeUser () um die Pusher-Bibliothek anzurufen presence_auth () Methode wie folgt:

public function authorizeUser (Request $ request) if (! Auth :: check ()) neue Antwort zurückgeben ('Forbidden', 403);  $ presenceData = ['name' => Auth :: user () -> name]; echo $ this-> pusher- >presence_auth ($ request-> input ('channel_name'), $ request-> input ('socket_id'), Auth :: user () -> id, $ presentData); 

Die Änderung des Methodennamens ist jedoch nur die erste Änderung. wir müssen auch sorgen presence_auth () mit der eindeutigen Kennung des Benutzers und zusätzlichen Informationen, die wir über den Benutzer bereitstellen möchten. Der obige Code speichert diese zusätzlichen Benutzerdaten im $ präsenzdaten Variable und übergibt es als letztes Argument an presence_auth ().

Zusätzlich müssen wir das ändern Nachricht senden() Methode. Die erste Änderung ist der Kanalname. Wie bei allen anderen Namen müssen wir den Kanalnamen voranstellen, um den Typ des Kanals anzugeben, den wir verwenden möchten: Gegenwart- In diesem Fall wie im folgenden Code gezeigt.

$ this-> pusher-> trigger ('präsenz-chat', 'send-message', $ data);

Wir können auch die Daten ändern, die wir mit dem Ereignis senden. Anstatt den Namen des Benutzers anzugeben, der das Ereignis ausgelöst hat, können wir auch die Benutzer-ID angeben.

$ data ['user'] = Auth :: user () -> id;

Da wir einen Präsenzkanal verwenden, können wir die Benutzernamen vom Client aus abfragen. Durch diese kleine Änderung wird die Größe der über das Netzwerk übertragenen Daten reduziert.

Ändern des Clients

Die Kunden Kanal object enthält alles, was wir zum Arbeiten mit dem abonnierten Kanal benötigen, und die Abfrage von Benutzerdaten ist keine Ausnahme. Unsere Kanal Objekt hat eine Eigenschaft namens Mitglieder die wir verwenden können, um die Informationen eines bestimmten Benutzers abzurufen. Wir verwenden dieses Objekt in der Nachricht senden Eventhandler wie folgt:

this.channel.bind ('send-message', (data) => let user = this.channel.members.get (data.user); this.messages.push (message: data.message, user: user) .info.name););

Hier rufen wir an this.channels.members.get () und geben Sie die Benutzer-ID ein (Denken Sie daran, dass unsere Server-Anwendung jetzt die ID anstelle des Namens liefert). Diese Methode gibt ein Objekt mit einem Info Eigentum und das Info Das Objekt enthält alle zusätzlichen Informationen, die wir im angegeben haben $ präsenzdaten Variable in der authorizeUser () Methode auf dem Server. Im obigen Code rufen wir also den Namen des Benutzers mit ab user.info.name.

Wir können auch das ändern auslösen() Methode, um die Informationen über den Benutzer einzuschließen, der das Client-Alarmereignis ausgelöst hat. Um die Mitgliederdaten des aktuell angemeldeten Benutzers abzurufen, verwenden Sie die mir Eigenschaft, wie im folgenden Code gezeigt:

auslöser (eventName, message) this.channel.trigger (eventName, message, user: this.channel.members.me); 

In diesem Code fügen wir ein Nutzer Eigenschaft auf die Ereignisnutzlast und setzen Sie sie auf das Benutzerobjekt des angemeldeten Benutzers. Das heißt, wir können das ändern Client-Sendealarm Event-Handler, um den Namen des Benutzers in die Alarmmeldung aufzunehmen:

this.channel.bind ('client-send-alarm', (data) => alert ('$ data.user.info.name: $ data.message'));

Hier verwenden wir data.user.info.name um auf den Namen des Benutzers zuzugreifen, damit wir sehen können, welcher Benutzer den Alarm gesendet hat, wie hier gezeigt:

Fazit

Durch die Verwendung von Präsenzkanälen kann Ihre Anwendung nicht nur die Sicherheit eines anonymen Kanals erhöhen, sondern Sie können auch Benutzerdaten für Benutzer abfragen, die den Kanal abonnieren. Mit Channels von Pusher ist es unglaublich einfach, Ihren Apps sichere, Echtzeit- und funktionsreiche Kommunikation hinzuzufügen.