Share
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.
In questa serie, abbiamo esaminato rigorosamente eventi del server, eventi che hanno avuto origine sul server, ma abbiamo anche la possibilità di attivare eventi dal client. Questi sono chiamati eventi client e forniscono un servizio diverso rispetto agli eventi del server poiché alcune azioni potrebbero non richiedere la convalida o la persistenza.
Gli eventi del cliente hanno diverse restrizioni a cui la tua applicazione deve aderire per poterle utilizzare. I più notevoli sono:
Analizzeremo un esempio di eventi client aggiungendo un link alla nostra app di chat privata che invia un allarme a tutti i client connessi. Gli eventi client vengono attivati dall'oggetto restituito dalla libreria Pusher sottoscrivi() metodo. Usiamo questo metodo all'interno del ChannelsChat Componente Vue.js con il seguente codice:
Accentsconagua
lascia channel = pusher.subscribe ('private-chat');L'attivazione di un evento client è molto simile all'attivazione di un evento del server. Usate channel.trigger () per avviare l'evento e passare il nome dell'evento e i dati dell'evento ad esso, in questo modo:
channel.trigger ('client-send-alarm', message: 'Alarm!');I nomi degli eventi del cliente devono cominciare con cliente-, come mostrato in questo codice. Il resto del nome dipende interamente da te. I dati dell'evento non sono altro che un normale oggetto JavaScript che contiene le proprietà (e i loro valori) che si desidera inviare con l'evento.
L'applicazione di chat canale l'oggetto risiede all'interno del ChannelsChat Componente Vue.js: è qui che creiamo l'oggetto e impostiamo il listener per il invia messaggio evento. Possiamo ristrutturare questo componente in modo che fornisca un meccanismo per l'attivazione degli eventi client.
La prima cosa che dobbiamo fare è archiviare la nostra canale oggetti come dati di istanza in modo da poter fare riferimento a tutto il componente. Lo faremo aggiungendo a canale proprietà al nostro componente, come questo:
data () return messages: [], channel: null
Quindi cambieremo il creato() gancio in modo che conserviamo il nostro canale oggetto nel nuovo canale proprietà invece del canale variabile.
// lascia channel = pusher.subscribe ('private-chat'); // vecchio codice this.channel = pusher.subscribe ('private-chat');Ricorda solo che questo cambiamento ci impone di anteporre gli usi precedenti di canale con Questo.
Ora aggiungiamo un metodo che attiverà un evento client. Chiamiamolo trigger (), e il suo codice sarà simile al seguente:
metodi: trigger (eventName, message) this.channel.trigger (eventName, message);
Accetta il nome dell'evento e il messaggio da includere nell'evento e li trasmette this.channel.trigger (), innescando così l'evento del cliente.
L'utente interagisce principalmente con MessageSend componente perché contiene l'interfaccia utente per l'immissione e l'invio di messaggi. Quindi passeremo il trigger () metodo come prop a MessageSend, come questo:
L'ultima cosa che dobbiamo fare in questo componente è ascoltare il client-send-allarme evento. Ascoltare eventi client è quasi identico all'ascolto di eventi server, l'unica differenza sono i dati che passiamo a bind () metodo. Aggiungere il seguente come l'ultima riga del creato() gancio:
this.channel.bind ('client-send-alarm', (data) => alert (data.message));Per questo evento, non inseriamo il messaggio fornito nella schermata della chat. Invece, semplicemente visualizziamo il messaggio fornito in una casella di avviso.
Nel MessageSend componente, aggiungiamo prima il puntello del grilletto al componente.
oggetti di scena: ['trigger']
Aggiungiamo quindi il nuovo link di allarme dopo il Inviare pulsante.
Allarme!
Il collegamento clic l'evento è legato al sendAlarm () metodo, che aggiungeremo al componente metodi dichiarazione. Ecco il codice molto semplice di questo metodo:
metodi: // sendMessage () qui sendAlarm () this.trigger ('client-send-alarm', 'Alarm!'); Il sendAlarm () il metodo chiama semplicemente trigger (), passaggio client-send-allarme come nome dell'evento e Allarme! come il messaggio.
Per vedere i risultati delle nostre modifiche al codice, avrai bisogno di due client connessi all'app di chat. Anche se ciò può sembrare ovvio, c'è una buona ragione per avere due clienti aperti: il cliente che avvia l'evento non riceve l'evento.
Quindi, con due client aperti, fare clic su Allarme! link in un client, e vedrai l'evento gestito nell'altro client, come mostrato qui:
Il client a sinistra ha attivato l'evento e puoi vederlo gestito nel client a destra.
Inutile dire che la maggior parte degli eventi utilizzati nelle applicazioni basate su Canali sono eventi del server, ma ci sono alcuni casi in cui è possibile che si desideri avviare un evento che non richiede la convalida o la persistenza lato server. Con Canali di Pusher, è incredibilmente facile da attivare e ascoltare gli eventi dei clienti!
