Inizia con Pusher utilizzo dei canali di presenza

In questa serie, abbiamo imparato a conoscere i canali di Pusher, una piattaforma che ti consente di offrire ai tuoi utenti l'esperienza in tempo reale che desiderano.

I canali di presenza si basano sulla sicurezza fornita dai canali privati, ma aggiungono il vantaggio di sapere quali utenti sono abbonati e connessi a quel canale. La parte migliore è la facilità con cui implementare e utilizzare i canali di presenza, ed è ancora più semplice se hai già configurato la tua app per utilizzare canali privati. In questo post imparerai come utilizzare i canali di presenza.

Un'app di chat ancora migliore

La nostra applicazione di chat utilizza attualmente un canale privato per facilitare la comunicazione istantanea, client / server. Quindi configurare la nostra app per utilizzare un canale di presenza sarà estremamente semplice. Iniziamo con l'app del server.

Modifica del server

Per utilizzare un canale privato, abbiamo configurato un endpoint per garantire che un utente sia autenticato con la nostra applicazione. Questo endpoint esegue il ChannelsController'S authorizeUser () metodo, e chiama la libreria di Pusher socket_auth () metodo per aiutare a autenticare l'utente. Per poter utilizzare un canale di presenza, dobbiamo cambiare authorizeUser () chiamare la libreria di Pusher presence_auth () metodo, come questo:

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

Ma la modifica del nome del metodo è solo la prima modifica; dobbiamo anche fornire presence_auth () con l'identificativo univoco dell'utente e qualsiasi informazione aggiuntiva che vogliamo fornire all'utente. Il codice sopra memorizza questi dati utente aggiuntivi nel file $ presenceData variabile e lo passa come argomento finale a presence_auth ().

Inoltre, dobbiamo modificare il invia messaggio() metodo. Il primo cambiamento è il nome del canale. Proprio come con tutti i nostri altri nomi, dobbiamo prefisso il nome del canale per indicare il tipo di canale che vogliamo utilizzare: presenza- in questo caso, come mostrato nel seguente codice.

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

Possiamo anche modificare i dati che inviamo con l'evento, invece di fornire il nome dell'utente che ha avviato l'evento, possiamo includere l'ID dell'utente.

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

Poiché utilizzeremo un canale di presenza, possiamo cercare i nomi utente dal client e questa piccola modifica ridurrà la dimensione dei dati che passano sulla rete.

Cambiare il cliente

Il cliente canale l'oggetto contiene tutto ciò di cui abbiamo bisogno per lavorare con il canale sottoscritto e l'interrogazione dei dati dell'utente non fa eccezione. Nostro canale l'oggetto ha una proprietà chiamata membri che possiamo usare per recuperare le informazioni di un utente specifico. Useremo questo oggetto nel invia messaggio gestore di eventi, come questo:

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

Qui, chiamiamo this.channels.members.get () e passare l'ID dell'utente (ricorda, la nostra applicazione server ora fornisce l'ID invece del nome). Questo metodo restituisce un oggetto con un Informazioni proprietà, e questo Informazioni oggetto contiene tutte le informazioni extra che abbiamo fornito nel $ presenceData variabile nel authorizeUser () metodo sul server. Quindi nel codice precedente, recuperiamo il nome dell'utente con user.info.name.

Possiamo anche modificare il trigger () metodo per includere le informazioni sull'utente che ha avviato l'evento di allarme del client. Per recuperare i dati dei membri dell'utente attualmente loggati, si usa il me proprietà, come mostrato nel seguente codice:

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

In questo codice, aggiungiamo a utente proprietà al carico utile dell'evento e impostarlo sull'oggetto utente dell'utente connesso. Questo significa che possiamo modificare il client-send-allarme gestore di eventi per includere il nome dell'utente con il messaggio di allarme, in questo modo:

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

Qui, usiamo data.user.info.name per accedere al nome dell'utente in modo che possiamo vedere quale utente ha inviato l'allarme, come mostrato qui:

Conclusione

L'uso dei canali di presenza non solo fornisce alla tua applicazione la maggiore sicurezza di un canale anonimo, ma ti dà anche la possibilità di interrogare i dati dell'utente per gli utenti che si iscrivono al canale. Con Canali di Pusher, è incredibilmente facile aggiungere comunicazioni sicure, in tempo reale e ricche di funzionalità alle tue app.