5 τρόποι δημιουργίας εφαρμογών σε πραγματικό χρόνο με JavaScript

Υπήρχε μια χρονική στιγμή όπου δεν περιμέναμε πάρα πολλά από ιστοσελίδες. Αυτό μου θυμίζει, ο ιστότοπος της ταινίας Space Jam εξακολουθεί να βρίσκεται στο Διαδίκτυο στην αρχική του μορφή. Και χρησιμοποιεί ένα frameset. Όχι iFrames. ΠΛΑΙΣΙΑ .

Space Jam

SPACE JAM, χαρακτήρες, ονόματα και όλες οι σχετικές ενδείξεις είναι εμπορικά σήματα της Warner Bros. © 1996 www.warnerbros.com

Η Warner Bros χρησιμοποίησε μερικά απαλά αντίγραφα του Dreamweaver MX.

Αυτό ήταν το 1996. Αυτό είναι το 2019. Οι καιροί έχουν αλλάξει και οι χρήστες αναμένουν πολύ περισσότερα από ιστότοπους. Δεν περιμένουν απλώς να φαίνονται όμορφα, περιμένουν να είναι γεμάτα σε εφαρμογές και αυτό περιλαμβάνει το να είναι σε πραγματικό χρόνο.

Εφαρμογές σε πραγματικό χρόνο

Οι εφαρμογές σε πραγματικό χρόνο είναι αυτές που αντιδρούν σε αλλαγές οπουδήποτε στο σύστημα μιας συνδεδεμένης εφαρμογής - όχι μόνο αυτές που πραγματοποιούνται από τον τρέχοντα χρήστη.

Το κανονικό παράδειγμα πραγματικού χρόνου είναι μια εφαρμογή ανταλλαγής μηνυμάτων. Όπως όταν στέλνετε μια ομάδα φίλων ένα μήνυμα κειμένου σχετικά με τη συγκέντρωση για φτερά την Παρασκευή. Στη συνέχεια, ενημερώστε τους πάντες λεπτό προς λεπτό σχετικά με την πρόοδό σας από τη δουλειά στη γραμμή. Ευχαριστώ, Trevor. Τώρα είμαστε όλοι παγιδευμένοι σε μια ειδοποίηση για την οποία δεν εγγραφήκαμε. ΜΟΝΟ ΠΟΥ ΘΕΛΕΩ ΜΕΡΙΚΑ ΦΤΕΡΑ.

Όσον αφορά τον Ιστό, υπάρχουν πολλά διαφορετικά μοτίβα, τεχνολογίες, βιβλιοθήκες και υπηρεσίες που μπορείτε να χρησιμοποιήσετε για να αποκτήσετε τη λειτουργικότητα σε πραγματικό χρόνο που συνήθως προορίζεται για εγγενείς εφαρμογές. Πρόσφατα κάθισα με τον Anthony Chu που μου έδωσε 5 τρόπους με τους οποίους μπορείτε να δημιουργήσετε εφαρμογές σε πραγματικό χρόνο σε JavaScript.

Anthony Chu #MSIgniteTheTour (@nthonyChu) | Κελάδημα

Τα τελευταία Tweets από τον Anthony Chu #MSIgniteTheTour (@nthonyChu). Cloud Advocate @ Microsoft. Azure, ASP .NET, Node.js… twitter.com

1. Μακροχρόνια ψηφοφορία

Αυτό συμβαίνει όταν η εφαρμογή ζητά ενημερώσεις από το διακομιστή με χρονοδιάγραμμα. Η εφαρμογή «εκλέγει» τον διακομιστή.

Αυτό είναι το καθαρό ισοδύναμο των παιδιών που ρωτούν "είμαστε ακόμα εκεί;" κάθε πέντε λεπτά. Φαίνεται ότι είμαστε ακόμα εκεί, παιδί; Ρωτήστε με για άλλη μια φορά και σας ορκίζομαι ότι θα ρίξω αυτό το αντίγραφο της ταινίας "The Bee Movie" σε μια τάφρο και μπορείτε να κοιτάξετε έξω από το παράθυρο στο γρασίδι όπως κάναμε όταν ήμουν παιδί.

Η παρατεταμένη ψηφοφορία μπορεί να εφαρμοστεί χειροκίνητα με οποιαδήποτε βιβλιοθήκη HTTP JavaScript, όπως το jQuery ή το Axios. Δεν το έχω υλοποιήσει ποτέ ο ίδιος. Όταν έκανα κάποια έρευνα για αυτό το άρθρο, ανακάλυψα ότι ο καλύτερος τρόπος για να γίνει αυτό είναι να χρησιμοποιήσω μια αναδρομική συνάρτηση με setTimeout. Αυτό συμβαίνει επειδή η χρήση setIntervalδεν λαμβάνει υπόψη αιτήματα που αποτυγχάνουν ή λήγουν. Θα μπορούσατε να καταλήξετε με μια δέσμη κλήσεων ajax που όλες υποβάλλονται σε επεξεργασία εκτός λειτουργίας.

Εδώ είναι ένα παράδειγμα από το πολύ ωραίο άρθρο πάνω στο 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); })();

