Η διαφορά μεταξύ των υποδοχών Web, των εργαζομένων στο Web και των εργαζομένων υπηρεσιών

Web Sockets, Web Workers, Service Workers… αυτοί είναι όροι που μπορεί να έχετε διαβάσει ή κρυφακούσει. Ίσως όχι όλοι, αλλά πιθανότατα τουλάχιστον ένας από αυτούς. Και ακόμη κι αν έχετε καλό χειρισμό στην ανάπτυξη του front-end, υπάρχει μεγάλη πιθανότητα να χρειαστεί να ψάξετε τι σημαίνουν. Ή μήπως είσαι σαν εμένα και τα ανακατεύεις από καιρό σε καιρό. Όλοι οι όροι μοιάζουν και ακούγονται απαίσια και είναι πολύ εύκολο να τους μπερδέψουμε.

Λοιπόν, ας τα αναλύσουμε μαζί και ας διακρίνουμε τα Web Sockets, Web Workers και Service Workers. Όχι με την απίστευτη έννοια όπου κάνουμε μια βαθιά κατάδυση και αποκτάμε πρακτική εμπειρία με τον καθένα - περισσότερο σαν ένας μικρός βοηθός για να προσθέσετε σελιδοδείκτες την επόμενη φορά I χρειάζεσαι ανανέωση.

Γρήγορη αναφορά

Θα ξεκινήσουμε με μια επισκόπηση υψηλού επιπέδου για γρήγορη σύγκριση και αντίθεση.

Χαρακτηριστικό	Τι είναι
Web Socket	Δημιουργεί μια ανοιχτή και επίμονη αμφίδρομη σύνδεση μεταξύ του προγράμματος περιήγησης και του διακομιστή για την αποστολή και τη λήψη μηνυμάτων μέσω μιας μεμονωμένης σύνδεσης που ενεργοποιείται από συμβάντα.
Web Worker	Επιτρέπει στα σενάρια να εκτελούνται στο παρασκήνιο σε ξεχωριστά νήματα για να εμποδίσει τα σενάρια να μπλοκάρουν το ένα το άλλο στο κύριο νήμα.
υπηρεσία των εργαζομένων	Ένας τύπος Web Worker που δημιουργεί μια υπηρεσία παρασκηνίου που ενεργεί ενδιάμεσο λογισμικό για το χειρισμό αιτημάτων δικτύου μεταξύ του προγράμματος περιήγησης και του διακομιστή, ακόμη και σε καταστάσεις εκτός σύνδεσης.

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

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

Η επικοινωνία βασίζεται σε γεγονότα. ΕΝΑ WebSocket Το αντικείμενο εγκαθίσταται και συνδέεται με έναν διακομιστή και τα μηνύματα μεταξύ του διακομιστή ενεργοποιούν συμβάντα που τα στέλνουν και τα λαμβάνουν.

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

Σκεφτείτε αυτό το σενάριο: Είστε καθ' οδόν και αποφασίζετε να ενεργοποιήσετε τους Χάρτες Google. Πιθανότατα γνωρίζετε ήδη πώς λειτουργούν οι Χάρτες Google, αλλά αν δεν το γνωρίζετε, βρίσκει αυτόματα την τοποθεσία σας αφού συνδεθείτε στην εφαρμογή και την παρακολουθεί όπου κι αν πάτε. Χρησιμοποιεί μετάδοση δεδομένων σε πραγματικό χρόνο για να παρακολουθεί την τοποθεσία σας όσο αυτή η σύνδεση είναι ζωντανή. Αυτό είναι ένα Web Socket που δημιουργεί μια επίμονη αμφίδρομη συνομιλία μεταξύ του προγράμματος περιήγησης και του διακομιστή για να διατηρεί αυτά τα δεδομένα ενημερωμένα. Μια αθλητική εφαρμογή με σκορ σε πραγματικό χρόνο μπορεί επίσης να κάνει χρήση των Web Sockets με αυτόν τον τρόπο.

