Premiers pas avec Pusher événements client

Dans cette série, nous avons découvert Channels from Pusher, une plate-forme qui vous permet de donner à vos utilisateurs l'expérience transparente qu'ils recherchent en temps réel.. 

Tout au long de cette série, nous avons uniquement examiné les événements de serveur - les événements provenant du serveur - mais nous avons également la possibilité de déclencher des événements à partir du client. Ils s'appellent des événements client et fournissent un service différent de celui du serveur car certaines actions peuvent ne pas nécessiter de validation ou de persistance..

Les événements client ont plusieurs restrictions que votre application doit respecter pour pouvoir les utiliser. Les plus notables sont:

• Les événements clients doivent être activés via le tableau de bord de votre application Channels.
• Les événements clients ne peuvent être émis que sur des canaux privés et de présence.
• Ils ne sont pas remis au client qui déclenche l'événement.
• Ils sont limités à dix messages par seconde et par client..

Déclenchement d'événements client

Nous examinerons un exemple d'événements client en ajoutant un lien à notre application de discussion privée qui envoie une alarme à tous les clients connectés. Les événements client sont déclenchés à partir de l'objet renvoyé par la bibliothèque Pusher. souscrire() méthode. Nous utilisons cette méthode à l'intérieur du ChannelsChat Composant Vue.js avec le code suivant:

let channel = pusher.subscribe ('chat privé');

Déclencher un événement client est très similaire à déclencher un événement serveur. Tu utilises channel.trigger () pour lancer l'événement et lui transmettre le nom de l'événement et ses données, comme suit:

channel.trigger ('client-send-alarm', message: 'Alarm!');

Les noms d’événement client doivent commencer par client-, comme indiqué dans ce code. Le reste du nom est entièrement à vous. Les données d'événement ne sont rien d'autre qu'un objet JavaScript normal contenant les propriétés (et leurs valeurs) que vous souhaitez envoyer avec l'événement..

Modification de l'application de chat

L'application de chat canal l'objet réside à l'intérieur du ChannelsChat Composant Vue.js, c’est là que nous créons l’objet et configurons l’auditeur pour le envoyer le message un événement. Nous pouvons restructurer ce composant afin qu’il fournisse un mécanisme permettant de déclencher des événements client..

La première chose à faire est de stocker nos canal objet en tant que données d'instance afin que nous puissions le référencer dans tout le composant. Nous ferons cela en ajoutant un canal propriété de notre composant, comme ceci:

data () return messages: [], channel: null

Ensuite, nous allons changer le créé() crochet pour que nous stockions notre canal objet dans le nouveau canal propriété au lieu de canal variable.

// let channel = pusher.subscribe ('chat privé'); // ancien code this.channel = pusher.subscribe ('private-chat');

Rappelez-vous simplement que ce changement nous oblige à préfixer les utilisations précédentes de canal avec ce.

Déclenchement d'un événement client

Ajoutons maintenant une méthode qui déclenchera un événement client. Appelons ça déclencheur(), et son code ressemblera à ceci:

méthodes: trigger (eventName, message) this.channel.trigger (eventName, message); 

Il accepte le nom de l'événement et le message à inclure avec l'événement et transmet ces données à this.channel.trigger (), déclenchant ainsi l'événement client.

L'utilisateur interagit principalement avec le Message envoyé composant car il contient l'interface utilisateur pour la saisie et l'envoi de messages. Nous allons donc passer le déclencheur() méthode comme un accessoire à Message envoyé, comme ça:

Écoute pour l'événement client

La dernière chose que nous devons faire dans cette composante est d'écouter le envoi-client-alarme un événement. L’écoute des événements clients est presque identique à celle des événements serveur. La seule différence est que nous transmettons les données au serveur. lier() méthode. Ajouter ce qui suit comme dernière ligne du créé() crochet:

this.channel.bind ('client-send-alarm', (data) => alert (data.message));

Pour cet événement, nous ne transmettons pas le message fourni à l'écran de discussion. Au lieu de cela, nous affichons simplement le message fourni dans une boîte d’alerte.

Câblage de l'interface utilisateur 

dans le Message envoyé composant, ajoutons d'abord l'accessoire de déclenchement au composant.

accessoires: ['trigger']

Ajoutons ensuite le nouveau lien d’alarme après le Envoyer bouton.

 Envoyer 
 
 Alarme! 

Le lien Cliquez sur l'événement est lié à la sendAlarm () méthode, que nous ajouterons à la composante les méthodes déclaration. Voici le code très simple de cette méthode:

méthodes: // sendMessage () here sendAlarm () this.trigger ('client-send-alarm', 'Alarm!'); 

le sendAlarm () la méthode appelle simplement déclencheur(), qui passe envoi-client-alarme comme nom de l'événement et Alarme! comme le message.

Tester les changements

Pour voir les résultats de nos modifications de code, vous aurez besoin de deux clients connectés à l'application de chat. Bien que cela puisse sembler évident, il existe une très bonne raison d'ouvrir deux clients: le client qui déclenche l'événement ne le reçoit pas..

Alors, avec deux clients ouverts, cliquez sur le bouton Alarme! lien dans un client, et vous verrez l'événement traité dans l'autre client, comme indiqué ici:

Le client à gauche a déclenché l'événement, et vous pouvez le voir traité dans le client à droite..

Conclusion

Il va sans dire que la majorité des événements utilisés dans les applications alimentées par des canaux sont des événements de serveur, mais il est parfois nécessaire d'initier un événement qui ne nécessite ni validation ni persistance côté serveur. Avec Channels from Pusher, il est incroyablement facile de déclencher et d’écouter les événements du client.!