5 būdai kurti programas realiuoju laiku naudojant „JavaScript“

Buvo laikas, kai iš tinklalapių per daug nesitikėjome. Tai man primena, kad „Space Jam“ filmo svetainė vis dar yra internete originalia forma. Ir jis naudoja rėmelių rinkinį. Ne „iFrames“. RĖMAI .

„Space Jam“

„SPACE JAM“, simboliai, vardai ir visi susiję ženklai yra „Warner Bros“ prekių ženklai. © 1996 www.warnerbros.com

„Warner Bros“ turi keletą švelniai naudojamų „Dreamweaver MX“ kopijų.

Tai buvo 1996 m. Tai yra 2019 m. Laikai pasikeitė ir vartotojai tikisi daug daugiau iš svetainių. Jie ne tik tikisi, kad jie atrodys gerai, bet ir tikisi, kad jų bus pilna programose, o tai reiškia ir realiuoju laiku.

Programos realiuoju laiku

Realaus laiko programos yra tos, kurios reaguoja į pokyčius bet kurioje prijungtos programos sistemos vietoje - ne tik dabartinio vartotojo sukurtos.

Kanoninis realaus laiko pavyzdys yra susirašinėjimo programa. Panašiai, kaip penktadienį išsiųsdami draugų grupei tekstinį pranešimą apie susirinkimą į sparnus. Tada kiekviena minutė po minutės atnaujinkite savo pažangą iš darbo į juostą. Ačiū, Trevorai. Dabar mes visi esame įstrigę pranešimų pragare, kurio neprisiregistravome. TIK NORĖJAU KELIŲ SPARNŲ.

Kalbant apie žiniatinklį, yra keli skirtingi modeliai, technologijos, bibliotekos ir paslaugos, kurias galite naudoti norėdami gauti realaus laiko funkciją, paprastai rezervuotą vietinėms programoms. Neseniai atsisėdau su Anthony Chu, kuris man suteikė 5 būdus, kaip galite kurti realaus laiko programas „JavaScript“.

Anthony Chu #MSIgniteTheTour (@nthonyChu) | „Twitter“

Naujausi „Anthony Chu“ tweetai #MSIgniteTheTour (@nthonyChu). Debesų advokatas @Microsoft. „Azure“, ASP .NET, Node.js… twitter.com

1. Ilgas apklausa

Tai yra, kai programa prašo atnaujinti serverį pagal tvarkaraštį. Programa „apklausia“ serverį.

Tai yra grynasis ekvivalentas, kai vaikai klausia „ar mes jau esame?“ kas penkias minutes. Ar atrodo, kad mes jau ten, vaikas? Paklauskite manęs dar kartą ir aš prisiekiu, kad išmesiu šią „Bičių filmo“ kopiją į griovį, ir jūs galite žiūrėti pro langą į žolę, kaip mes darėme, kai buvau vaikas.

Ilgą apklausą galima įgyvendinti rankiniu būdu naudojant bet kurią „JavaScript“ HTTP biblioteką, pvz., „JQuery“ ar „Axios“. Aš pats to niekada faktiškai neįgyvendinau. Atlikdamas keletą šio straipsnio tyrimų, atradau, kad geriausias būdas tai padaryti yra naudoti rekursinę funkciją setTimeout. Taip yra todėl, kad naudojant setIntervalnėra atsižvelgiama į užklausas, kurios nepavyksta, arba skirtasis laikas. Galų gale gausite „ajax“ skambučių, kurie visi apdorojami ne pagal tvarką.

Štai pavyzdys iš labai gražaus „Tech Octave“ straipsnio.

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

Taip pat yra tokių bibliotekų, kaip „pollymer“ (nereikia painioti su „Polymer“), kurios yra skirtos ilgam balsavimui. Gauti? „Apklausa“ ymer? Sukelti apklausas? Ar šis dalykas įjungtas?

fanatas / polimeras

