5 måder at oprette apps i realtid med JavaScript

Der var et tidspunkt, hvor vi ikke forventede for meget fra websider. Hvilket minder mig, Space Jam-filmwebstedet er stadig på internettet i sin oprindelige form. Og det bruger et rammesæt. Ikke iFrames. RAMMER .

Space Jam

RUMSTOP, tegn, navne og alle relaterede tegn er varemærker tilhørende Warner Bros. © 1996 www.warnerbros.com

Warner Bros har nogle forsigtigt brugte kopier af Dreamweaver MX.

Det var 1996. Dette er 2019. Tiderne har ændret sig, og brugerne forventer meget mere ud af websteder. De forventer ikke bare, at de ser godt ud, de forventer, at de er fulde af apps, og det inkluderer også at være i realtid.

Realtidsapplikationer

Realtidsapps er dem, der reagerer på ændringer overalt i et tilsluttet applikations system - ikke kun dem, der er foretaget af den nuværende bruger.

Det kanoniske eksempel på realtid er en messaging-applikation. Ligesom når du sender en gruppe venner en sms om at mødes om vinger på fredag. Opdater derefter alle minut for minut om dine fremskridt med at komme fra arbejde til baren. Tak, Trevor. Nu er vi alle fanget i et helvede med underretning, som vi ikke tilmeldte os. Jeg ville bare have nogle vinger.

Når det kommer til internettet, er der flere forskellige mønstre, teknologier, biblioteker og tjenester, som du kan bruge til at få den realtidsfunktionalitet, der normalt er forbeholdt indfødte applikationer. Jeg satte mig for nylig sammen med Anthony Chu, der gav mig 5 måder, hvorpå du kan oprette realtidsapps i JavaScript.

Anthony Chu #MSIgniteTheTour (@nthonyChu) | Twitter

De seneste tweets fra Anthony Chu #MSIgniteTheTour (@nthonyChu). Cloud Advocate @ Microsoft. Azure, ASP .NET, Node.js… twitter.com

1. Lang polling

Dette er når applikationen anmoder om opdateringer fra serveren efter en tidsplan. Appen “polling” serveren.

Dette er nettokvivalenten for børn, der spørger "er vi der endnu?" hvert femte minut. Ser det ud til, at vi er der endnu, barn? Spørg mig endnu en gang, og jeg sværger dig, at jeg vil smide denne kopi af "The Bee Movie" i en grøft, og du kan stirre ud af vinduet på græs, som vi gjorde, da jeg var barn.

Long-polling kan implementeres manuelt med ethvert JavaScript HTTP-bibliotek, såsom jQuery eller Axios. Jeg har faktisk aldrig implementeret dette selv. Når jeg undersøgte denne artikel, opdagede jeg, at den bedste måde at gøre dette på er at bruge en rekursiv funktion med setTimeout. Dette skyldes, at brug setIntervalikke tager højde for anmodninger, der mislykkes eller timeout. Du kan ende med en masse ajax-opkald, der alle behandles ude af drift.

Her er et eksempel fra den meget flinke artikel om Tech Octave.

(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); })();

Der er også biblioteker som pollymer (ikke at forveksle med polymer), der er specifikt til lang afstemning. Få det? “Afstemning” ymer? Forårsager det afstemninger? Er denne ting tændt?

fanout / pollymer

Generelt AJAX / lang-polling bibliotek. Bidrag til udvikling af fanout / pollymer ved at oprette en konto på GitHub. github.com

Lang afstemning er god, fordi den fungerer i enhver browser; selv de super gamle. Det er dårligt, fordi det er super ineffektivt og ikke ligefrem "realtid". Det har også nogle underlige kanttilfælde (som anmodningsfejl), som du skal programmere, som vi allerede har set med setInterval.

Et bedre alternativ til lang afstemning er Server-Sent Events eller SSE.

2. Server-sendte begivenheder

Server-Sent Events (SSE) svarer til lang afstemning i så meget som klienten beder serveren om information. Den store forskel er, at med SSE holder serveren bare forbindelsen åben. Når en begivenhed opstår, og der er oplysninger, der skal sendes til klienten, sender serveren en begivenhed til klienten.

Server-sendte begivenheder

Traditionelt skal en webside sende en anmodning til serveren om at modtage nye data; det vil sige, siden beder om data fra ... developer.mozilla.org

Tilbage til vores "road trip from hell" -analogi, ville det være som hvis barnet siger "Er vi der endnu?" Og derefter ventede tålmodigt på dit svar. Fire sublime timers stilhed senere ankommer du til destinationen, vender dig om og siger "ja". Det er det mest urealistiske scenario, jeg nogensinde har fundet frem til i mit liv.

SSE er en del af browserens EventSourceAPI. Bemærk, at ifølge caniuse.com understøtter hverken IE 11 eller Edge SSE. Det gør det til en slags hård teknologi at vælge, uanset hvor interessant det er.

Den gode nyhed er, at stort set enhver browser understøtter Web Sockets.

3. Web-stik

Web Sockets er en teknologi, der letter en ægte tovejskommunikationskanal mellem en klient og en server. I modsætning til server-sendte begivenheder, som kun er kommunikation fra server til en klient, kan Web Sockets bruges til at kommunikere i begge retninger.

Webstikkontakter er, øh, lidt detaljerede. De er ikke rigtig den slags API'er, du vil oprette apps med. Som om du kunne lave en HTTP-anmodning med XHR-objektet, men OMG NO. Jeg googlede “PHP Web Socket Sample” og fandt dette doozy fra PHP-dokumenterne. Jeg zoomet helt ud i Chrome og fik næsten ikke alt i et enkelt skærmbillede.

Og det er KUN serverdelen. Du skal stadig oprette forbindelse til browseren.

Så .... det er et nej for mig.

Heldigvis er der masser af biblioteker, der abstraherer Web Sockets yderligere, så du ikke behøver at skrive noget af dette. Et af disse biblioteker kaldes “SignalR”.

4. SignalR

SignalR er et bibliotek, der implementerer websockets både i JavaScript OG .NET. På serveren opretter du det, der kaldes et “hub” i SignalR. Denne hub sender og modtager meddelelser fra klienter.

Kunder opretter derefter forbindelse til hubben (ved hjælp af SignalR JavaScript-biblioteket) og svarer på begivenheder fra hubben eller sender deres egne begivenheder til hubben.

SignalR falder også tilbage til lang afstemning, når Web Sockets ikke er tilgængelige. Selvom det ikke er super sandsynligt, medmindre du bruger IE 9 eller lavere.

Her er et eksempel på opsætning af SignalR på serveren ...

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); } } }

Okay okay. Jeg ved, at dette ikke er en sammenligning af æbler til æbler med PHP-eksemplet ovenfra, men jeg prøver at gøre et punkt her. Bare lad det ske. Gør det for mig. Jeg har en hård morgen.

Så SignalR gør det sjovere at programmere Web Sockets, men ved du, hvad der er endnu sjovere end at programmere dem? Programmerer dem ikke.

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….

Tjek interviewet nedenfor med Anthony. Vi skød denne i Vegas, mens vi begge var på en konference og havde det godt med en paryk, som jeg købte hos Party City. Bedste 8 $ jeg nogensinde har brugt.