Aan de slag met Pusher aanwezigheidskanalen gebruiken

In deze serie hebben we geleerd over kanalen van Pusher, een platform waarmee u uw gebruikers de naadloze realtime ervaring kunt bieden die ze willen.

Aanwezigheidskanalen bouwen voort op de beveiliging die wordt geboden door privé-kanalen, maar ze voegen het voordeel toe te weten welke gebruikers zijn geabonneerd en verbonden met dat kanaal. Het beste deel is hoe gemakkelijk het is om aanwezigheidskanalen te implementeren en te gebruiken, en het is nog eenvoudiger als u uw app al hebt geconfigureerd voor het gebruik van privékanalen. Je leert hoe je aanwezigheidskanalen gebruikt in dit bericht.

 

Een nog betere chat-app

Onze chattoepassing maakt momenteel gebruik van een privékanaal om ogenblikkelijke client / server-communicatie mogelijk te maken. Dus het configureren van onze app om een ​​aanwezigheidskanaal te gebruiken, is heel eenvoudig. Laten we beginnen met de server-app.

De server aanpassen

Om een ​​privékanaal te gebruiken, hebben we een eindpunt geconfigureerd om te zorgen dat een gebruiker wordt geverifieerd met onze applicatie. Dit eindpunt voert het ChannelsController's authorizeUser () methode en roept de Pusher-bibliotheken aan socket_auth () methode om de gebruiker te helpen authenticeren. Om een ​​aanwezigheidskanaal te gebruiken, moeten we wijzigen authorizeUser () om de Pusher-bibliotheek te bellen presence_auth () methode, zoals deze:

public function authorizeUser (Request $ request) if (! Auth :: check ()) return new Response ('Forbidden', 403);  $ presenceData = ['name' => Auth :: user () -> naam]; echo $ this-> pusher-> presence_auth ($ request-> input ('channel_name'), $ request-> input ('socket_id'), Auth :: user () -> id, $ presenceData); 

Maar de wijziging van de methode naam is slechts de eerste wijziging; we moeten ook voorzien presence_auth () met de unieke ID van de gebruiker en eventuele extra informatie die we over de gebruiker willen verstrekken. De code hierboven slaat deze extra gebruikersgegevens op in de $ presenceData variabele en geeft deze door als het laatste argument voor presence_auth ().

Bovendien moeten we de bericht versturen() methode. De eerste verandering is de kanaalnaam. Net als bij al onze andere namen moeten we de kanaalnaam voorvoegen om het type kanaal aan te duiden dat we willen gebruiken: aanwezigheid- in dit geval, zoals weergegeven in de volgende code.

$ this-> pusher-> trigger ('presence-chat', 'send-bericht', $ data);

We kunnen ook de gegevens die we met de gebeurtenis verzenden, wijzigen. In plaats van de naam van de gebruiker die de gebeurtenis heeft gestart, kunnen we ook de ID van de gebruiker opnemen..

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

Omdat we een aanwezigheidskanaal gebruiken, kunnen we de gebruikersnamen opzoeken van de client en deze kleine wijziging vermindert de grootte van de gegevens die via het netwerk worden doorgegeven.

De klant wijzigen

De cliënten kanaal object bevat alles wat we nodig hebben om met het geabonneerde kanaal te werken en het opvragen van gebruikersgegevens vormt hierop geen uitzondering. Onze kanaal object heeft een eigenschap genaamd leden die we kunnen gebruiken om de informatie van een specifieke gebruiker op te halen. We gebruiken dit object in de bericht versturen event handler, zoals dit:

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 bellen we this.channels.members.get () en geef de ID van de gebruiker door (onthoud dat onze servertoepassing nu de ID levert in plaats van de naam). Deze methode retourneert een object met een info eigendom, en dit info object bevat alle extra informatie die we in de $ presenceData variabele in de authorizeUser () methode op de server. Dus in de bovenstaande code halen we de naam van de gebruiker op met user.info.name.

We kunnen ook het op gang brengen() methode om de informatie op te nemen over de gebruiker die de clientalarmgebeurtenis heeft gestart. Om de ledengegevens van de momenteel ingelogde gebruiker op te halen, gebruikt u de me eigenschap, zoals weergegeven in de volgende code:

trigger (eventName, bericht) this.channel.trigger (eventName, message, user: this.channel.members.me); 

In deze code voegen we een toe gebruiker eigenschap naar de payload van de gebeurtenis en stel deze in op het gebruikersobject van de aangemelde gebruiker. Dit betekent dat we het kunnen wijzigen client-send-alarm gebeurtenishandler om de gebruikersnaam met de alarmmelding op te nemen, zoals deze:

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

Hier gebruiken we data.user.info.name om toegang te krijgen tot de naam van de gebruiker, zodat we kunnen zien welke gebruiker het alarm heeft verzonden, zoals hier wordt weergegeven:

Conclusie

Het gebruik van aanwezigheidskanalen biedt uw applicatie niet alleen de verhoogde beveiliging van een anoniem kanaal, maar biedt u ook de mogelijkheid om gebruikersgegevens in te winnen voor gebruikers die zich op het kanaal abonneren. Met Channels from Pusher is het ongelooflijk eenvoudig om veilige, realtime en functierijke communicatie toe te voegen aan je apps.