Share
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.
In deze reeks hebben we strikt gekeken naar servergebeurtenissen - gebeurtenissen die afkomstig zijn van de server - maar we hebben ook de mogelijkheid om gebeurtenissen van de client te activeren. Dit worden clientgebeurtenissen genoemd en ze bieden een andere service dan servergebeurtenissen, omdat sommige acties mogelijk geen validatie of persistentie vereisen.
Clientgebeurtenissen hebben verschillende beperkingen waaraan uw toepassing moet voldoen om ze te kunnen gebruiken. De meest opvallende zijn:
We zullen een voorbeeld van klantgebeurtenissen bekijken door een link toe te voegen aan onze privé-chat-app die een alarm stuurt naar alle verbonden clients. Clientgebeurtenissen worden geactiveerd vanuit het object dat door de Pusher-bibliotheek wordt geretourneerd abonneren () methode. We gebruiken deze methode in de ChannelsChat Vue.js component met de volgende code:
Accentsconagua
laat kanaal = pusher.subscribe ('private-chat');Het triggeren van een clientevent lijkt sterk op het activeren van een servergebeurtenis. Je gebruikt channel.trigger () om het evenement te starten en de gebeurtenisnaam en gebeurtenisgegevens door te geven, zoals deze:
channel.trigger ('client-send-alarm', message: 'Alarm!');De namen van klantgebeurtenissen moeten beginnen met cliënt-, zoals getoond in deze code. De rest van de naam is helemaal aan jou. De gebeurtenisgegevens zijn niets meer dan een normaal JavaScript-object dat de eigenschappen (en hun waarden) bevat die u met de gebeurtenis wilt verzenden.
De chatapplicatie kanaal object bevindt zich in de ChannelsChat Vue.js component - dat is waar we het object creëren en de luisteraar instellen voor de bericht versturen evenement. We kunnen dit onderdeel zodanig herstructureren dat het een mechanisme biedt voor het activeren van klantgebeurtenissen.
Het eerste dat we moeten doen is onze opslaan kanaal object als instantiegegevens, zodat we ernaar kunnen verwijzen in de hele component. We doen dit door een kanaal eigendom van onze component, zoals dit:
data () return messages: [], channel: null
Dan zullen we het veranderen gemaakt () haak zodat we onze opslaan kanaal object in het nieuwe kanaal eigenschap in plaats van de kanaal veranderlijk.
// laat channel = pusher.subscribe ('private-chat'); // oude code this.channel = pusher.subscribe ('private-chat');Onthoud alleen dat deze wijziging ons ertoe dwingt om het vorige gebruik van voorvoegsels te gebruiken kanaal met deze.
Laten we nu een methode toevoegen die een cliëntgebeurtenis zal activeren. Laten we het noemen op gang brengen(), en de code ziet er als volgt uit:
methoden: trigger (eventName, bericht) this.channel.trigger (eventName, message);
Het accepteert de naam van de gebeurtenis en het bericht dat bij de gebeurtenis moet worden gevoegd en geeft die gegevens door aan this.channel.trigger (), dus het triggeren van de klantgebeurtenis.
De gebruiker heeft voornamelijk interactie met de MessageSend component omdat het de gebruikersinterface bevat voor het invoeren en verzenden van berichten. Dus we zullen de op gang brengen() methode als een steun voor MessageSend, zoals dit:
Het laatste dat we in dit onderdeel moeten doen, is luisteren naar de client-send-alarm evenement. Luisteren naar clientgebeurtenissen is bijna identiek aan het luisteren naar servergebeurtenissen - het enige verschil is de gegevens die we doorgeven aan de binden() methode. Voeg het volgende toe als de laatste regel van de gemaakt () haak:
this.channel.bind ('client-send-alarm', (data) => alert (data.message));Voor deze gebeurtenis pushen we het opgegeven bericht niet naar het chatscherm. In plaats daarvan geven we het opgegeven bericht gewoon weer in een waarschuwingsvenster.
In de MessageSend component, laten we eerst de triggerprop aan de component toevoegen.
rekwisieten: ['trigger']
Laten we dan de nieuwe alarmlink toevoegen na de Sturen knop.
Alarm!
De connecties Klik evenement is gebonden aan de sendAlarm () methode, die we zullen toevoegen aan de componenten methoden verklaring. Hier is de zeer eenvoudige code van deze methode:
methoden: // sendMessage () hier sendAlarm () this.trigger ('client-send-alarm', 'Alarm!'); De sendAlarm () methode gewoon oproepen op gang brengen(), voorbijgaand client-send-alarm als de naam van het evenement en Alarm! als het bericht.
Om de resultaten van onze codeveranderingen te bekijken, hebt u twee clients nodig die zijn verbonden met de chat-app. Hoewel dat vanzelfsprekend lijkt, is er een zeer goede reden om twee cliënten open te stellen: de cliënt die het evenement initieert, ontvangt het evenement niet.
Dus, met twee openstaande clients, klikt u op de Alarm! koppeling in één client en u ziet de gebeurtenis die in de andere client is afgehandeld, zoals hier wordt weergegeven:
De client aan de linkerkant heeft de gebeurtenis geactiveerd en u kunt zien dat deze is afgehandeld in de client aan de rechterkant.
Vanzelfsprekend zijn de meeste evenementen die worden gebruikt in door kanalen gestuurde toepassingen servergebeurtenissen, maar er zijn enkele gevallen waarin u een gebeurtenis wilt starten die geen validatie of persistentie aan de serverzijde vereist. Met Channels from Pusher is het ongelooflijk eenvoudig om client-events te activeren en te beluisteren!
