A existat un moment în care nu ne așteptam prea mult de la paginile web. Ceea ce îmi amintește, site-ul filmului Space Jam este încă pe internet în forma sa originală. Și folosește un set de cadre. Nu iFrame. RAME.

Space Jam
SPACE JAM, personaje, nume și toate indicațiile aferente sunt mărci comerciale ale Warner Bros. © 1996www.warnerbros.com

Warner Bros are câteva copii ușor folosite ale Dreamweaver MX.

Acesta a fost 1996. Acesta este 2019. Vremurile s-au schimbat, iar utilizatorii așteaptă mult mai mult din site-urile web. Nu se așteaptă doar să arate bine, ci se așteaptă ca acestea să fie pline în aplicații și asta include și faptul că este în timp real.

Aplicații în timp real

Aplicațiile în timp real sunt cele care reacționează la schimbări oriunde în sistemul unei aplicații conectate – nu doar cele făcute de utilizatorul actual.

Exemplul canonic al timpului real este o aplicație de mesagerie. Ca atunci când trimiți unui grup de prieteni un mesaj text despre adunarea pentru aripi vineri. Apoi actualizați-i pe toți minut cu minut cu privire la progresul dvs. de la serviciu la bar. Mulțumesc, Trevor. Acum suntem cu toții prinși într-un iad de notificări la care nu ne-am înscris. DOAR VREAU UNELE AERI.

5 moduri de a crea aplicatii in timp real cu
Ce este asta, Trevor? Ești la doar 10 minute distanță acum? BUCURA. Aștept cu nerăbdare cifre simple.

Când vine vorba de web, există mai multe tipare, tehnologii, biblioteci și servicii diferite pe care le puteți utiliza pentru a obține funcționalitatea în timp real, care este de obicei rezervată aplicațiilor native. De curând m-am așezat cu Anthony Chu, care mi-a oferit 5 moduri prin care puteți crea aplicații în timp real în JavaScript.

Anthony Chu #MSIgniteTheTour (@nthonyChu) | Stare de nervozitate
Cele mai recente tweets de la Anthony Chu #MSIgniteTheTour (@nthonyChu). Cloud Advocate @Microsoft. Azure, ASP .NET, Node.js …twitter.com

1. Sondaj lung

Acesta este momentul în care aplicația solicită actualizări de la server într-un program. Aplicația „sondează” serverul.

Acesta este echivalentul net al copiilor care întreabă „suntem deja acolo?” la fiecare cinci minute. Se pare că am ajuns deja, băiete? Întreabă-mă încă o dată și îți jur că voi arunca acest exemplar al „The Bee Movie” într-un șanț și te poți uita pe fereastră la iarbă așa cum am făcut când eram copil.

Interogarea lungă poate fi implementată manual cu orice bibliotecă HTTP JavaScript, cum ar fi jQuery sau Axios. Nu am implementat niciodată acest lucru chiar eu. Când cercetam acest articol, am descoperit că cel mai bun mod de a face acest lucru este să folosim o funcție recursivă cu setTimeout. Acest lucru se datorează faptului că utilizarea setInterval nu ia în considerare solicitările care eșuează sau expiră. Ați putea ajunge cu o grămadă de apeluri ajax care sunt toate procesate în afara comenzii.

Iată un exemplu din articolul foarte frumos de mai departe 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);
})();

Există, de asemenea, biblioteci precum pollymer (care nu trebuie confundat cu Polymer), care sunt special pentru sondaje îndelungate. Ia-l? „Poll” ymer? Pentru că votează? Este chestia asta activată?

fanout / pollymer
Bibliotecă de scop general AJAX / sondaj lung. Contribuiți la dezvoltarea fanout / pollymer prin crearea unui cont pe GitHub.github.com

Interogarea lungă este bună, deoarece funcționează în fiecare browser; chiar și cele super vechi. Este rău pentru că este super ineficient și nu tocmai „în timp real”. De asemenea, are câteva cazuri marginale ciudate (cum ar fi eșecurile cererii) pe care trebuie să le programați așa cum am văzut deja setInterval.

O alternativă mai bună la interogarea îndelungată este Evenimente trimise de server sau SSE.

2. Evenimente trimise de server

