Share
Canale de la Pusher este o platformă care ușurează adăugarea de date în timp real în aplicațiile dvs. În acest videoclip, vă vom arăta cum să începeți să codificați comunicarea în timp real între aplicațiile client și server cu JavaScript și canale de la Pusher.
Primul lucru pe care trebuie să-l faceți este să creați un cont la https://www.pusher.com. Apasă pe Inscrie-te și alegeți modul în care doriți să vă conectați la contul dvs. Puteți utiliza contul dvs. GitHub sau Google sau puteți utiliza o adresă de e-mail și o parolă. Continuați și conectați-vă după ce vă creați contul.
Prima dată când vă conectați, vi se va solicita să creați o nouă aplicație pentru canale. Canalele vor furniza un nume implicit pentru aplicația dvs., dar este mai logic ca numele aplicației Canale să fie similar cu aplicația dvs. Pentru că vom scrie o aplicație pentru consola Node.js, o să-mi sun apelul nod-consolă aplicație. Observați că convenția de numire este să utilizați liniuțe în locul spațiilor.
Apoi, trebuie să vă alegeți clusterul și doriți să alegeți cel mai apropiat server, deoarece clienții pot fi oriunde în lume. Pentru mine, este o aruncare între Ohio și Virginia de Nord. Am ales Ohio pentru că a fost selectat implicit.
Apoi, puteți alege tehnologiile pe care le veți utiliza pentru a scrie aplicația. Am ales Node.js, dar nu ezitați să utilizați tehnologiile pe care le doriți.
După ce faceți clic pe Creați aplicația mea butonul, veți vedea Noțiuni de bază pagină. Această pagină este client și notează că se menționează că starea conexiunii este conectată. Dacă ne uităm la Prezentare generală pagina, vedem că există un singur client. Acesta este acest demo client pe pagina Getting Started.
În partea de jos a paginii Prezentare generală, veți găsi ID-ul aplicației, cheia, cheia secretă și grupul. Acestea sunt informațiile de care aveți nevoie pentru a vă conecta la aplicația dvs. Canale din cadrul aplicațiilor client și server.
Într-un nou director, creați un package.json fișier cu următoarea comandă:
npm init --yes
Veți dori apoi să instalați pachetul Pusher.
npm instalează împingătorul - salvează
Apoi, creați un fișier numit server.js-acesta este fișierul nostru de aplicație. Introduceți următorul cod:
Accentsconagua
"utilizarea strictă"; const Pusher = necesită ("împingător"); var pusher = Pusher nou (appId: '530620', cheie: 'b534d4fac76717b9872e', secret: 'f84f62e45f82cc09b8c8', cluster: 'us2', criptat: true);Acest cod creează o Pusher obiect prin trecerea unui obiect care are proprietăți pentru id-ul aplicației, cheia, cheia secretă și cluster-ul către constructor - în esență toate informațiile pe care le-am văzut în Prezentare generalăpagina va fi aici. Există și o altă proprietate numită criptat care specifică faptul că Pusher ar trebui să cripteze comunicarea dintre aplicația noastră de server și serviciul Canale.
Aplicația noastră simplă de server va accepta intrarea utilizatorului, permițându-ne să tastăm în fereastra consolei. Vom lua această intrare și apoi vom declanșa un eveniment de mesagerie. Acest cod arată astfel:
process.stdin.on ('data', (chunk)) => const str = chunk.toString () trim (); declanșa ('my-channel', 'my-event', message: str);); console.log ('Introdu un mesaj ...');În acest cod, folosim fluxul de intrare standard și ascultăm pentru evenimentul de date. Datele pe care le primim sunt date brute, astfel încât să le convertim apoi într-un șir și să tăiem spațiul alb. Apoi, verificăm dacă utilizatorul a tastat cuvântul "ieșire" și, dacă da, părăsim programul.
Apoi folosim Pusher obiecte declanșare () - metoda de declanșare mi-eveniment eveniment în canalul meu canal. Deci, declanșarea unui eveniment implică următoarele trei informații:
Este important să rețineți că numele canalului nu este numele aplicației Canale. Mai degrabă este un nume arbitrar care, sperăm, are o importanță unică pentru aplicația noastră. Am folosit standardul, canalul meu, pentru că asta este ceea ce clientul de demonstrație pePagina de pornire este abonată la. Clienții abonați la acest canal pot asculta pentru evenimente care apar în canalul meu canal. În acest caz, vor trebui să asculte mi-eveniment eveniment, pentru că asta este ceea ce declanșăm când introducem ceva în consola aplicației Node.js.
Volumul util al mesajului poate fi un obiect de orice formă. Încă o dată, acest cod stabilește o proprietate a mesajului deoarece acesta este ceea ce caută clientul de pornire.
Am terminat codul nostru de aplicație trimițând un mesaj care spune utilizatorului că aplicația este gata.
Puteți testa imediat aplicația dvs. pentru server deoarece avem deja un client: pagina Noțiuni de bază. Puteți rula serverul cu următoarea comandă:
nod server.js
Mesajele pe care le introduceți în aplicația de consolă ar trebui afișate într-o casetă de alertă de pe pagina Noțiuni de bază. Simțiți-vă liber să jucați cu asta înainte de a trece la scrierea aplicației client în secțiunea următoare.
Inițializați proiectul client într-un alt director cu următoarea comandă:
npm init --yes
Apoi instalați biblioteca Pusher client cu următoarea comandă:
npm instalează pusher-js - salvează
Creați un fișier numit client.js și introduceți următorul cod:
"utilizarea strictă"; const Pusher = necesită ('pusher-js'); lasa pusher = Pusher nou ('b534d4fac76717b9872e', cluster: 'us2', criptat: true); lasa channel = pusher.subscribe ('my-channel'); channel.bind ('meu-eveniment', (data) => console.log (data.message);); console.log ('Ascultarea mesajelor ...');Acest cod creează un client Pusher obiect. Observați că obiectul client necesită mai puține informații decât serverul-nu includeți cheia secretă sau ID-ul aplicației în codul dvs. de client! În exemplul nostru, ne abonați la canalul meu canal folosind Pusher obiecte Abonati-va() metodă. Aceasta vă permite să ascultați pentru orice eveniment din acel canal.
Abonarea la un canal vă oferă un obiect de canal pe care apoi îl puteți utiliza pentru a asculta evenimente care apar în acel canal, iar în acest cod, am folosit lega() metodă de a lega un ascultător la mi-eveniment eveniment. De fiecare dată când clientul manipulează mi-eveniment eveniment, pe care îl folosește console.log () pentru a scrie mesajul pe ecran.
Continuați și rulați clientul într-o fereastră separată a consolei, astfel încât să puteți rula atât clientul, cât și serverul în același timp. Comanda pentru a rula aplicația este:
nod client.js
Introduceți mesaje în aplicația server și ar trebui să vedeți clientul să primească și să le trimită.
Canalele reprezintă o platformă fantastică care vă oferă posibilitatea de a adăuga comunicări în timp real către aplicațiile dvs. și, după cum ați văzut din cele două aplicații pe care le-am scris în acest videoclip, puteți adăuga puterea comunicațiilor în timp real cu ajutorul unor canale și bibliotecile lor.
