Kā izveidot reāllaika grafiku, izmantojot JavaScript un Pusher

Pasaulei tagad viss ir vajadzīgs ļoti ātri. Katru dienu dažādas sistēmas ģenerē daudz datu plūsmu. Viņi kalpo lēmumu pieņemšanai daudzās nozarēs. Reālā laika monitorings un analīze šodien ir kļuvuši ļoti svarīgi. Datu straumēs ietilpst vietnes trafika, servera veiktspējas, laika apstākļu atjauninājumu un IOT sensoru reāllaika uzraudzība. Ir svarīgi analizēt un interpretēt šo datu pārrāvumu, kuram lielisks risinājums ir interaktīvās diagrammas un grafiki.

Šajā rakstā mēs veidosim Node.js serveri, lai parādītu API, lai sniegtu metrikas vēsturiskos datus (šajā gadījumā laika apstākļi Londonā). Tas arī nodrošinās API jaunu datu punktu uzņemšanai. Mēs arī izveidosim priekšējās daļas lietotni ar līniju diagrammu, lai reāllaikā parādītu temperatūras izmaiņas Londonas laika apstākļos. Mūsu izveidotā lietojumprogramma izskatīsies apmēram šādi:

Reģistrējieties Pusher

Pirmais solis, lai sāktu šo apmācību, ir reģistrēties vietnē Pusher vai pieteikties, izmantojot esošos akreditācijas datus, ja jums jau ir konts. Pēc pieteikšanās jums būs jāizveido jauna lietotne un jāizvēlas Vanilla JavaScript priekšpusē kopā ar Node.js aizmugurē. Pēc tam jūs tiksiet novirzīts uz galveno lapu, kurā būs gan sākuma, gan aizmugures sākuma kods, kuru mēs vēlāk izmantosim apmācībā.

Node.js servera API uzraudzības un analīzes sistēmai

Būtiskās API jebkurai metrikai vai entītijai ir šādas:

  1. Ieņemšanas API - API, lai uzņemtu jaunus datu punktus jebkurai konkrētai entītijai. Mūsu emuāra ziņu serverī mēs izveidosim API jaunu temperatūras datu uzņemšanai noteiktā Londonas laikā. Šo API var izsaukt jebkura globāla laika apstākļu sistēma vai jebkurš IOT sensors.
  2. Vēsturisko datu API - šī API atgriezīs visus datus diapazonā no šī datuma. Mūsu serverim mēs izveidosim vienkāršu API. Tas atgriezīs dažus statiskos vēsturiskos datus ar ierobežotiem datu punktiem par Londonas temperatūras vērtībām par katru dienu.

Node.js Express servera skelets

Mēs izveidosim pamata Express serveri kopā ar bibliotēkas Pusher servera instances piemēru. Mēs izveidosim jaunu mapi savam projektam un izveidosim jaunu failu server.js . Pievienojiet šim failam šādu kodu:

API, lai iegūtu vēsturiskos temperatūras datus

Tagad mēs pievienosim dažus statiskus datus par Londonas temperatūru noteiktā laikā dienas laikā un saglabāsim to jebkurā JavaScript mainīgajā. Mēs arī atklāsim maršrutu, lai atgrieztu šos datus ikreiz, kad kāds tos izsauc, izmantojot GET HTTP zvanu.

API norīt temperatūras datu punktu

Tagad mēs pievienosim API ekspozīcijas kodu temperatūras uzņemšanai noteiktā laikā. Mēs atklāsim GET HTTP API ar temperatūru un laiku kā vaicājuma parametrus. Mēs apstiprināsim, ka tie nav tukši parametri. Mēs tos glabājam, iespiežot mūsu statiskā JavaScript mainīgā londonTempData masīvu dataPoints . Lūdzu, pievienojiet šo kodu server.js failam

Iepriekš minētajā kodā, izņemot glabāšanu datu avotā, mēs arī izraisīsim notikumu “jauna temperatūra” jaunā kanālā “london-temp-chart” . Katram unikālam datu avotam vai diagrammai varat izveidot jaunu kanālu.

Mūsu servera aktivizēto notikumu apstrādās priekšgals, lai reāllaikā atjauninātu diagrammu / diagrammu. Pasākums var saturēt visus svarīgos datus, kas diagrammā nepieciešami, lai pareizi parādītu datu punktu. Mūsu gadījumā mēs temperatūru jaunajā laikā nosūtīsim uz mūsu priekšpusi.

Front-End lietotnes izveide, izmantojot Vanilla JavaScript un Chart.js

Tagad mēs izveidosim priekšgala lietojumprogrammu. Tajā tiks parādīta līniju diagramma, kas atspoguļo temperatūras izmaiņas London City dažādos laika posmos visas dienas garumā. Galvenā pieeja reāllaika diagrammu attēlošanai ir šāda:

  1. Mums ir jāveic sākotnējais Ajax izsaukums, lai ielādētu vēsturiskos datus un renderētu diagrammu ar esošajiem datiem.
  2. Mēs abonēsim visus notikumus jauniem datu punktiem, kas tiek glabāti noteiktā kanālā.

HTML HTML veidne

Mēs projekta saknē izveidosim jaunu mapi ar nosaukumu public un pēc tam šajā mapē izveidosim jaunu failu index.html . Šis fails satur pamata HTML kodu, lai renderētu vienkāršu galveni un apakšvirsrakstu ar lietotnes nosaukumu kopā ar dažām ikonām. Mēs importēsim arī Pusher JavaScript bibliotēku no tās CDN URL.