Υπάρχουν επίσης βιβλιοθήκες όπως το pollymer (δεν πρέπει να συγχέεται με το Polymer) που προορίζονται ειδικά για μακρόχρονη ψηφοφορία. Λήψη; "Δημοσκόπηση" ymer; Γιατί κάνει δημοσκοπήσεις; Είναι αυτό το πράγμα;

fanout / pollymer

Βιβλιοθήκη γενικής χρήσης AJAX / ψηφοφορίας Συμβάλλετε στην ανάπτυξη fanout / pollymer δημιουργώντας έναν λογαριασμό στο GitHub. github.com

Η ψηφοφορία είναι καλή επειδή λειτουργεί σε κάθε πρόγραμμα περιήγησης. ακόμη και τα σούπερ παλιά. Είναι κακό γιατί είναι εξαιρετικά αναποτελεσματικό και όχι ακριβώς «σε πραγματικό χρόνο». Έχει επίσης μερικές περίεργες περιπτώσεις (όπως αποτυχίες αιτήματος) με τις οποίες πρέπει να προγραμματίσετε όπως έχουμε ήδη δει setInterval.

Μια καλύτερη εναλλακτική λύση για την ψηφοφορία είναι τα συμβάντα διακομιστή ή SSE.

2. Εκδηλώσεις που αποστέλλονται από διακομιστή

Τα συμβάντα που αποστέλλονται από τον διακομιστή (SSE) είναι παρόμοια με τη μακρά ψηφοφορία στο βαθμό που ο πελάτης ζητά πληροφορίες από τον διακομιστή. Η μεγάλη διαφορά είναι ότι με το SSE, ο διακομιστής διατηρεί ανοιχτή τη σύνδεση. Όταν συμβεί ένα συμβάν και υπάρχουν πληροφορίες για αποστολή στον πελάτη, ο διακομιστής στέλνει ένα συμβάν στον πελάτη.

Συμβάντα που αποστέλλονται από διακομιστή

Παραδοσιακά, μια ιστοσελίδα πρέπει να στείλει ένα αίτημα στον διακομιστή για να λάβει νέα δεδομένα. Δηλαδή, η σελίδα ζητά δεδομένα από… developer.mozilla.org

Επιστροφή στην αναλογία «οδικό ταξίδι από την κόλαση», θα ήταν σαν να λέει το παιδί «Είμαστε ακόμα εκεί;» και στη συνέχεια περίμενε υπομονετικά την απάντησή σας. Τέσσερις υπέροχες ώρες σιωπής αργότερα φτάνετε στον προορισμό, γυρίζετε και πείτε «ναι». Αυτό είναι το πιο μη ρεαλιστικό σενάριο που έχω βρει ποτέ στη ζωή μου.

Το SSE είναι μέρος του EventSourceAPI του προγράμματος περιήγησης . Σημειώστε ότι σύμφωνα με το caniuse.com, ούτε το IE 11 ούτε το Edge υποστηρίζουν SSE. Αυτό το καθιστά μια δύσκολη τεχνολογία για να διαλέξετε, όσο ενδιαφέρον και αν είναι.

Τα καλά νέα είναι ότι σχεδόν κάθε πρόγραμμα περιήγησης υποστηρίζει Web Sockets.

3. Υποδοχές Ιστού

Το Web Sockets είναι μια τεχνολογία που διευκολύνει ένα πραγματικό αμφίδρομο κανάλι επικοινωνίας μεταξύ ενός πελάτη και ενός διακομιστή. Σε αντίθεση με τα συμβάντα που αποστέλλονται από διακομιστή, η οποία είναι μόνο επικοινωνία από διακομιστή σε πελάτη, οι υποδοχές Web μπορούν να χρησιμοποιηθούν για επικοινωνία και προς τις δύο κατευθύνσεις.

Οι διαδικτυακές πρίζες είναι, ε, κάπως ριζικές. Δεν είναι πραγματικά το είδος των API με τα οποία θέλετε να δημιουργήσετε εφαρμογές. Κάτι σαν να μπορούσατε να υποβάλετε αίτημα HTTP με το αντικείμενο XHR, αλλά OMG ΟΧΙ. Έβγαλα Googled "PHP Web Socket Sample" και βρήκα αυτό το doozy από τα έγγραφα PHP Μεγέθυνση στο Chrome και μόλις πήρα τα πάντα σε ένα στιγμιότυπο οθόνης.

Και αυτό είναι ΜΟΝΟ το τμήμα διακομιστή. Πρέπει ακόμα να συνδέσετε το πρόγραμμα περιήγησης.

Λοιπόν… αυτό δεν είναι για μένα.

Ευτυχώς, υπάρχουν πολλές βιβλιοθήκες που αφαιρούν ακόμη περισσότερο το Web Sockets, οπότε δεν χρειάζεται να γράψετε κανένα από αυτά. Μία από αυτές τις βιβλιοθήκες ονομάζεται "SignalR".

4. ΣήμαR

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

Δείτε την παρακάτω συνέντευξη με τον Anthony. Τραβήξαμε αυτό στο Βέγκας ενώ ήμασταν και οι δύο σε ένα συνέδριο και περάσαμε καλά με μια περούκα που αγόρασα στο Party City. Τα καλύτερα 8 $ που ξόδεψα ποτέ.