de Rahat Khanna

Cum să creați o caracteristică Live Comment folosind JavaScript și Pusher

În zilele noastre, „Social” a devenit cuvântul cheie și ne dorim cu toții ca aplicațiile noastre să fie centrul acestor conversații sociale uimitoare. Comentariile la o postare, videoclip, actualizare sau orice funcție a noii aplicații este o modalitate excelentă de a adăuga conversații sociale distractive și îmbogățitoare în aplicația dvs.

Dacă aceste conversații pot fi în timp real, atunci este chiar mai bine. Deci, în acest articol vom discuta despre modul în care putem crea o funcție de comentariu în timp real pentru aplicațiile noastre web folosind Pusher cu Vanilla JavaScript pe front-end și Node.js pe back-end.

Vom numi acest sistem de comentarii în timp real Comentarii Flash, care poate fi refolosită pentru mai multe postări / funcții din aplicația dvs. și poate genera conversații uimitoare în timp real. Doar cunoștințele de bază HTML, CSS și JavaScript sunt necesare pentru a urmări această postare de blog.

Aplicația noastră va arăta cam așa:

Cum sa creati o caracteristica Live Comment folosind JavaScript si

Secțiuni

  • Scurtă introducere în Pusher
  • Înscriere cu Pusher
  • Node.js și aplicația Express pentru expunerea unui API de creare a comentariilor și declanșarea unui eveniment Pusher
  • Front End folosind Vanilla JavaScript abonându-se la Channel

** Treceți peste primele două secțiuni, dacă v-ați înscris deja la Pusher.

Scurtă introducere în Pusher

Pusher este o platformă uimitoare care abstractizează complexitatea implementării unui sistem în timp real folosind WebSockets sau Long Polling. Putem adăuga instantaneu caracteristici în timp real aplicațiilor noastre web existente folosind Pusher, deoarece acceptă o mare varietate de kituri de dezvoltare software (SDK).

Kituri de integrare sunt disponibile pentru o varietate de biblioteci front-end precum Backbone, React, Angular și jQuery – și, de asemenea, platforme / limbaje back-end precum .NET, Java, Python, Ruby, PHP și GO.

Înscriere cu Pusher

Puteți crea un cont gratuit în Pusher aici. După ce vă înscrieți și vă autentificați pentru prima dată, vi se va cere să creați o aplicație nouă așa cum se vede în imaginea de mai jos. Va trebui să completați câteva informații despre proiectul dvs. și, de asemenea, biblioteca front-end sau limba back-end cu care veți construi aplicația. De asemenea, aveți opțiunea de a selecta clusterul de Pusher pe baza distribuției locației utilizatorilor dvs., pe care am ales-o ap2 (Mumbai, India) deoarece aș putea să construiesc o aplicație pentru regiunea India.

Cum sa creati o caracteristica Live Comment folosind JavaScript si

Pentru acest articol, vom selecta JavaScript pentru front-end și Node.js pentru back-end așa cum se vede în imaginea de mai sus.

Acest lucru vă va arăta doar un set de exemple de coduri de pornire pentru aceste selecții, dar puteți utiliza orice kit de integrare mai târziu cu această aplicație.

1611328154 82 Cum sa creati o caracteristica Live Comment folosind JavaScript si

Aplicația Node.js

Puteți crea un nou folder numit flash-comments și rulați următoarea comandă la rădăcina folderului:

Vă va cere o grămadă de informații cu privire la aplicație și va crea o nouă package.json fișier din interiorul folderului.

Vom folosi cadrul Express destul de simplu și popular din Node.js. Acum, vom instala pachetele importante care vor fi utilizate în aplicația noastră minimală Express.

După instalarea tuturor cerințelor npm module, acum vom crea un fișier punct de intrare pentru aplicația noastră Node.js ca server.js în folderul rădăcină. Adăugați următorul cod de bază pentru ca un server HTTP de bază să fie rulat folosind portul 9000.

Pusher are un modul NPM open source pentru integrările Node.js pe care le vom folosi. Oferă un set de metode de utilitate pentru a se integra cu API-urile Pusher folosind un instrument unic appId, key și a secret. Mai întâi vom instala fișierul pusher npm modul folosind următoarea comandă:

Acum, putem folosi require pentru a obține modulul Pusher și pentru a crea o nouă instanță trecând un obiect de opțiuni cu chei importante pentru a inițializa integrarea noastră. Pentru acest articol, am pus chei aleatorii. Va trebui să o obțineți pentru aplicația dvs. din tabloul de bord Pusher.

Va trebui să înlocuiți appId, key și a secret cu valori specifice propriei aplicații. După aceasta, vom scrie cod pentru un nou API care va fi folosit pentru a crea un nou comentariu. Acest API va expune ruta /comment cu HTTP POST metoda și va aștepta un obiect pentru comentariu cu proprietățile name, email și comment. Adăugați următorul cod la server.js fișier înainte de app.listen parte.

În codul de mai sus, am extras datele din req.body intr-o newComment obiect și apoi l-a folosit pentru a apela trigger metoda pe Pusher instanță.