Diagrammu bibliotēkas pievienošana

JavaScript un HTML lietotnēs mums ir jāizmanto vai nu SVG, vai Canvas, lai izveidotu grafiskus komponentus matemātisko grafiku attēlošanai. Ir daudzas atvērtā pirmkoda bibliotēkas, kas var palīdzēt atveidot dažādus diagrammu veidus. Tie ietver joslu diagrammas, pīrāgu diagrammas, līniju diagrammas un izkliedes diagrammas.

Savam projektam mēs izvēlēsimies Chart.js, jo tam ir diezgan vienkārša API un tā nodrošina stabilas diagrammas, izmantojot Canvas HTML tagu. Jūs varat izvēlēties jebkuru diagrammu bibliotēku, taču paturiet prātā, ka bibliotēkai ir jābūt līdzekļiem, lai atjauninātu diagrammu, to pilnībā neatveidojot. Chart.js nodrošina metodi jebkurā atjaunotajā diagrammā, lai to atjauninātu.

Pievienojiet šo kodu savam index.html failam atbilstošās vietās

JavaScript faila pievienošana un klienta puses bibliotēkas tūlītēja iniciēšana

Tagad mēs izveidosim jaunu failu app.js mūsu publiskajā mapē un pievienosim arī šo kodu, lai paātrinātu Pusher klienta bibliotēku.

Iepriekš minētajā kodā mēs esam pievienojuši arī dažas lietderības metodes, lai veiktu Ajax zvanu, kā arī parādītu vai paslēptu elementus no DOM API.

Pievienojot kodu, lai iegūtu vēsturiskos datus

Tagad mēs pievienosim kodu, lai ielādētu vēsturiskos temperatūras datus, lai parādītu diagrammu ar sākotnējām vērtībām. Mēs arī izveidosim jaunu diagrammas objektu ar īpašu konfigurāciju, lai renderētu līniju diagrammu. Plašāku informāciju par šo konfigurāciju izveidi varat uzzināt Chart.js dokumentācijā.

Lūdzu, failā app.js pievienojiet šo kodu:

Iepriekš minētajā kodā mēs esam pievienojuši funkciju ar nosaukumu renderWeatherChart. To izmantos diagrammas renderēšanai, izmantojot jaunākos datus, kas ir iestrādāti mainīgajā chartConfig zem atslēgas datu kopām . Ja mēs vēlamies uz vienas audekla uzzīmēt vairākas līniju diagrammas, mēs šim masīvam varam pievienot vairāk elementu.

Datu Galvenais katrā no elementiem masīva parādīs dažādas diagrammas punktus. Mēs veiksim ajax pieprasījumu / getTemperature api, lai ielādētu visus datu punktus un ievietotu tos šajā atslēgā. Tad mēs izsauksim renderēšanas metodi, lai parādītu diagrammu. Tagad mēs varam palaist komandu node server.jsun pēc tam doties uz pārlūkprogrammu ar šādu URL, lai redzētu sākotnējo diagrammu, kas atveidota, izmantojot datus.

//localhost:9000/

Lai pareizi veidotu mūsu lietotni, lūdzu, pievienojiet šo CSS jaunā failā style.css, kas atrodas publiskajā mapē. Pievienojiet šim failam šādu kodu:

Kods, lai atjauninātu diagrammu par saņemto jauno notikumu

Tagad mēs vēlamies abonēt unikālo kanālu, kurā mūsu serveris sūtīs šīs diagrammas atjaunināšanas pasākumus. Mūsu projektam kanālam tiek dots nosaukums london-temp-chart un notikumam nosaukums new-temperature . Lūdzu, pievienojiet šo kodu, lai apstrādātu notikumu, un pēc tam atjauniniet diagrammu reāllaikā:

Lai redzētu šo kodu darbībā, jums ir jāatsvaidzina pārlūkprogramma, un jūs redzēsiet sākotnējo diagrammu. Tagad mums ir jāuzņem jauns datu punkts. Jums vajadzēs izsaukt šo API vai nu, izmantojot kādu izspēles API izsaukšanas rīku, vai arī izmantojot šo URL pārlūkprogrammā ar dažādām vērtībām.

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

Lai pārbaudītu diagrammas atjaunināšanas kodu, savā app.js failā varat izmantot šo pagaidu kodu . Pēc noteiktā laika intervāla tas veiks viltus Ajax pieprasījumus uz iepriekš minēto URL.

Šeit ir GitHub repo atsaucei uz pilnu kodu.

Secinājums

Visbeidzot, mūsu reāllaika analīzes lietotne ir gatava. Mēs redzēsim, kā reāllaikā Londonas pilsētas laika temperatūras diagramma atjaunojas.

Šī emuāra ziņojuma kodu mēs varam izmantot jebkurai diagrammu bibliotēkai. Tas var arī atveidot jebkura veida diagrammas, piemēram, joslu diagrammu, izkliedes diagrammu vai sektoru diagrammu, lai atjauninātu reāllaikā.

Šo kodu var izmantot arī vairākās Enterprise Apps. Piemēram, informācijas paneļu, analīzes pārskatu, sensoru regulēšanas lietotņu un finanšu lietotņu uzraudzība. Bibliotēka Pusher palīdz mums nosūtīt reāllaika notikumus uz visām pievienotajām klienta puses lietotnēm. Šīs lietotnes var patērēt datus, lai reāllaikā atjauninātu diagrammas.

Šis raksts sākotnēji tika publicēts Pusher emuārā.