Evenimente trimise de server (SSE) este similar cu interogarea pe termen lung, în măsura în care clientul cere serverului informații. Marea diferență este că, cu SSE, serverul ține doar conexiunea deschisă. Când apare un eveniment și există informații de trimis către client, serverul trimite un eveniment către client.

Evenimente trimise de server
În mod tradițional, o pagină web trebuie să trimită o cerere către server pentru a primi date noi; adică pagina solicită date de la …developer.mozilla.org

Întorcându-ne la analogia „călătoriei noastre din iad”, ar fi ca și cum copilul ar spune „Suntem deja acolo?”, Și apoi am aștepta cu răbdare răspunsul tău. Patru ore de liniște sublime mai târziu ajungi la destinație, te întorci și spui „da”. Acesta este cel mai nerealist scenariu cu care am venit vreodată în viața mea.

SSE face parte din browser EventSource API. Rețineți că conform caniuse.com, nici IE 11, nici Edge nu acceptă SSE. Asta o face să fie o tehnologie dificilă de ales, oricât de interesantă este.

Vestea bună este că aproape fiecare browser acceptă Web Sockets.

3. Socluri Web

Web Sockets este o tehnologie care facilitează un adevărat canal de comunicare bidirecțional între un client și un server. Spre deosebire de Evenimente trimise de server, care reprezintă doar comunicarea de la server la client, Web Sockets poate fi utilizat pentru a comunica în ambele direcții.

Web Sockets sunt, uh, cam detaliate. Nu sunt chiar genul de API-uri cu care vrei să construiești aplicații. Cam ca tine ar putea faceți o cerere HTTP cu Obiect XHR, dar OMG NR. Am căutat pe Google „Eșantion de socket web PHP” și am găsit acest tip de documente PHP. Am mărit complet în Chrome și abia am obținut totul într-o singură captură de ecran.

1611689947 919 5 moduri de a crea aplicatii in timp real cu

Și asta este DOAR porțiunea de server. Încă trebuie să conectezi browserul.

Deci … asta este Nu pentru mine.

Din fericire, există o mulțime de biblioteci care abstractizează Web Sockets și mai departe, astfel încât nu trebuie să scrieți nimic din toate acestea. Una dintre aceste biblioteci se numește „SignalR”.

4. SemnalR

SignalR este o bibliotecă care implementează socketuri web atât în ​​JavaScript, cât și în .NET. Pe server, creați ceea ce este cunoscut sub numele de „hub” în SignalR. Acest hub trimite și primește mesaje de la clienți.

Clienții se conectează apoi la hub (utilizând biblioteca SignalR JavaScript) și răspund la evenimente din hub sau își trimit propriile evenimente în hub.

De asemenea, SignalR revine la interogarea îndelungată ori de câte ori Web Sockets nu este disponibil. Deși nu este foarte probabil, cu excepția cazului în care utilizați IE 9 sau o versiune mai mică.

Iată un exemplu de configurare a SignalR pe 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);
        }
    }
}

Bine bine. Știu că nu este o comparație mere-mere cu exemplul PHP de sus, dar încerc să fac un punct aici. Du-te cu ea. Fa-o pentru mine. Am o dimineață grea.

Deci SignalR face mai distractiv să programezi Web Sockets, dar știi ce este chiar mai distractiv decât să le programezi? Nu le programează.

5. Azure SignalR

Adesea, atunci când vrem să configurăm aplicații în timp real, construirea unui server Web Socket nu este tocmai o activitate cu valoare adăugată. O facem, dar numai pentru că trebuie să obținem în timp real. Preferăm să „funcționeze”.

Azure SignalR este exact asta. Este un Hub SignalR pe care îl puteți consuma la cerere ca serviciu. Asta înseamnă că trebuie doar să trimiți și să răspunzi la evenimente – ceea ce cauți în primul rând.

Ce este Azure SignalR
O prezentare generală a serviciului Azure SignalR.docs.microsoft.com

Creați hub-ul SignalR în Azure ca serviciu Azure, apoi vă conectați la acesta de la client și trimiteți / primiți mesaje.

Și acum știi …

Vezi interviul de mai jos cu Anthony. L-am împușcat în Vegas în timp ce eram amândoi la o conferință și ne-am distrat bine cu o perucă pe care am cumpărat-o la Party City. Cele mai bune 8 $ pe care le-am cheltuit vreodată.

https://www.youtube.com/watch?v=videoseries