Volt olyan pont, amikor nem vártunk túl sokat a weboldalaktól. Arra emlékeztetem, hogy a Space Jam film weboldala továbbra is eredeti formájában található az interneten. És egy keretkészletet használ. Nem iFrames. KERETEK .
Space Jam
A SPACE JAM, a karakterek, nevek és minden kapcsolódó jelzés a Warner Bros védjegye. © 1996 www.warnerbros.com
A Warner Bros rendelkezik a Dreamweaver MX néhány gyengéden használt példányával.
Ez volt 1996. Ez 2019. Az idők megváltoztak, és a felhasználók sokkal többet várnak el a webhelyektől. Nem csak azt várják tőlük, hogy jól nézzen ki, hanem azt is, hogy tele vannak alkalmazásokkal, és ide tartozik a valós idejű működés is.
Valós idejű alkalmazások
A valós idejű alkalmazások azok, amelyek a csatlakoztatott alkalmazás rendszerének bárhol reagálnak a változásokra - nem csak a jelenlegi felhasználó által készítettek.
A valós idejű kanonikus példa egy üzenetküldő alkalmazás. Mint amikor egy baráti társaságnak küld egy szöveges üzenetet arról, hogy pénteken összejön a szárnyakért. Ezután percről percre frissítsen mindenkit arról, hogyan halad a munkából a bárba. Köszönöm, Trevor. Most mindannyian csapdába esünk egy értesítési pokolban, amelyre nem regisztráltunk. CSAK AKARTAM néhány szárnyat.
A webről számos különböző minta, technológia, könyvtár és szolgáltatás használható, amelyek segítségével a valós idejű funkciókat általában a natív alkalmazások számára tartják fenn. Nemrégiben leültem Anthony Chuval, aki ötféle lehetőséget adott nekem arra, hogy valós idejű alkalmazásokat építhessenek JavaScript-ben.
Anthony Chu #MSIgniteTheTour (@nthonyChu) | Twitter
Anthony Chu legújabb üzenetei #MSIgniteTheTour (@nthonyChu). Cloud Advocate @Microsoft. Azure, ASP .NET, Node.js… twitter.com
1. Hosszú szavazás
Ekkor az alkalmazás ütemezés szerint kéri a szervertől a frissítéseket. Az alkalmazás „lekérdezi” a szervert.
Ez annak a gyereknek az nettó egyenértékű kérdése, hogy „vajon ott vagyunk már?” öt percenként. Úgy néz ki, hogy már ott vagyunk, kölyök? Kérdezzen még egyszer, és esküszöm önre, hogy a „A méh film” ezt a példányát egy árokba dobom, és az ablakon keresztül bámulhatja a füvet, mint mi gyerekkoromban.
A hosszú lekérdezés manuálisan végrehajtható bármilyen JavaScript HTTP könyvtárral, például a jQuery vagy az Axios segítségével. Ezt magam még soha nem valósítottam meg. A cikk kutatása során felfedeztem, hogy ennek legjobb módja a rekurzív függvény használata setTimeout. Ennek oka, hogy a használat setIntervalnem veszi figyelembe a sikertelen vagy az időkorlátot igénylő kérelmeket. Végül egy csomó ajax híváshoz juthat, amelyeket rendezetlenül dolgoznak fel.
Íme egy példa a nagyon szép cikkből a Tech Octave-nél.
(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); })();Vannak olyan könyvtárak is, mint a pollymer (nem tévesztendő össze a Polymerrel), amelyek kifejezetten hosszú közvélemény-kutatások. Szerezd meg? “Szavazás” ymer? Mert megkérdezi? Ez a dolog be van kapcsolva?
fanout / pollymer
Általános célú AJAX / hosszú lekérdezésű könyvtár. Hozzon létre hozzájárulást a fanout / pollymer fejlesztéséhez egy fiók létrehozásával a GitHubon. github.com
A hosszú lekérdezés azért jó, mert minden böngészőben működik; még a szuper öregek is. Rossz, mert nagyon nem hatékony, és nem éppen „valós idejű”. Van néhány furcsa éles esete (például kérési hibák), amelyeket úgy kell beprogramoznia, ahogyan azt már láttuk setInterval.
A hosszú szavazás jobb alternatívája a Server-Sent Events vagy az SSE.
2. Szerver által küldött események
A Server-Sent Events (SSE) annyiban hasonlít a hosszú lekérdezésekre, hogy az ügyfél információt kér a szervertől. A nagy különbség az, hogy az SSE használatával a szerver csak nyitva tartja a kapcsolatot. Amikor egy esemény bekövetkezik, és van információ, amelyet el kell küldeni az ügyfélnek, a szerver eseményt küld az ügyfélnek.
A szerver által küldött események
Hagyományosan egy weboldalnak kérést kell küldenie a szervernek új adatok fogadására; vagyis az oldal adatokat kér a… developer.mozilla.org webhelytől
Visszatérve a „pokol utunk” analógiánkra, ez olyan, mintha a gyerek azt mondaná: „Már ott vagyunk?”, Majd türelmesen megvárja válaszát. Négy magasztos csend késõbb megérkezik a célhoz, megfordul, és igent mond. Ez a legreálisabb forgatókönyv, amit életemben valaha is előálltam.
Az SSE a böngésző EventSourceAPI része . Ne feledje, hogy a caniuse.com szerint sem az IE 11, sem az Edge nem támogatja az SSE-t. Ez amolyan kemény technológiává teszi a választást, bármennyire érdekes is.
A jó hír az, hogy nagyjából minden böngésző támogatja a Web Socketeket.
3. Webaljzatok
A Web Sockets egy olyan technológia, amely megkönnyíti a kliens és a szerver közötti valódi kétirányú kommunikációs csatornát. A Server-Sent Events-től eltérően, amely csak a szerverről az ügyfélre történő kommunikáció, a Web Sockets mindkét irányban kommunikálhat.
A webaljzatok meglehetősen bőbeszédűek. Nem igazán azok az API-k, amelyekkel alkalmazásokat szeretne készíteni. Olyan, mint amellyel HTTP kérést tehetne az XHR objektummal, de OMG NO. A Google-ba kerestem a „PHP Web Socket Sample” szót, és ezt a PHP dokumentumokból találtam. Egészen nagyítottam a Chrome-ban, és alig kaptam mindent egyetlen képernyőképben.
És ez CSAK a szerver része. Még mindig be kell kapcsolnod a böngészőt.
Tehát ... .a egy nem értem.
Szerencsére rengeteg olyan könyvtár van, amely még jobban elvonatkoztatja a Web Socket-eket, így nem kell ilyet írni. Az egyik ilyen könyvtár neve „SignalR”.
4. JelR
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….
Check out the interview below with Anthony. We shot this one in Vegas while we were both at a conference and had a good time with a wig that I bought at Party City. Best 8$ I ever spent.