Kirjautuminen

Haku

Tehtävät

Keskustelu: Nettisivujen teko: AngularJS ja .NET MVC: Reaaliaikaisen käyrän esittäminen

Palvy [14.07.2015 14:47:15]

#

Olisiko jollain heittää esimerkkiä tai vinkkiä, miten kannattaisi toteuttaa reaaliaikaisen käyrän esittäminen nettisivulla, kun client-puolella käytössä on AngularJS ja server-puolella .NET MVC? Käyrällä esitetään mittausdataa, joka saadaan erillisestä web servicestä.

Ajatuksena on, että web servicestä haetaan muutaman sekunnin välein pätkä dataa, joka bufferoidaan ja esitetään sivulla jatkuvasti päivittyvänä käyränä. Esimerkkinä tästä voisi olla prosessorin käyttöaste -käyrä. Käytännössä käyrän ei tarvitse olla täysin reaaliaikainen, eli muutaman sekunnin viive on ihan ok.

Itse näen tässä pari vaihtoehtoa:

1. Tehdään MVC Web API, joka hakee pätkän dataa web servicestä. Client-puolelta kutsutaan tätä Web API:a, bufferoidaan saatu data javascriptilla ja esitetään esim. flot-kirjastolla (angular-flot). Käyrän piirtäminen flot-kirjastolla on minulle tuttua, mutta kaipaisin vinkkiä miten kannattaisi toteuttaa tuo datan bufferointi ja samanaikainen esitys javascriptilla/AngularJS:llä. Bufferi kannattanee "täyttää" taustalla asynkronisesti? Miten voisin varmistua että bufferissä on aina uutta dataa, eli että se ei pääse tyhjenemään (asynkroninen kutsuhan voi periaatteessa kestää vaikka kuinka kauan). Käyrän päivitys ja Web API:n kutsuminen (=bufferin täyttö) voidaan ajastaa esim. Angularin $interval-palvelua käyttäen. Käyrää olisi hyvä päivittää (=piirtää uudelleen) joitakin kymmeniä kertoja sekunnissa, ja Web API:a voisi kutsua muutaman sekunnin välein.

2. Tehdään näin: http://www.sitepoint.com/build-real-time-signalr-dashboard-angularjs/ Eli tehdään MVC Web API, jossa on SignalR-rajapinta, jota clientit voivat kuunnella.

Kumpaakohan vaihtoehtoa tässä kannattaisi lähteä edistämään, tai tuleeko mieleen muita vaihtoehtoja?

groovyb [31.07.2015 09:23:07]

#

Itse tekisin SignalR:llä.
Toki voit myös tehdä puhtaasti ajaxilla ajastettuna, ja bindata tulokset angular js:llä kaaviosi listaan, ja päivittää kaavion.

Vastaus

Aihe on jo aika vanha, joten et voi enää vastata siihen.

Tietoa sivustosta