Bendrosios paskirties AJAX / ilgai rinkimų biblioteka. Prisijunkite prie „fanout / pollymer“ kūrimo sukurdami paskyrą „GitHub“. github.com

Ilgas balsavimas yra geras, nes jis veikia kiekvienoje naršyklėje; net super senus. Tai blogai, nes yra labai neefektyvus ir nėra tiksliai „realiu laiku“. Jame taip pat yra keletas keistų kraštų atvejų (pvz., Užklausų nesėkmės), kuriuos turite programuoti taip, kaip jau matėme setInterval.

Geresnė ilgo balsavimo alternatyva yra „Server-Sent Events“ arba SSE.

2. Serverio siunčiami įvykiai

„Server-Sent Events“ (SSE) yra panašus į ilgą apklausą tiek, kiek klientas prašo serverio informacijos. Didelis skirtumas yra tas, kad naudojant SSE serveris tiesiog palaiko ryšį. Kai įvykis įvyksta ir yra informacijos, kurią reikia siųsti klientui, serveris klientui siunčia įvykį.

Serverio atsiųsti įvykiai

Tradiciškai tinklalapis turi nusiųsti serveriui užklausą gauti naujus duomenis; tai yra puslapis prašo duomenų iš ... developer.mozilla.org

Grįžtant prie mūsų analogiškos „kelio iš pragaro“ analogijos, tai būtų panašu, jei vaikas pasakytų „Ar mes jau ten?“, O tada kantriai lauktų jūsų atsakymo. Vėliau po keturių didingų tylos valandų atvyksite į tikslą, apsisuksite ir pasakysite „taip“. Tai yra nerealiausias scenarijus, kokį tik esu sugalvojęs savo gyvenime.

SSE yra naršyklės EventSourceAPI dalis. Atminkite, kad, kaip rašo caniuse.com, nei IE 11, nei „Edge“ nepalaiko SSE. Tai leidžia pasirinkti sunkią technologiją, kad ir kokia ji būtų įdomi.

Geros naujienos yra tai, kad beveik visos naršyklės palaiko „Web Sockets“.

3. Tinklo lizdai

„Web Sockets“ yra technologija, palengvinanti tikrą dvipusio ryšio kanalą tarp kliento ir serverio. Skirtingai nuo serverio išsiųstų įvykių, kurie yra tik ryšys iš serverio į klientą, žiniatinklio lizdus galima naudoti bendraujant abiem kryptimis.

Web Sockets are, uh, kinda verbose. They aren’t really the kind of API’s you wanna build apps with. Kind of like you could make an HTTP request with the XHR object, but OMG NO. I Googled “PHP Web Socket Sample” and found this doozy from the PHP docs. I zoomed all the way out in Chrome and barely got everything in a single screenshot.

And that’s ONLY the server portion. You still gotta wire up the browser.

So….that’s a no for me.

Fortunately, there are plenty of libraries that abstract Web Sockets even further so you don’t have to write any of this. One of those libraries is called “SignalR”.

4. SignalR

SignalR is a library that implements Web Sockets both in JavaScript AND .NET. On the server, you create what is known as a “hub” in SignalR. This hub sends and receives messages from clients.

Clients then connect to the hub (using the SignalR JavaScript library) and respond to events from the hub, or send their own events into the hub.

SignalR also falls back to long-polling whenever Web Sockets is unavailable. Although that’s not super likely unless you’re using IE 9 or lower.

Here is an example of setting up SignalR on the server…

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

OK, ok. I know this is not an apples to apples comparison with the PHP example from above, but I’m trying to make a point here. Just go with it. Do it for me. I’m having a rough morning.

So SignalR makes it more fun to program Web Sockets, but you know what’s even more fun than programming them? Not programming them.

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

Peržiūrėkite žemiau pateiktą interviu su Anthony. Šaudėme šį Vegasą, kai buvome konferencijoje ir gerai praleidome laiką su peruku, kurį nusipirkau „Party City“. Geriausi 8 USD, kuriuos kada nors išleidau.