Η μεγάλη διαφορά μεταξύ των Web Sockets και των Web Workers (και, κατ' επέκταση, όπως θα δούμε, των Service Workers) είναι ότι έχουν άμεση πρόσβαση στο DOM. Ενώ οι Web Workers (και οι Service Workers) τρέχουν σε ξεχωριστά νήματα, οι υποδοχές Ιστού αποτελούν μέρος του κύριου νήματος που τους δίνει τη δυνατότητα να χειρίζονται το DOM.

Υπάρχουν εργαλεία και υπηρεσίες που βοηθούν στη δημιουργία και τη διατήρηση συνδέσεων Web Socket, όπως: SocketCluster, AsyncAPI, καουμπόη, WebSocket King, Κανάλια, να Gorilla WebSocket. Το MDN έχει α τρέχουσα λίστα που περιλαμβάνει άλλες υπηρεσίες.

Περισσότερες πληροφορίες Web Sockets

Εργαζόμενοι στο διαδίκτυο

Σκεφτείτε ένα σενάριο όπου πρέπει να εκτελέσετε μια δέσμη περίπλοκων υπολογισμών ενώ ταυτόχρονα κάνετε αλλαγές στο DOM. Η JavaScript είναι μια εφαρμογή με ένα νήμα και η εκτέλεση περισσότερων από μία δέσμης ενεργειών ενδέχεται να διαταράξει τη διεπαφή χρήστη στην οποία προσπαθείτε να κάνετε αλλαγές, καθώς και τον περίπλοκο υπολογισμό που εκτελείται.

Εδώ μπαίνουν στο παιχνίδι οι Web Workers.

Οι Εργάτες Ιστού επιτρέπουν στα σενάρια να εκτελούνται στο παρασκήνιο σε ξεχωριστά νήματα για να εμποδίσουν τα σενάρια να μπλοκάρουν το ένα το άλλο στο κύριο νήμα. Αυτό τα καθιστά ιδανικά για τη βελτίωση της απόδοσης εφαρμογών που απαιτούν εντατικές λειτουργίες, καθώς αυτές οι λειτουργίες μπορούν να εκτελεστούν στο παρασκήνιο σε ξεχωριστά νήματα χωρίς να επηρεάζεται η απόδοση της διεπαφής χρήστη. Αλλά δεν είναι τόσο καλοί στην πρόσβαση στο DOM, επειδή, σε αντίθεση με τα Web Sockets, ένας εργαζόμενος Ιστού τρέχει έξω από το κύριο νήμα στο δικό του νήμα.

Ένα Web Worker είναι ένα αντικείμενο που εκτελεί ένα αρχείο σεναρίου χρησιμοποιώντας ένα Worker αντιτίθενται στην εκτέλεση των καθηκόντων. Και όταν μιλάμε για εργάτες, τείνουν να εμπίπτουν σε έναν από τους τρεις τύπους:

• Αφοσιωμένοι Εργάτες: Ένας αφοσιωμένος εργαζόμενος είναι προσβάσιμος μόνο από το σενάριο που τον καλεί. Εξακολουθεί να εκτελεί τις εργασίες ενός τυπικού web worker, όπως τα σενάρια πολλαπλών νημάτων.
• Κοινόχρηστοι εργαζόμενοι: Ένας κοινός εργαζόμενος είναι το αντίθετο ενός αφοσιωμένου εργάτη. Μπορεί να προσπελαστεί από πολλά σενάρια και μπορεί πρακτικά να εκτελέσει οποιαδήποτε εργασία που εκτελεί ένας web worker, εφόσον υπάρχουν στον ίδιο τομέα με τον εργαζόμενο.
• Υπάλληλοι υπηρεσιών: Ένας εργαζόμενος υπηρεσιών λειτουργεί ως διακομιστής μεσολάβησης δικτύου μεταξύ μιας εφαρμογής, του προγράμματος περιήγησης και του διακομιστή, επιτρέποντας στα σενάρια να εκτελούνται ακόμη και σε περίπτωση που το δίκτυο είναι εκτός σύνδεσης. Θα φτάσουμε σε αυτό στην επόμενη ενότητα.

Περισσότερες πληροφορίες Web Workers

Εργάτες Εξυπηρέτησης

Υπάρχουν ορισμένα πράγματα που δεν έχουμε κανέναν έλεγχο ως προγραμματιστές και ένα από αυτά είναι η σύνδεση δικτύου ενός χρήστη. Όποιο δίκτυο και αν συνδέεται ένας χρήστης είναι αυτό που είναι. Μπορούμε μόνο να κάνουμε ό,τι καλύτερο μπορούμε για να βελτιστοποιήσουμε τις εφαρμογές μας, ώστε να αποδίδουν όσο το δυνατόν καλύτερα σε οποιαδήποτε σύνδεση τυχαίνει να χρησιμοποιείται.

Το Service Workers είναι ένα από τα πράγματα που μπορούμε να κάνουμε για να βελτιώσουμε σταδιακά την απόδοση μιας εφαρμογής. Ένας εργαζόμενος σέρβις βρίσκεται ανάμεσα στην εφαρμογή, το πρόγραμμα περιήγησης και τον διακομιστή, παρέχοντας μια ασφαλή σύνδεση που εκτελείται στο παρασκήνιο σε ξεχωριστό νήμα, χάρη στους — το μαντέψατε — Web Workers. Όπως μάθαμε στην τελευταία ενότητα, οι Service Workers είναι ένας από τους τρεις τύπους Web Workers.

Λοιπόν, γιατί θα χρειαστείτε ποτέ έναν υπάλληλο εξυπηρέτησης να κάθεται μεταξύ της εφαρμογής σας και του προγράμματος περιήγησης του χρήστη; Και πάλι, δεν έχουμε κανέναν έλεγχο στη σύνδεση δικτύου του χρήστη. Ας πούμε ότι η σύνδεση βγαίνει για άγνωστο λόγο. Αυτό θα διακόψει την επικοινωνία μεταξύ του προγράμματος περιήγησης και του διακομιστή, εμποδίζοντας τη μετάδοση δεδομένων εμπρός και πίσω. Ένας εργαζόμενος σέρβις διατηρεί τη σύνδεση, ενεργώντας ως ασύγχρονος διακομιστής μεσολάβησης που είναι ικανός να υποκλέψει αιτήματα και να εκτελεί εργασίες — ακόμη και μετά την απώλεια της σύνδεσης δικτύου.

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

Το άλλο σημαντικό πράγμα που πρέπει να γνωρίζετε για τους Service Workers είναι ότι παρακολουθούν κάθε αίτημα και απάντηση από την εφαρμογή σας. Ως εκ τούτου, έχουν ορισμένες επιπτώσεις στην ασφάλεια, κυρίως ότι ακολουθούν μια πολιτική ίδιας προέλευσης. Επομένως, αυτό σημαίνει ότι δεν εκτελείται ένας υπάλληλος σέρβις από μια υπηρεσία CDN ή τρίτου μέρους. Απαιτούν επίσης μια ασφαλή σύνδεση HTTPS, πράγμα που σημαίνει ότι θα χρειαστείτε ένα πιστοποιητικό SSL για να εκτελεστούν.

Περισσότερες πληροφορίες για τους υπαλλήλους υπηρεσιών

Ολοκληρώνοντας

Αυτή είναι μια εξήγηση εξαιρετικά υψηλού επιπέδου για τις διαφορές (και τις ομοιότητες) μεταξύ των Web Sockets, των Web Workers και των Service Workers. Και πάλι, η ορολογία και οι έννοιες είναι αρκετά παρόμοιες ώστε να αναμιγνύονται το ένα με το άλλο, αλλά ελπίζουμε ότι αυτό σας δίνει μια καλύτερη ιδέα για το πώς να τα διακρίνετε.

Ξεκινήσαμε τα πράγματα με έναν γρήγορο πίνακα αναφοράς. Εδώ είναι το ίδιο, αλλά ελαφρώς διευρυμένο για να γίνουν πιο πυκνές συγκρίσεις.

Χαρακτηριστικό	Τι είναι	Πολυνηματική;	HTTPS;	Πρόσβαση στο DOM;
Web Socket	Δημιουργεί μια ανοιχτή και επίμονη αμφίδρομη σύνδεση μεταξύ του προγράμματος περιήγησης και του διακομιστή για την αποστολή και τη λήψη μηνυμάτων μέσω μιας μεμονωμένης σύνδεσης που ενεργοποιείται από συμβάντα.	Εκτελείται στο κύριο νήμα	Δεν απαιτείται	Ναι
Web Worker	Επιτρέπει στα σενάρια να εκτελούνται στο παρασκήνιο σε ξεχωριστά νήματα για να εμποδίσει τα σενάρια να μπλοκάρουν το ένα το άλλο στο κύριο νήμα.	Εκτελείται σε ξεχωριστό νήμα	Απαιτείται	Οχι
υπηρεσία των εργαζομένων	Ένας τύπος Web Worker που δημιουργεί μια υπηρεσία παρασκηνίου που ενεργεί ενδιάμεσο λογισμικό για το χειρισμό αιτημάτων δικτύου μεταξύ του προγράμματος περιήγησης και του διακομιστή, ακόμη και σε καταστάσεις εκτός σύνδεσης.	Εκτελείται σε ξεχωριστό νήμα	Απαιτείται	Οχι