5 Möglichkeiten, Echtzeit-Apps mit JavaScript zu erstellen

Es gab einen Zeitpunkt, an dem wir nicht zu viel von Webseiten erwartet hatten. Was mich daran erinnert, dass die Space Jam-Filmwebsite in ihrer ursprünglichen Form immer noch im Internet ist. Und es verwendet ein Frameset. Nicht iFrames. RAHMEN .

Space Jam

SPACE JAM, Zeichen, Namen und alle zugehörigen Angaben sind Marken von Warner Bros. © 1996 www.warnerbros.com

Warner Bros hat einige sanft verwendete Kopien von Dreamweaver MX.

Das war 1996. Dies ist 2019. Die Zeiten haben sich geändert und die Benutzer erwarten viel mehr von Websites. Sie erwarten nicht nur, dass sie gut aussehen, sie erwarten auch, dass sie voll mit Apps sind, und dazu gehört auch, dass sie in Echtzeit arbeiten.

Echtzeitanwendungen

Echtzeit-Apps sind solche, die auf Änderungen im System einer verbundenen Anwendung reagieren - nicht nur auf Änderungen, die vom aktuellen Benutzer vorgenommen wurden.

Das kanonische Beispiel für Echtzeit ist eine Messaging-Anwendung. Zum Beispiel, wenn Sie einer Gruppe von Freunden eine SMS über das Zusammenkommen für Flügel am Freitag senden. Aktualisieren Sie dann alle von Minute zu Minute über Ihren Fortschritt von der Arbeit zur Bar. Danke, Trevor. Jetzt sind wir alle in einer Benachrichtigungshölle gefangen, für die wir uns nicht angemeldet haben. Ich wollte nur einige Flügel.

Wenn es um das Web geht, gibt es verschiedene Muster, Technologien, Bibliotheken und Dienste, mit denen Sie die Echtzeitfunktionalität abrufen können, die normalerweise für native Anwendungen reserviert ist. Ich habe mich kürzlich mit Anthony Chu zusammengesetzt, der mir 5 Möglichkeiten gegeben hat, wie Sie Echtzeit-Apps in JavaScript erstellen können.

Anthony Chu #MSIgniteTheTour (@nthonyChu) | Twitter

Die neuesten Tweets von Anthony Chu #MSIgniteTheTour (@nthonyChu). Cloud Advocate @Microsoft. Azure, ASP .NET, Node.js… twitter.com

1. Langes Polling

In diesem Fall fordert die Anwendung nach einem Zeitplan Aktualisierungen vom Server an. Die App "fragt" den Server ab.

Dies ist das Nettoäquivalent von Kindern, die fragen: "Sind wir schon da?" alle fünf Minuten. Sieht es so aus, als wären wir schon da, Junge? Fragen Sie mich noch einmal und ich schwöre Ihnen, dass ich diese Kopie des „The Bee Movie“ in einen Graben werfen werde und Sie aus dem Fenster auf Gras starren können, wie wir es als Kind getan haben.

Long-Polling kann manuell mit jeder JavaScript-HTTP-Bibliothek wie jQuery oder Axios implementiert werden. Ich habe das selbst nie umgesetzt. Als ich nach diesem Artikel recherchierte, stellte ich fest, dass der beste Weg, dies zu tun, darin besteht, eine rekursive Funktion mit zu verwenden setTimeout. Dies liegt daran, dass die Verwendung setIntervalkeine fehlgeschlagenen Anforderungen oder Zeitüberschreitungen berücksichtigt. Es könnte zu einer Reihe von Ajax-Anrufen kommen, die alle nicht in der richtigen Reihenfolge verarbeitet werden.

Hier ist ein Beispiel aus dem sehr schönen Artikel über 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); })();

Es gibt auch Bibliotheken wie Pollymer (nicht zu verwechseln mit Polymer), die speziell für Langzeitabfragen vorgesehen sind. Kapiert? "Umfrage" ymer? Weil es Umfragen gibt? Ist das Ding an?

Fanout / Pollymer

Allzweck-AJAX / Long-Polling-Bibliothek. Tragen Sie zur Fanout / Pollymer-Entwicklung bei, indem Sie ein Konto auf GitHub erstellen. github.com

Langes Polling ist gut, weil es in jedem Browser funktioniert. sogar die super alten. Es ist schlecht, weil es super ineffizient ist und nicht gerade "Echtzeit". Es gibt auch einige seltsame Randfälle (wie Anforderungsfehler), die Sie programmieren müssen, wie wir bereits gesehen haben setInterval.

Eine bessere Alternative zu Langzeitabfragen sind vom Server gesendete Ereignisse oder SSE.

2. Vom Server gesendete Ereignisse

Server-Sent Events (SSE) ähnelt insofern Long Polling, als der Client den Server nach Informationen fragt. Der große Unterschied besteht darin, dass bei SSE der Server die Verbindung nur offen hält. Wenn ein Ereignis eintritt und Informationen an den Client gesendet werden müssen, sendet der Server ein Ereignis an den Client.

Vom Server gesendete Ereignisse

Traditionell muss eine Webseite eine Anfrage an den Server senden, um neue Daten zu empfangen. Das heißt, die Seite fordert Daten von… developer.mozilla.org an

Zurück zu unserer Analogie „Road Trip from Hell“, wäre dies so, als würde das Kind „Sind wir schon da?“ Sagen und dann geduldig auf Ihre Antwort warten. Vier erhabene Stunden der Stille später erreichen Sie das Ziel, drehen sich um und sagen „Ja“. Das ist das unrealistischste Szenario, das ich mir jemals in meinem Leben ausgedacht habe.

SSE ist Teil der Browser- EventSourceAPI. Beachten Sie, dass laut caniuse.com weder IE 11 noch Edge SSE unterstützen. Das macht es schwierig, eine Technologie auszuwählen, wie interessant sie auch sein mag.

Die gute Nachricht ist, dass so ziemlich jeder Browser Web Sockets unterstützt.

3. Web Sockets

Web Sockets ist eine Technologie, die einen echten bidirektionalen Kommunikationskanal zwischen einem Client und einem Server ermöglicht. Im Gegensatz zu vom Server gesendeten Ereignissen, bei denen es sich nur um die Kommunikation vom Server zu einem Client handelt, können Web Sockets verwendet werden, um in beide Richtungen zu kommunizieren.

Web Sockets sind ziemlich ausführlich. Sie sind nicht wirklich die Art von APIs, mit denen Sie Apps erstellen möchten. Ein bisschen wie Sie könnten eine HTTP-Anfrage mit dem XHR-Objekt machen, aber OMG NO. Ich habe „PHP Web Socket Sample“ gegoogelt und diesen Trottel aus den PHP-Dokumenten gefunden. Ich habe in Chrome ganz herausgezoomt und kaum alles in einem einzigen Screenshot festgehalten.

Und das ist NUR der Serverteil. Sie müssen den Browser noch verkabeln.

Also ... das ist ein Nein für mich.

Glücklicherweise gibt es viele Bibliotheken, die Web Sockets noch weiter abstrahieren, sodass Sie nichts davon schreiben müssen. Eine dieser Bibliotheken heißt "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….

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.