Concepte importante Pusher

Canal

În Pusher, avem o grupare conceptuală numită „canale” și oferă modalitatea de bază de filtrare a datelor în Pusher. Un canal poate reprezenta multe entități într-o aplicație din lumea reală. De exemplu: în aplicația noastră de comentarii, un canal poate fi comentarii pentru un anumit articol, videoclip, postare pe blog, fotografie sau streaming live al unui eveniment.

Am crea un nou ID de canal unic pentru fiecare dintre aceste entități pentru a identifica sau grupa în mod unic datele, cum ar fi comentariile asociate cu oricare dintre acestea. Două videoclipuri unice în flux live ar trebui să aibă, de asemenea, canale separate, astfel încât să putem afișa fluxul de comentarii live respective pe paginile lor respective.

Deci, vom crea un nou canal unic pentru fiecare entitate cu ID-ul unic. De exemplu, un canal de comentarii video YouTube poate fi numit comments-youtube-234.

Există trei tipuri de canale

  • Canal public – poate fi abonat de oricine știe numele canalului.
  • Canal privat – canal care poate fi abonat numai de către utilizatorii autorizați. Dacă numele canalului are un private- prefix, va fi considerat un canal privat.
  • Canal de prezență – acesta este un tip de canal special asemănător cu cel privat, deoarece numai utilizatorii autorizați se pot abona, unde lista abonaților este, de asemenea, menținută și notificată și altor utilizatori. Numele canalului ar trebui să aibă un prefix presence-

Vom folosi un canal public în postarea noastră de pe blog, pe care îl numim comentarii flash dar în mod ideal ar trebui să utilizați un canal privat pentru sisteme de comentarii cu nume unic pentru fiecare entitate pe care doriți să o activați.

Eveniment

Acum, datele reale din împingător sunt transmise prin evenimente, care este modul principal de ambalare a mesajelor. Un eveniment poate fi declanșat de un back-end sau chiar de un client în cazuri speciale pentru un anumit canal. Este necesar un canal pentru a vă asigura că mesajul dvs. ajunge la destinatarul dorit.

Oferim un nume unic fiecărui eveniment, astfel încât să putem configura gestionare pentru primirea și procesarea acestor mesaje de eveniment la fiecare dintre clienții noștri care s-au abonat la orice canal.

Metoda Pusher Trigger

Acum vom înțelege codul nostru de server pentru trimiterea unui eveniment pe canalul împingător flash-comments.

Folosim .trigger(channel-name,event-name, payload)pentru a trimite un eveniment de pe server ori de câte ori POST API este solicitat pentru crearea unui nou comentariu. Pentru simplitatea acestui articol, nu vom folosi nicio bază de date pentru a salva și persista comentariile, ci într-un sistem de producție. Vi se va solicita să stocați un comentariu corespunzător unui cod unic de entitate, cum ar fi un ID video YouTube sau un ID postare pe blog.

Acum, putem rula serverul nostru folosind node server comanda. Serviciul nostru web va fi accesibil pe adresa URL http://localhost:9000/comment.Putem scrie un POST solicitați utilizarea oricărei extensii cromate, cum ar fi Poştaş sau chiar răsuci pentru a testa dacă se întoarce { "created":"true" } .

Comanda curl pentru a vă testa POST API va fi după cum urmează:

Front-End folosind Vanilla JavaScript

Acum, vom scrie cea mai importantă parte, codul front-end folosind Vanilla JavaScript. În codul front-end vom dezvolta o secțiune de casetă de comentarii care va avea următoarele două caracteristici:

  • Afişa toate comentariile live adăugate canalului cu o animație lină
  • Adăuga nou comentariu la comentariile live apăsând pe POST API pe care tocmai l-am creat

Pasul 1: Creați un folder numit public și creați un fișier index.html

Am scris deja cod în server.js pentru a servi conținut static de la public folder, așa că vom scrie tot codul nostru front-end în acest folder.

Vă rugăm să creați un folder nou public și, de asemenea, creați un gol index.html fișier pentru moment.

Pasul 2: Adăugați codul Boilerplate în index.html

Vom adăuga câteva coduri de bază pentru a configura structura de bază pentru aplicația noastră web, cum ar fi Header, și Sections unde pot fi plasate conținut, cum ar fi videoclip sau postare pe blog, precum și secțiunea care va conține Flash Comments cutie.

Pasul 3: Creați fișierul style.css

Acum vom crea și un style.css fișier pentru a conține codul CSS important pentru stilizarea aplicației noastre web și a fișierului flash comments componentă. Vom adăuga stiluri de bază pentru a ne reda scheletul.

Pasul 4: Adăugați biblioteca pusher.js și creați app.js

Acum vom adăuga biblioteca pusher.js disponibilă pe CDN-ul său pentru ao utiliza pentru a se integra cu sistemul Pusher folosind cod JavaScript simplu. Vă rugăm să adăugați următoarea etichetă de script la capătul corpului înainte de eticheta de închidere:

De asemenea, creați un nou app.js fișier în care vom scrie tot codul nostru și, de asemenea, vom importa același lucru în index.html fișier după eticheta scriptului de importat pusher.js fişier.

