de Rahat Khanna

Cum se construiește un grafic în timp real folosind JavaScript și Pusher

Lumea are nevoie acum de totul uber-rapid. Există o mulțime de fluxuri de date generate de diferite sisteme în fiecare zi. Acestea servesc la luarea deciziilor în multe industrii. Monitorizarea și analiza în timp real au devenit foarte importante astăzi. Fluxurile de date includ monitorizarea în timp real a traficului site-ului web, performanța serverului, actualizările meteo și senzorii IOT. Este important să analizăm și să interpretăm această explozie de date, pentru care diagrame și grafice interactive reprezintă o soluție excelentă.

În acest articol, vom construi un server Node.js pentru a expune API-urile pentru a furniza date istorice pentru o valoare (în acest caz, vremea din Londra). De asemenea, va oferi un API pentru a ingera noi puncte de date. De asemenea, vom construi o aplicație front-end cu o diagramă liniară pentru a afișa schimbările de temperatură în vremea din Londra în timp real. Aplicația pe care o construim va arăta cam așa:

Înscrieți-vă pentru Pusher

Primul pas pentru a începe acest tutorial este să Înscrieți-vă la Pusher sau conectați-vă cu acreditările dvs. existente dacă aveți deja un cont. După conectare, va trebui să creați o aplicație nouă și să selectați Vanilla JavaScript pentru front-end împreună cu Node.js pentru back-end. Veți fi apoi adus la o pagină de destinație care conține codul „de început” atât pentru front-end cât și pentru back-end, pe care îl vom folosi mai târziu în tutorial.

API-uri de server Node.js pentru monitorizare și sistem de analiză

API-urile esențiale pentru orice sistem de analiză pentru orice valoare sau entitate sunt:

1. API de ingestie – Un API pentru a ingera noi puncte de date pentru orice entitate anume. În serverul nostru pentru această postare pe blog, vom crea un API pentru a ingera noi date de temperatură la un anumit moment pentru Londra. Acest API poate fi apelat de orice sistem meteorologic global sau de orice senzor IOT.
2. API de date istorice – Acest API va returna toate datele într-un interval de la această dată în timp. Pentru serverul nostru, vom crea un API simplu. Va returna câteva date istorice statice cu puncte de date limitate pentru valorile temperaturii din Londra pentru orice zi.

Scheletul serverului Node.js Express

Vom crea un Express Server de bază împreună cu instanțierea instanței serverului de bibliotecă Pusher. Vom crea un folder nou pentru proiectul nostru și vom crea un fișier nou server.js. Adăugați următorul cod în acest fișier:

API pentru a obține date istorice de temperatură

Acum, vom adăuga câteva date statice referitoare la temperatura Londrei la anumite ore din timpul unei zile și le vom stoca în orice variabilă JavaScript. De asemenea, vom expune o rută pentru a returna aceste date ori de câte ori cineva le invocă folosind un apel HTTP GET.

API pentru a ingera punctul de date de temperatură

Acum vom adăuga codul pentru expunerea unui API pentru a ingera temperatura la un anumit moment. Vom expune un API GET HTTP cu temperatura și timpul ca parametri de interogare. Vom valida că nu sunt parametri goi. Le depozităm împingând în dataPoints matricea variabilei noastre JavaScript statice londonTempData. Vă rugăm să adăugați următorul cod la server.js fişier

În codul de mai sus, în afară de stocarea în sursa de date, vom declanșa și un eveniment „temperatura nouă” pe un nou canal „london-temp-chart”. Pentru fiecare sursă de date unică sau un grafic, puteți crea un nou canal.

Evenimentul declanșat de serverul nostru va fi procesat de front-end pentru a actualiza graficul / graficul în timp real. Evenimentul poate conține toate datele importante de care diagrama are nevoie pentru a afișa corect punctul de date. În cazul nostru, vom trimite temperatura la ora nouă la front-end.

Construirea aplicației front-end folosind Vanilla JavaScript și Chart.js

Acum, vom construi aplicația front-end. Se va afișa o diagramă liniară care reprezintă schimbările de temperatură pentru Londra în diferite momente ale zilei. Abordarea cheie pentru afișarea graficelor în timp real este:

1. Trebuie să facem un apel inițial Ajax pentru a prelua date istorice și a reda graficul cu datele existente.
2. Ne vom abona la orice evenimente pentru stocarea de noi puncte de date pe un anumit canal.

Șablon HTML de bază

Vom crea un nou folder numit public în rădăcina proiectului nostru și apoi creați un fișier nou index.html în acest dosar. Acest fișier va conține codul HTML de bază pentru a reda un antet simplu și un sub-antet cu numele aplicației împreună cu câteva pictograme. Vom importa, de asemenea Pusher JavaScript bibliotecă din adresa URL CDN.

