5 viisi reaalajas rakenduste loomiseks JavaScripti abil

Oli ajahetk, kus me ei oodanud veebilehtedelt liiga palju. Mis mulle meelde tuletab, on film Space Space Jam selle algsel kujul endiselt Internetis. Ja see kasutab raamistikku. Mitte iFrames. RAAMID .

Space Jam

SPACE JAM, tähemärgid, nimed ja kõik seonduvad tähised on Warner Brosi kaubamärgid. © 1996 www.warnerbros.com

Warner Brosil on Dreamweaver MX-i mõned õrnalt kasutatud koopiad.

See oli 1996. See on 2019. Ajad on muutunud ja kasutajad ootavad veebisaitidelt palju enamat. Nad ei oota, et nad näeksid hea välja, vaid ootavad, et neid oleks rakendusi täis, ja see hõlmab ka reaalajas olemist.

Reaalajas rakendused

Reaalajas rakendused on need, mis reageerivad muudatustele ühendatud rakenduse süsteemis kõikjal - mitte ainult praeguse kasutaja tehtud rakendused.

Reaalaja kanooniline näide on sõnumside rakendus. Nagu siis, kui saadate sõprade rühmale reedel tiibadeks saamise kohta tekstisõnumi. Seejärel värskendage kõiki minutite kaupa oma edusammude eest, mis on teil töölt baari jõudmine. Aitäh, Trevor. Nüüd oleme kõik lõksus teatepõrgus, kuhu me ei registreerunud. TAHTSIN LIHTSALT MÕNI tiiba.

Veebi osas on mitu erinevat mustrit, tehnoloogiat, teeki ja teenust, mida saate kasutada reaalajas funktsionaalsuse saamiseks, mis on tavaliselt reserveeritud kohalikele rakendustele. Istusin hiljuti koos Anthony Chu'ga, kes andis mulle viis viisi, kuidas saate JavaScripti abil reaalajas rakendusi ehitada.

Anthony Chu #MSIgniteTheTour (@nthonyChu) | Twitter

Uusimad säutsud Anthony Chult #MSIgniteTheTour (@nthonyChu). Pilvekaitsja @Microsoft. Azure, ASP .NET, Node.js ... twitter.com

1. Pikk küsitlus

See on siis, kui rakendus nõuab serverilt ajakava järgi värskendusi. Rakendus küsitleb serverit.

See on netoekvivalent lastelt, kes küsivad: "kas me oleme juba seal?" iga viie minuti tagant. Kas tundub, et me oleme juba seal, laps? Küsige minult veel üks kord ja ma vannun teile, et viskan selle “Mesilase filmi” koopia kraavi ja te saate aknast välja heita rohtu, nagu me tegime lapsena.

Pikka küsitlust saab käsitsi rakendada mis tahes JavaScripti HTTP-teegiga, näiteks jQuery või Axios. Ma pole seda ise kunagi reaalselt rakendanud. Selle artikli jaoks veidi uurides avastasin, et parim viis selleks on kasutada rekursiivset funktsiooni setTimeout. Selle põhjuseks on asjaolu, et kasutamine setIntervalei arvesta nurjunud taotlusi ega ajalõppu. Võiksite saada hulga ajax-kõnesid, mis kõik töödeldakse korrast ära.

Siin on näide väga toredast artiklist Tech Octave kohta.