În dosarul nostru app.js acum, vom scrie cod pentru a inițializa instanța Pusher folosind cheia API unică a clientului pe care am obținut-o din tabloul de bord Pusher. De asemenea, vom trece un obiect care specifică clusterul și setează steagul criptat la true, astfel încât toate mesajele și comunicațiile să fie criptate. Vom folosi, de asemenea, pusher.subscribe('channel-name') pentru a asculta toate evenimentele pentru un anumit canal.

Vom crea un JavaScript IIFE (Funcții care invocă imediat) pentru a crea un domeniu privat, astfel încât să nu poluăm domeniul global. Vă rugăm să adăugați următorul cod la app.js fişier:

Pasul 5: Crearea formularului pentru adăugarea unui comentariu nou

Acum, vom crea comenzile de formular pentru a permite utilizatorului să introducă numele, e-mailul și textul comentariului pentru a crea un comentariu nou folosind API-ul Node.js și Pusher. Vom adăuga următorul cod HTML în eticheta formularului existent pentru a crea formularul:

În codul formularului de mai sus, am folosit validări HTML5 precum required și type=email care nu ar permite utilizatorului să păstreze aceste câmpuri necompletate sau să trimită un e-mail nevalid. Aceste validări vor funcționa automat în majoritatea browserelor care acceptă validări de formulare HTML5.

De asemenea, vom adăuga următoarele CSS pentru a stiliza formularul:

După construirea formei vizuale, acum trebuie să atașăm un handler de evenimente la Submit eveniment al formularului. Vom face acest lucru folosind următorul cod din app.js fișier, probabil în partea de sus după var declarații:

Acum, vom scrie codul pentru implementarea handler-ului addNewComment cu următorul cod:

Folosim cererea XHR nativă pentru a efectua o cerere AJAX către API-ul Node. Puteți utiliza jQuery AJAX sau orice cadru specific ajax în aplicația dvs. Acum, dacă ne lansăm cererea, apoi completăm formularul și îl trimitem, vom vedea un Success: { created: true }mesaj în consola noastră de instrumente pentru dezvoltatori de browser.

De asemenea, putem vedea Pusher Dashboard pentru a vedea statisticile despre mesajele de eveniment trimise pentru orice canal.

1611328155 103 Cum sa creati o caracteristica Live Comment folosind JavaScript si

Pasul 6: Afișați lista de comentarii primite pentru acest canal

Acum, ne vom lega de new_comment eveniment pe acest canal flash-comments astfel încât să putem primi orice mesaj despre crearea de noi comentarii făcute de la orice client în timp real și să putem afișa toate aceste comentarii.

Mai întâi vom adăuga un șablon pentru un nou comentariu în index.html fișier în interiorul etichetei div cu id="comments-list".

Acum, vom scrie codul JavaScript pentru a lega evenimentul new_comment de pe instanța canalului de împingere la care am fost abonat. Ori de câte ori new_comment evenimentul va fi declanșat, vom prelua șablonul de conținut innerHTML și vom înlocui substituenții {{name}}, {{email}} & {{comment}}cu datele transmise împreună cu evenimentul și adăugați-le la comments-list div element.

Folosind codul de mai sus, o nouă etichetă div care reprezintă noul comentariu va fi creată automat și adăugată la comments-list container.

Acum vom adăuga următorul CSS pentru a afișa frumos lista de comentarii și, de asemenea, pentru a anima când apare un nou comentariu pe listă:

Acum, puteți rula aplicația pe care am creat-o, fie în două browsere diferite, fie unul în browserul normal și celălalt în fereastra incognito, și adăugați mai multe comentarii. Putem vedea că comentariile live vor fi adăugate în timp real cu o animație lină.

1611328156 266 Cum sa creati o caracteristica Live Comment folosind JavaScript si

Codul complet pentru acest tutorial este disponibil pe GitHub.

Concluzie

Am creat o aplicație web drăguță cu funcție de comentarii live folosind Pusher, Node.js și Vanilla JavaScript. Putem utiliza această componentă cu oricare dintre aplicațiile noastre și putem activa comentarii live pentru o varietate de entități sociale, cum ar fi videoclipuri, postări pe blog, sondaje, articole și fluxuri live.

Am folosit serverul Node.js pentru a crea un API REST pentru a obține un nou comentariu și apoi pentru a declanșa un eveniment Pusher pe un anumit canal. Pentru orice aplicație din lumea reală, putem lua un ID unic pentru fiecare entitate și putem folosi un nume de canal unic pentru orice entitate. Într-un scenariu de producție putem, de asemenea, să stocăm comentariile într-un spațiu de stocare persistent și apoi să le preluăm ulterior.

De asemenea, am creat o aplicație Front-End, care se va conecta la API-ul Pusher utilizând biblioteca pusher.js. Am creat un formular pentru a accesa Node API care va declanșa new_comment eveniment. Comentariile sunt afișate în timp real cu o animație folosind metoda bind pe instanța canalului.

Acest articol a fost publicat inițial la Blogul lui Pusher.