Share
Canale din Pusher este o platformă care vă permite să acordați aplicațiilor fără probleme în timp real.
În acest post, vă voi arăta cum să scrieți componentele funcționale ale unei aplicații de chat foarte simple. Este un exemplu dezbrăcat, dar veți vedea cum canalele simplifică implementarea comunicațiilor în timp real într-o aplicație web.
Aplicația noastră de server este un singur fișier PHP numit messages.php care se va ocupa de cererile POST provenite de la browser. Mesagerul nostru de mesaje va trimite mesajele clientului la serviciul Canale, care apoi va difuza aceste mesaje către alți clienți.
Când utilizați PHP pentru aplicația dvs. de server, doriți să descărcați și să utilizați biblioteca Canale și puteți instala acea bibliotecă folosind compozitorul și următoarea comandă:
compozitorul are nevoie de pushher / pushher-php-server
Codul pentru messages.php este aproape o copie exactă a ceea ce puteți găsi pe pagina Noțiuni introductive din tabloul de bord al canalelor. Există doar câteva modificări.
În primul rând, trebuie să cereți autoload.php fișier pentru a utiliza biblioteca Pusher:
cereți "./.../vendor/autoload.php";
Apoi, datele provenite de la client sunt în format JSON, deci, evident, dorim să o decodăm într-o arhivă PHP funcțională.
Accentsconagua
$ data = json_decode (fișier_get_contents ('php: // input'), true);Apoi dorim să ne stabilim obiectul Pusher astfel încât să putem declanșa un eveniment.
$ opțiuni = array ('cluster' => 'us2'); $ pusher = Pusher \ Pusher nou ('427017da1bd2036904f3', 'c46fabbaf65c4c31686b', '534815', $ opțiuni);Instalarea mea PHP nu funcționează dacă criptat opțiunea este activată, așa că am omis din codul meu. Kilometrajul dvs. poate varia, dar este important să rețineți că criptat opțiunea determină dacă datele trimise între server și canale sunt criptate sau nu. Nu are nimic de-a face cu conexiunea dintre canale și clienții dvs. - biblioteca client se ocupă de aceasta.
Linia finală a codului serverului nostru trimite datele de mesaj către canale:
$ pusher-> trigger ('anon-chat', 'send-message', $ date);Ca și în cazul altor biblioteci de servere, trecem trei aspecte declanșare () metodă:
Anon-chat- Trimite mesaj $ date Observați că numele canalului și al evenimentului diferă de numele canalului și al evenimentului utilizat pe pagina Getting Started. Nu este necesar să creați canale noi sau să definiți evenimente personalizate în tabloul de bord; utilizați orice nume de canal și eveniment dorit în codul dvs..
Clientul nostru este o pagină web cu trei componente Vue.js care alimentează interfața utilizator. Se numește componenta principală ChannelsChat, și acolo ne vom pune pe noi Pusher obiect care ascultă Trimite mesaj evenimente în Anon-chat- canal. Să folosim creată cârlig.
creat () let pusher = Pusher nou ('427017da1bd2036904f3', cluster: 'us2', criptat: true); lasa channel = pusher.subscribe ('anon-chat'); channel.bind ('send-message', funcția () // care urmează să fie implementată mai târziu); În acest cod, creăm Pusher obiect, abonați la Anon-chat- canal și ascultați Trimite mesaj evenimente.
Deoarece aceasta este o aplicație de chat, trebuie să stocăm istoricul mesajelor astfel încât cei care utilizează aplicația să poată vedea toate mesajele pe care le-au primit în timpul sesiunii. Cea mai ușoară modalitate de a realiza acest lucru este de a stoca fiecare mesaj ca element în matrice. Deci, să adăugăm a mesaje proprietăți de date pentru această componentă, după cum se arată în următorul cod:
date () retur mesaje: []
Apoi, când vom primi un mesaj, vom pur și simplu Apăsați() la matricea noastră, așa cum se arată în următorul cod:
channel.bind ('trimite mesaj', (data) => this.messages.push (data.message));Apoi vom trece mesaje la MessageView componente:
Ultimul din codul nostru aparține MessageSend componente; când utilizatorul introduce un mesaj și dă clic pe butonul Trimiteți, trebuie să trimitem datele respective messages.php.
În primul rând, asigurați-vă că utilizatorul a introdus ceva în caseta de text. În caz contrar, nu este nevoie să faceți nimic!
sendMessage (e) if (! this.message) retur; // va urma…
mesaj proprietatea este legată de 's valoare, așa că vom folosi pentru a determina dacă avem orice date.
Apoi trimitem cererea POST la message.php, iar datele sunt un obiect cu a mesaj proprietate.
// (continuare) axios.post ('/ message.php', message: this.message), apoi (() => this.message = ";). (err););Dacă cererea are succes, ștergem mesaj valoarea proprietății, care la rândul ei eliberează (amintiți-vă că sunt obligați). Dacă cererea nu reușește, o casetă de avertizare îi spune utilizatorului că apare o eroare.
Asta e pentru cod. Deschideți astfel două ferestre de browser și indicați-le index.php. Începeți să trimiteți mesaje și ar trebui să vedeți că ambele ferestre actualizează automat și afișează mesajele.
După cum puteți vedea, canalele fac incredibil de ușor să adăugați rapid aplicații în timp real în comunicații în timp real și nu a necesitat chiar prea multe coduri!
De asemenea, ați învățat că puteți crea canale și evenimente în timp ce vă scrieți codul. Nu este nevoie să le configurați înainte de a le utiliza.
În sfârșit, ați învățat cum puteți configura aplicațiile dvs. pentru a integra comunicarea în timp real. Pur și simplu să se ocupe de intrarea utilizatorilor de la serverul dvs. și să declanșeze evenimente bazate pe acea intrare.
