Share
I denne serien har vi lært om kanaler fra Pusher, en plattform som lar deg gi brukerne den sømløse sanntidsopplevelsen de vil ha.
Gjennom hele denne serien har vi strengt sett sett på serverhendelser - hendelser som kommer fra serveren - men vi har også muligheten til å utløse hendelser fra klienten. Disse kalles klienthendelser, og de gir en annen tjeneste enn serverhendelser fordi noen handlinger kanskje ikke trenger validering eller utholdenhet.
Klienthendelser har flere restriksjoner som søknaden din må overholde for å kunne bruke dem. De mest bemerkelsesverdige er:
Vi ser på et eksempel på klienthendelser ved å legge til en lenke til vår private chat-app som sender en alarm til alle de tilkoblede klientene. Klienthendelser utløses fra objektet returnert av Pusher-bibliotekets abonnere() metode. Vi bruker denne metoden inne i ChannelsChat Vue.js komponent med følgende kode:
Accentsconagua
la kanal = pusher.subscribe ('private chat');Utløsing av en klienthendelse ligner veldig på å utløse en serverhendelse. Du bruker channel.trigger () å starte hendelsen og sende hendelsesnavnet og hendelsesdataene til den, slik:
channel.trigger ('klient-send-alarm', melding: 'Alarm!');Klienthendelse navn må begynne med klient-, som vist i denne koden. Resten av navnet er helt opp til deg. Hendelsesdataene er ikke noe mer enn et vanlig JavaScript-objekt som inneholder egenskapene (og deres verdier) du vil sende med hendelsen.
Chatprogrammet er kanal objektet ligger inne i ChannelsChat Vue.js-komponent-det er her vi lager objektet og setter lytteren til sende melding begivenhet. Vi kan omstrukturere denne komponenten slik at den gir en mekanisme for å utløse klienthendelser.
Det første vi må gjøre er å lagre vår kanal objekt som forekomstdata slik at vi kan referere det gjennom hele komponenten. Vi gjør dette ved å legge til en kanal eiendom til vår komponent, slik:
data () return messages: [], channel: null
Da endrer vi laget () krok slik at vi lagrer vår kanal objekt i det nye kanal eiendom i stedet for kanal variabel.
// let channel = pusher.subscribe ('private chat'); // gammel kode this.channel = pusher.subscribe ('private chat');Bare husk at denne endringen krever at vi prefikser tidligere bruk av kanal med dette.
La oss nå legge til en metode som vil utløse en klienthendelse. La oss kalle det avtrekker(), og koden vil se ut som følgende:
metoder: trigger (eventnavn, melding) this.channel.trigger (eventName, message);
Den aksepterer hendelsesnavnet og meldingen som skal inkluderes i arrangementet og overfører dataene til this.channel.trigger (), dermed utløser klient hendelsen.
Brukeren samhandler primært med MessageSend komponent fordi den inneholder brukergrensesnittet for å skrive inn og sende meldinger. Så vi skal passere avtrekker() metode som en prop til MessageSend, som dette:
Det siste vi må gjøre i denne komponenten, er å lytte etter klient-send-alarm begivenhet. Lytting for klienthendelser er nesten identisk med å lytte etter serverhendelser. Den eneste forskjellen er dataene vi sender til binde() metode. Legg til følgende som siste linje i laget () krok:
this.channel.bind ('client-send-alarm', (data) => varsling (data.message));For denne hendelsen skyver vi ikke den angitte meldingen til chat-skjermen. I stedet viser vi bare den angitte meldingen i en advarselsboks.
I MessageSend komponent, la oss først legge til utløserproppen til komponenten.
rekvisitter: ['trigger']
La oss da legge til den nye alarmlenken etter Sende knapp.
Alarm!
Lenkens klikk hendelsen er bundet til sendAlarm () metode, som vi legger til komponentens fremgangsmåter erklæring. Her er denne metoden veldig enkel kode:
metoder: // sendMessage () her sendAlarm () this.trigger ('klient-send-alarm', 'Alarm!'); De sendAlarm () metoden ringer ganske enkelt avtrekker(), passering klient-send-alarm som navnet på hendelsen og Alarm! som meldingen.
For å se resultatene av våre kodendringer, må du ha to klienter knyttet til chat-appen. Selv om det kan synes å være åpenbart, er det en veldig god grunn til å ha to klienter åpne: klienten som starter hendelsen, mottar ikke hendelsen.
Så, med to klienter åpne, klikk på Alarm! lenke i en klient, og du vil se hendelsen håndtert i den andre klienten, som vist her:
Klienten til venstre utløste hendelsen, og du kan se den håndtert i klienten til høyre.
Det sier seg selv at de fleste hendelser som brukes i kanaler-drevne applikasjoner, er serverhendelser, men det er noen tilfeller der du kanskje vil starte en hendelse som ikke trenger server-side validering eller utholdenhet. Med kanaler fra Pusher er det utrolig enkelt å utløse og lytte etter klienthendelser!