Adăugarea bibliotecii de diagrame

În aplicațiile JavaScript și HTML, trebuie să folosim fie SVG, fie Canvas pentru a construi componente grafice pentru a reprezenta grafice matematice. Există numeroase biblioteci open source care vă pot ajuta să redați diferite tipuri de diagrame. Acestea includ diagrame cu bare, diagrame pie, diagrame liniare și diagrame dispersate.

Pentru proiectul nostru, vom alege Chart.js deoarece are un API destul de simplu și redă diagrame solide folosind o etichetă Canvas HTML. Puteți alege orice bibliotecă de diagrame, dar rețineți că biblioteca ar trebui să aibă un mijloc de actualizare a diagramei fără a o reda complet. Chart.js oferă o metodă pentru orice diagramă instanțiată pentru ao actualiza.

Adăugați următorul cod în fișierul index.html în locurile corespunzătoare

Adăugarea fișierului JavaScript și instanțarea bibliotecii din partea clientului Pusher

Acum vom crea un fișier nou app.js în folderul nostru public și adăugați, de asemenea, următorul cod pentru a instanția biblioteca Pusher din partea clientului.

În codul de mai sus, am adăugat, de asemenea, câteva metode de utilitate pentru a efectua un apel Ajax și, de asemenea, pentru a afișa sau ascunde elemente din API-ul DOM.

Adăugarea codului pentru preluarea datelor istorice

Acum, vom adăuga codul pentru a prelua datele istorice ale temperaturii pentru a afișa graficul cu valorile inițiale. De asemenea, vom crea un nou obiect Chart cu o configurație specifică pentru a reda un diagramă liniară. Puteți citi mai multe despre cum să construiți aceste configuri la Documentația Chart.js.

Vă rugăm să adăugați următorul cod în fișierul app.js:

În codul de mai sus, am adăugat o funcție numită renderWeatherChart. Aceasta va fi utilizată pentru a reda graficul utilizând cele mai recente date care sunt încorporate în chartConfig variabilă sub cheie seturi de date. Dacă dorim să desenăm mai multe diagrame pe aceeași pânză, putem adăuga mai multe elemente la această matrice.

date tasta din fiecare dintre elementele matricei va afișa diferitele puncte de pe grafic. Vom face o cerere ajax către / getTemperature api pentru a prelua toate punctele de date și a le introduce în această cheie. Vom apela metoda de redare pentru a afișa graficul atunci. Acum putem rula comanda node server.js și apoi accesați browserul cu următoarea adresă URL pentru a vedea graficul inițial redat folosind datele.

http://localhost:9000/

Pentru a ne stiliza corect aplicația, adăugați următorul CSS într-un nou fișier style.css din folderul public. Adăugați următorul cod în fișierul respectiv:

Cod pentru a actualiza graficul pentru noul eveniment primit

Acum vrem să ne abonăm la canalul unic pe care serverul nostru va trimite evenimente de actualizare pentru acest grafic. Pentru proiectul nostru, canalul este numit londra-temp-grafic iar evenimentul este numit nou-temperatură. Vă rugăm să adăugați următorul cod pentru a procesa evenimentul și apoi actualizați graficul în timp real:

Pentru a vedea acest cod în acțiune, trebuie să reîmprospătați browserul și veți vedea graficul inițial. Acum trebuie să ingerăm un nou punct de date. Trebuie să apelați următorul API fie utilizând un instrument de apelare API simulat, fie utilizând următoarea adresă URL cu valori diferite în browser.

http://localhost:9000/addTemperature?temperature=17&time=1500

Pentru a testa codul de actualizare a graficului, puteți utiliza următorul cod temporar în app.js fişier. Va face solicitări Ajax fictive către adresa URL de mai sus, după un anumit interval de timp.

Aici este GitHub repo pentru referință la codul complet.

Concluzie

În cele din urmă, aplicația noastră de analiză în timp real este gata. Vom vedea graficul temperaturii vremii pentru orașul Londra actualizându-se în timp real.

Putem folosi codul din această postare de blog pentru orice bibliotecă de diagrame. De asemenea, poate reda orice tip de diagramă, cum ar fi Diagrama cu bare, Diagrama cu dispersie sau Diagrama circulară, pentru a fi actualizate în timp real.

Acest cod poate fi utilizat și în mai multe aplicații Enterprise. De exemplu, monitorizarea tablourilor de bord, rapoarte de analiză, aplicații de reglementare a senzorilor și aplicații financiare. Biblioteca Pusher ne ajută să trimitem evenimente în timp real către toate aplicațiile conectate din partea clientului. Aceste aplicații pot consuma datele pentru a actualiza graficele în timp real.

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