Începeți cu Pusher Evenimente client

În această serie, am învățat despre Channels from Pusher, o platformă care vă permite să oferiți utilizatorilor experiența fără probleme în timp real. 

De-a lungul acestei serii, ne-am uitat strict la evenimentele server-evenimente care provin de pe server-dar avem, de asemenea, posibilitatea de a declanșa evenimente de la client. Acestea se numesc evenimente client și oferă un serviciu diferit de evenimentele serverului, deoarece unele acțiuni ar putea să nu necesite validare sau persistență.

Evenimentele clientului au mai multe restricții pe care aplicația dvs. trebuie să le respecte pentru a le utiliza. Cele mai notabile sunt:

• Evenimentele pentru clienți trebuie să fie activate prin tabloul de bord al aplicației dvs. Canale.
• Evenimentele pentru clienți pot fi emise numai pe canale private și de prezență.
• Ele nu sunt livrate clientului care inițiază evenimentul.
• Acestea sunt limitate la maximum zece mesaje pe secundă pe client.

Declanșarea evenimentelor clienților

Vom examina un exemplu de evenimente pentru clienți prin adăugarea unui link către aplicația noastră privată de chat care trimite o alarmă tuturor clienților conectați. Evenimentele client sunt declanșate de la obiectul returnat de biblioteca Pusher Abonati-va() metodă. Folosim această metodă în interiorul ChannelsChat Componentă Vue.js cu următorul cod:

lasa channel = pusher.subscribe ('private-chat');

Declanșarea unui eveniment client este foarte similară cu declanșarea unui eveniment de server. Să utilizați channel.trigger () pentru a iniția evenimentul și a transmite numele evenimentului și datele despre eveniment, cum ar fi:

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

Numele evenimentului clientului trebuie să înceapă cu client-, așa cum se arată în acest cod. Restul numelui depinde de dvs. Datele evenimentului nu sunt altceva decât un obiect obișnuit al JavaScript care conține proprietățile (și valorile acestora) pe care doriți să le trimiteți cu evenimentul.

Modificarea aplicației de chat

Aplicația pentru chat canal obiect se află în interiorul ChannelsChat Componentă Vue.js - acolo se creează obiectul și se instalează ascultătorul pentru Trimite mesaj eveniment. Putem restructura această componentă astfel încât să ofere un mecanism de declanșare a evenimentelor clientului.

Primul lucru pe care trebuie să-l facem este să ne păstrăm canal obiect ca date de instanță, astfel încât să îl putem referi pe întreaga componentă. Vom face acest lucru adăugând o canal proprietății componentei noastre, astfel:

date () retur mesaje: [], canal: null

Atunci vom schimba creată() cârlig pentru a ne depozita canal obiect în noul canal proprietate în loc de canal variabil.

// permiteți channel = pusher.subscribe ("private-chat"); // cod vechi this.channel = pusher.subscribe ('private-chat');

Nu uitați că această modificare ne obligă să prefixăm utilizările anterioare ale canal cu acest.

Declanșarea unui eveniment client

Acum, să adăugăm o metodă care va declanșa un eveniment client. Să spunem asta declanșare (), iar codul său va arăta astfel:

metode: trigger (eventName, mesaj) this.channel.trigger (eventName, message); 

Acceptă numele evenimentului și mesajul pe care îl include în eveniment și transmite acele date pe this.channel.trigger (), declanșând astfel evenimentul clientului.

Utilizatorul interacționează în primul rând cu MessageSend pentru că conține interfața utilizator pentru introducerea și trimiterea mesajelor. Așa că vom trece declanșare () ca o propunere MessageSend, asa:

Ascultarea pentru evenimentul clientului

Ultimul lucru pe care trebuie să-l facem în această componentă este să ascultați client-trimite-alarmă eveniment. Ascultarea pentru evenimentele clienților este aproape identică cu cea de a asculta evenimentele server-singura diferență este datele pe care le transmitem către lega() metodă. Adăugați următoarele ca ultimul rând al creată() cârlig:

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

Pentru acest eveniment, nu împingem mesajul furnizat pe ecranul de chat. În schimb, afișăm mesajul furnizat într-o casetă de alertă.

Conectarea la UI 

În MessageSend componente, să adăugăm mai întâi elementul de declanșare a componentei.

props: ['trigger']

Să adăugăm apoi noua legătură de alarmă după Trimite buton.

 Trimite 
 
 Alarma! 

Linkul e clic eveniment este legat de sendAlarm () metoda pe care o vom adăuga la componenta metode declaraţie. Aici este codul foarte simplu al acestei metode:

metode: // sendMessage () aici sendAlarm () this.trigger ('client-send-alarm', 'Alarm!'); 

sendAlarm () metoda doar apeluri declanșare (), trecere client-trimite-alarmă numele evenimentului și Alarma! ca mesaj.

Testarea modificărilor

Pentru a vedea rezultatele modificărilor codului nostru, veți avea nevoie de doi clienți conectați la aplicația de chat. În timp ce acest lucru poate părea evident, există un motiv foarte bun pentru a avea doi clienți deschisi: clientul care inițiază evenimentul nu primește evenimentul.

Deci, cu doi clienți deschisi, faceți clic pe Alarma! într-un singur client și veți vedea evenimentul tratat în celălalt client, după cum se arată aici:

Clientul din stânga a declanșat evenimentul și puteți vedea că acesta a fost manipulat în partea dreaptă a clientului.

Concluzie

Este de la sine înțeles că majoritatea evenimentelor folosite în aplicațiile cu canale sunt evenimente server, dar există câteva cazuri în care poate doriți să inițiați un eveniment care nu are nevoie de validare sau persistență de la server. Cu canalele de la Pusher, este incredibil de ușor să declanșați și să ascultați evenimentele clientului!