(function poll(){ setTimeout(function(){ $.ajax({ url: "server", success: function(data){ //Update your dashboard gauge salesGauge.setValue(data.value); //Setup the next poll recursively poll(); }, dataType: "json"}); }, 30000); })();

On ka selliseid raamatukogusid nagu pollymer (mitte segi ajada Polymeriga), mis on mõeldud spetsiaalselt pika küsitluse jaoks. Saate aru? “Küsitlus” ymer? Kas see põhjustab küsitlusi? Kas see asi on peal?

fänn / pollymer

Üldotstarbeline AJAX / pika küsitlusega raamatukogu. Aidake kaasa fännide / pollymerite arendamisele, luues GitHubis konto. github.com

Pikk küsitlus on hea, kuna see töötab igas brauseris; isegi ülivanad. See on halb, sest see on ülitõhus ja pole päris reaalajas. Sellel on ka mõned imelikud servajuhtumid (näiteks taotluste ebaõnnestumised), mille peate programmeerima, nagu oleme juba näinud setInterval.

Pika küsitluse parem alternatiiv on serveriga saadetud sündmused või SSE.

2. Serverist saadetud sündmused

Serverist saadetud sündmused (SSE) sarnanevad pika küsitlusega sedavõrd, kuivõrd klient küsib serverilt teavet. Suur erinevus on see, et SSE-ga hoiab server lihtsalt ühendust lahti. Kui toimub sündmus ja on teavet, mida kliendile saata, saadab server kliendile sündmuse.

Serveri saadetud sündmused

Traditsiooniliselt peab veebileht saatma serverile taotluse uute andmete saamiseks; see tähendab, et leht nõuab andmeid saidilt… developer.mozilla.org

Tagasi meie analoogia "road trip from hell" juurde, see oleks nagu siis, kui laps ütleb "Kas me oleme juba seal?" Ja ootaks siis kannatlikult teie vastust. Neli ülevat tundi vaikust jõuate hiljem sihtkohta, pöörate ümber ja ütlete „jah”. See on kõige ebareaalsem stsenaarium, mille olen oma elus välja mõelnud.

SSE on osa brauseri EventSourceAPI-st. Pange tähele, et saidi caniuse.com andmetel ei toeta IE 11 ega Edge SSE-d. See teeb valimise omamoodi karmiks tehnoloogiaks, olgu see nii huvitav kui tahes.

Hea uudis on see, et peaaegu iga brauser toetab veebipesasid.

3. Veebipesad

Veebipesad on tehnoloogia, mis hõlbustab kliendi ja serveri vahelist tõelist kahesuunalist suhtluskanalit. Erinevalt serverist saadetud sündmustest, mis on suhtlus ainult serverist kliendini, saab veebipesasid kasutada mõlemas suunas suhtlemiseks.

Veebipesad on uhke sõnad. Need pole tegelikult sellised API-d, millega soovite rakendusi ehitada. Selline nagu sa võiksid teha HTTP taotluse koos XHR objekti, kuid OMG NO. Otsisin Google'ist "PHP Web Socket Sample" ja leidsin, et see on PHP dokumentide hulgast. Suumisin Chrome'is täielikult välja ja sain ühe ekraanipildi abil vaevu kõik kätte.

Ja see on AINULT serveri osa. Peate ikkagi brauseri ühendama.

Nii ... .et on no minu jaoks.

Õnneks on palju raamatukogusid, mis veebipesasid veelgi abstraktsemaks teevad, nii et te ei pea sellest midagi kirjutama. Üks neist raamatukogudest kannab nime “SignalR”.

4. SignaalR

SignalR on teek, mis rakendab veebipesasid nii JavaScripti kui ka .NET-i. Serveris loote SignalR-is nn hubi. See jaotur saadab ja võtab klientidelt vastu teateid.

Seejärel ühendavad kliendid jaoturiga (kasutades SignalR JavaScripti teeki) ja reageerivad jaoturist pärit sündmustele või saadavad oma sündmused jaoturisse.

SignalR langeb tagasi ka pika küsitluse juurde alati, kui veebipesad pole saadaval. Kuigi see pole eriti tõenäoline, kui te ei kasuta IE 9 või vanemat versiooni.

Siin on näide SignalR-i seadistamisest serveris ...

using System; using System.Web; using Microsoft.AspNet.SignalR; namespace SignalRChat { public class ChatHub : Hub { public void Send(string name, string message) { // Call the broadcastMessage method to update clients. Clients.All.broadcastMessage(name, message); } } }

Olgu olgu. Ma tean, et see ei ole õunte ja õunte võrdlus ülaltoodud PHP näitega, kuid ma üritan siin punkti panna. Lihtsalt minge sellega. Tee seda minu heaks. Mul on karm hommik.

Nii et SignalR muudab veebipesade programmeerimise lõbusamaks, kuid teate, mis on veelgi toredam kui nende programmeerimine? Neid ei programmeerita.

5. Azure SignalR

Often, when we want to set up real-time applications, building out a Web Socket server isn’t exactly a value-added activity. We do it, but only because we have to to get the real-time. We’d prefer that it “just worked”.

Azure SignalR is exactly that. It is a SignalR Hub that you can consume on demand as a service. That means that you only have to send and respond to events — which is what you’re after in the first place.

What is Azure SignalR

An overview of the Azure SignalR service.docs.microsoft.com

You create the SignalR Hub in Azure as an Azure Service, and then you just connect to it from the client and send/receive messages.

And now you know….

Vaadake allpool toodud intervjuud Anthonyga. Lasime selle Vegases, olles mõlemad konverentsil ja veetsime mõnusalt parukaga, mille ostsin Party Cityst. Parimad 8 dollarit, mida olen kunagi kulutanud.