Web Sockets, Web Workers, Service Workers... aceștia sunt termeni pe care este posibil să-i fi citit sau auzit. Poate nu toate, dar probabil cel puțin una dintre ele. Și chiar dacă știi bine dezvoltarea front-end, există șanse mari să fii nevoit să cauți ce înseamnă. Sau poate ești ca mine și le amesteci din când în când. Toți termenii arată și sună îngrozitor de similar și este foarte ușor să-i confuzi.
Deci, să le defalcăm împreună și să distingem Web Sockets, Web Workers și Service Workers. Nu în sensul esențial în care facem o scufundare profundă și obținem experiență practică cu fiecare - mai mult ca un mic ajutor pentru a marca data viitoare I ai nevoie de o reîmprospătare.
Referință rapidă
Vom începe cu o prezentare generală la nivel înalt pentru o comparație și un contrast rapid.
| Caracteristică | Ce este |
|---|---|
| Web Socket | Stabilește o conexiune bidirecțională deschisă și persistentă între browser și server pentru a trimite și a primi mesaje printr-o singură conexiune declanșată de evenimente. |
| Lucrător web | Permite scripturilor să ruleze în fundal în fire separate pentru a preveni blocarea scripturilor unul pe celălalt pe firul principal. |
| Lucrător de servicii | Un tip de Web Worker care creează un serviciu de fundal care acționează middleware pentru gestionarea solicitărilor de rețea între browser și server, chiar și în situații offline. |
Socluri Web
Un Web Socket este un protocol de comunicare bidirecțională. Gândește-te la asta ca la un apel în curs între tine și prietenul tău, care nu se va termina decât dacă unul dintre voi decide să închidă. Singura diferență este că tu ești browserul, iar prietenul tău este serverul. Clientul trimite o cerere către server, iar serverul răspunde procesând cererea clientului și invers.
Comunicarea se bazează pe evenimente. A WebSocket obiectul este stabilit și se conectează la un server, iar mesajele dintre server declanșează evenimente care le trimit și le primesc.
Aceasta înseamnă că atunci când se realizează conexiunea inițială, avem o comunicare client-server în care o conexiune este inițiată și menținută în viață până când clientul sau serverul alege să o încheie trimițând un CloseEvent. Acest lucru face ca Web Sockets să fie ideal pentru aplicațiile care necesită o comunicare continuă și directă între un client și un server. Cele mai multe definiții pe care le-am văzut apelează aplicațiile de chat ca un caz de utilizare obișnuit - tastați un mesaj, îl trimiteți serverului, declanșați un eveniment, iar serverul răspunde cu date fără a fi nevoie să faceți ping la server în mod repetat.
Luați în considerare acest scenariu: sunteți pe cale de ieșire și decideți să activați Google Maps. Probabil că știți deja cum funcționează Google Maps, dar dacă nu știți, vă găsește automat locația după ce vă conectați la aplicație și o ține evidența oriunde ați merge. Utilizează transmisia de date în timp real pentru a ține evidența locației dvs. atâta timp cât această conexiune este vie. Acesta este un Web Socket care stabilește o conversație persistentă în două sensuri între browser și server pentru a menține datele la zi. O aplicație de sport cu scoruri în timp real ar putea folosi, de asemenea, Web Sockets în acest fel.
Marea diferență dintre Web Sockets și Web Workers (și, prin extensie, după cum vom vedea, Service Workers) este că aceștia au acces direct la DOM. În timp ce Web Workers (și Service Workers) rulează pe fire separate, Web Socket-urile fac parte din firul principal, ceea ce le oferă capacitatea de a manipula DOM.
Există instrumente și servicii care ajută la stabilirea și menținerea conexiunilor Web Socket, inclusiv: SocketCluster, AsyncAPI, cowboy, WebSocket King, Canale, și Gorilla WebSocket. MDN are un lista de rulare care include alte servicii.
Mai multe informații despre Web Sockets
Lucrători web
Luați în considerare un scenariu în care trebuie să efectuați o grămadă de calcule complexe și, în același timp, să faceți modificări DOM. JavaScript este o aplicație cu un singur thread și rularea mai multor scripturi ar putea perturba interfața cu utilizatorul la care încercați să faceți modificări, precum și calculul complex efectuat.
Aici intervin lucrătorii web.
Web Workers permite scripturilor să ruleze în fundal în fire separate pentru a preveni blocarea scripturilor unul pe celălalt pe firul principal. Acest lucru le face grozave pentru îmbunătățirea performanței aplicațiilor care necesită operațiuni intensive, deoarece aceste operațiuni pot fi efectuate în fundal pe fire separate, fără a afecta interfața cu utilizatorul de la randare. Dar nu sunt atât de grozavi la accesarea DOM, deoarece, spre deosebire de Web Sockets, un lucrător web rulează în afara firului principal în propriul său fir.
Un Web Worker este un obiect care execută un fișier script folosind un Worker obiect pentru a îndeplini sarcinile. Și când vorbim despre muncitori, aceștia tind să se încadreze în unul din trei tipuri:
- Lucrători dedicați: Un lucrător dedicat este la îndemână doar de scriptul care îl numește. Încă execută sarcinile unui lucrător web tipic, cum ar fi scripturile sale multi-threading.
- Lucrători în comun: Un lucrător comun este opusul unui lucrător dedicat. Poate fi accesat prin mai multe scripturi și poate îndeplini practic orice sarcină pe care o execută un lucrător web, atâta timp cât acestea există în același domeniu cu lucrătorul.
- Lucrători de servicii: Un lucrător de servicii acționează ca un proxy de rețea între o aplicație, browser și server, permițând rularea scripturilor chiar și în cazul în care rețeaua este offline. Vom ajunge la asta în secțiunea următoare.
Mai multe informații despre lucrătorii web
Lucrători de servicii
Există unele lucruri asupra cărora nu avem control în calitate de dezvoltatori, iar unul dintre acestea este conexiunea la rețea a unui utilizator. Indiferent de rețea la care se conectează un utilizator, este ceea ce este. Putem face tot posibilul pentru a optimiza aplicațiile noastre, astfel încât acestea să funcționeze cât mai bine pe orice conexiune care se întâmplă să fie utilizată.
Lucrătorii de servicii sunt unul dintre lucrurile pe care le putem face pentru a îmbunătăți treptat performanța unei aplicații. Un lucrător de servicii se află între aplicație, browser și server, oferind o conexiune sigură care rulează în fundal pe un fir separat, datorită - ați ghicit - Web Workers. După cum am aflat în ultima secțiune, lucrătorii de servicii sunt unul dintre cele trei tipuri de lucrători web.
Așadar, de ce ați avea nevoie vreodată de un lucrător de service care să stea între aplicația dvs. și browserul utilizatorului? Din nou, nu avem control asupra conexiunii la rețea a utilizatorului. Să spunem că conexiunea cedează dintr-un motiv necunoscut. Acest lucru ar întrerupe comunicarea dintre browser și server, împiedicând transmiterea datelor înainte și înapoi. Un lucrător de service menține conexiunea, acționând ca un proxy asincron care este capabil să intercepteze cereri și să execute sarcini – chiar și după ce conexiunea la rețea este pierdută.
Acesta este principalul motor al ceea ce se numește adesea dezvoltare „în primul rând offline”.. Putem stoca active în memoria cache locală în loc de rețea, putem oferi informații esențiale dacă utilizatorul se deconectează, putem prelua lucrurile în prealabil pentru a fi gata atunci când utilizatorul are nevoie de ele și putem oferi alternative ca răspuns la erorile de rețea. Sunt complet asincrone, dar, spre deosebire de Web Sockets, nu au acces la DOM, deoarece rulează pe propriile fire.
Un alt lucru important de știut despre lucrătorii de servicii este că aceștia interceptează fiecare cerere și răspuns din aplicația dvs. Ca atare, au unele implicații de securitate, mai ales că urmează o politică de aceeași origine. Deci, asta înseamnă că nu rulați un service worker de la un CDN sau un serviciu terță parte. De asemenea, necesită o conexiune HTTPS securizată, ceea ce înseamnă că veți avea nevoie de un certificat SSL pentru a rula.
Mai multe informații despre lucrătorii de servicii
La finalul
Aceasta este o explicație la nivel super înalt a diferențelor (și asemănărilor) dintre Web Sockets, Web Workers și Service Workers. Din nou, terminologia și conceptele sunt suficient de asemănătoare pentru a se amesteca una cu alta, dar sperăm că acest lucru vă oferă o idee mai bună despre cum să le distingeți.
Am început lucrurile cu un tabel de referință rapid. Iată același lucru, dar ușor extins pentru a face comparații mai groase.
| Caracteristică | Ce este | Multifile? | HTTPS? | Acces DOM? |
|---|---|---|---|---|
| Web Socket | Stabilește o conexiune bidirecțională deschisă și persistentă între browser și server pentru a trimite și a primi mesaje printr-o singură conexiune declanșată de evenimente. | Se execută pe firul principal | Nu este necesar | Da |
| Lucrător web | Permite scripturilor să ruleze în fundal în fire separate pentru a preveni blocarea scripturilor unul pe celălalt pe firul principal. | Se execută pe un fir separat | Necesar | Nu |
| Lucrător de servicii | Un tip de Web Worker care creează un serviciu de fundal care acționează middleware pentru gestionarea solicitărilor de rețea între browser și server, chiar și în situații offline. | Se execută pe un fir separat | Necesar | Nu |
