Care este diferenta intre Web Sockets, Web Workers si Service Workers

Stefanescu Mihai 9 months ago iNoob

Web Sockets, Web Workers si Service Workers...termeni pe care sigur i-ai mai auzit pe undeva, poate ai auzit de unii dintre ei, dar nu chiar pe toti 3. Stiu, suna foarte similar si s-ar putea sa ii incurci intre ei.

Hai in acest articol sa vedem ce inseamna so care sunt diferentele intre ei.

Sa ne facem o idee rapida

Hai sa vedem care sunt diferentele high-level intre cele 3:

Nume Ce este
Web Socket Stabileste o conexiunea deschisa si persistenta intre browser si server pentru a trimite si primi mesaje.
Web Worker Permite scripturilor sa ruleze in background in thread-uri separate impiedicandu-le sa se incurce unul pe celalt in thread-ul principal.
Service Worker Un tip de web worker ce creaza un serviciu in background ce actioneaza ca middleware si se ocupa de request-urile intre browser si server.

Web Sockets

Un Web Socket este un protocol de comunicare din ambele directii (two-way). Poti sa te gandesti la el ca la un apel telefonic intre tine si un prieten care se va termina doar in momentul in care unul dintre voi decide sa il inchida.
Singura diferenta intre web socket si apelul telefonic este aceea ca tu esti browserul, iar prietenul este serverul. Clientul trimite un request catre server, iar server-ul raspunde prin a procesa cererea clientului si invers.

 

Acest tip de comunicare este bazat pe evenimente. Un obiect de tip web socket este creat si se conecteaza la server, apoi mesajele intre server si client pot incepe sa fie trimise.
O data ce conexiunea a fost creata este tinuta in deschisa pana la trimiterea unui eveniment de tipul CloseEvent.
Web Socket-urile sunt ideale pentru aplicatii ce necesita o comunicare permantenta intre client si server. Un exemplu cat se poate de simplu pentru aceasta tehnologie este un chat, unde poti deschide o conexiune si sa o folosesti in permantenta pentru afisarea mesajelor, fara sa fie nevoie sa tot faci ajax call-uri.

Sa ne gandim ca avem urmatorul scenariu:
Trebuie sa pleci in oras si te hotarasti sa pornesti Google Maps. Probabil deja stii cum functioneaza Google Maps, dar daca nu stii am sa zic aici, iti gaseste locatia in mod automat cand deschizi aplicatia si iti memoreaza traseul pe care ai mers. Se foloseste de o comunicare in timp real pentru a iti sti in permanenta locatia, exact cum am zis mai devreme ca functioneaza un Web Socket.

Diferenta intre Web Socket si Web Worker (si implicit Service Worker) este aceea ca au access direct la DOM. In timp ce un Web Worker (si un Service Worker) ruleaza in thread-uri separate, un Web Socket face parte din threadul principal de executie si are access la DOM.

Exista tool-uri ce pot ajuta la stanilirea unei conexiunea de acest tip:

Web Workers

Gandestete la urmatorul scenariu, trebuie sa faci o multime de calcule complexe si in acelasi timp sa modifici lucruri in DOM. Dupa cum bine stim, JavaScript este single threaded, iar rularea mai multor script-uri in mod simultan poate duce la conflicte de afisare in interfata.

Ei bine, aici intervin Web Workers.

Web Workers permit rularea anumitor functii in thread-uri separate pentru a preveni conflictele scripturilor ce ruleaza in thread-ul principal. Acest lucru face Web Workerii perfecti pentru a imbunatati performanta aplicatiilor ce necesita operatii complexe. Cu toate acestea, web workerii nu sunt grozavi pentru a face actiuni in DOM pentru ca, spre deosebire de Web Sockets, ruleaza in alt thread de executie.

Un Web Worker este un obiect ce executa un fisier folosind un obiectd e tip Worker.
Acesti workeri sunt impartiti in 3 categorii:

Nume Descriere
Dedicated workers Un worker dedicat poate fi accesat doar de scriptul care l-a creat
Shared Workers Un worker shared este opusul unui worker dedicat, poate fia ccesat de mai multe scripturi
Service Workers Un service worker functioneaza ca un proxy intre aplicatie, browser si server, permitand scripturilor sa ruleze chiar si daca am ramas fara internet

 

Mai multe informatii
-   Off the Main Thread (Chris Coyier)
The State Of Web Workers In 2021 (Chris Coyier)
Intro to Web Workers (Zapier)
Web Workers API (MDN Docs)
Latest browser support (Caniuse)

Service Workers

Ca si dezvoltatori, avem multe lucruri pe care trebuie sa le avem in vedere cand lucram la o aplicatie, iar unul dintre aceste lucruri este si conectivitatea la retea a utilizatorului. Pentru ca nu stim la ce retea este conectat utilizatorul si nu putem face nimic in sensul asta, putem totusi avea grija ca aplicatia noastra sa functioneze cat se poate de bine indiferent de circumstantele rularii ei.

Service Workers, sau ceva ce putem face pentru a imbunatati in mod progresiv performanta aplicatiei. Un asemenea worker sta intre aplicatie, browser si server, stabilind o conexiune sigura ce ruleaza in background intr-un thread separat ca un web worker, exact ce am aflat cateva randuri mai sus.

Pai si de ce as avea nevoie de un service worker?
Continuand discutia cu reteaua de mai sus, sa presupunem ca avem o eroare de retea, utilizatorul a ramas fara semnal de exemplu. Asta ar insemna ca aplicatia noastra nu mai functioneaza pentru ca a fost intrerupta comunicarea intre browser si server. Un service worker mentine conexiunea deschisa actionand ca un proxy async ce este capabil sa intercepteze request-urile si sa execute diferite functii.

Putem salva diverse lucruri in cache-ul local in loc de a le transfera prin retea, ceea ce ne ajuta sa afisam informatii importante cand user-ul este offline, ba chiar mai mult putem aduce lucruri in avans in caz ca user-ul ramane fara retea. Acest mod de lucru este async, dar spre deosebire de un web socket, aici nu avem access la DOM.

Chestia importanta ce trebuie retinuta despre Service Workers este ca pot intercepta fiecare request si response al aplicatiei tale, deci exista si cateva implicatii de securitate aici.
Service workerii tin cont de same-origin policy, ceea ce inseamna ca nu putem rula un service worker dintr-un CDN sau dintr-un serviciu 3rd party. De asemenea, pentru a functiona au nevoie de o conexiunea HTTPS.

Mai multe informatii
Add a Service Worker to Your Site (Chris Ferdinadi)
Service worker overview (Chrome Developers)
Smaller HTML Payloads with Service Workers (Philip Walton)
Service Worker Cookbook (Mozilla)
Service Worker API (MDN Docs)
Latest browser support (Caniuse)

Concluzii

In acest articol am povestit cat se poate de sumar ce sunt Web Sockets, Web Workers si Service Workers si am aflat care sunt diferentele intre cele 3.

 

 

Programator de ~8 ani, am lucrat la proiecte din mai multe industrstrii, de la eCommerce la telecomunicatii la automatizari. In acest timp am folosi diferite tehnologii, de la PHP, MySQL, PostgreSql, RabbitMq, Redis, Memcached si altele.


Get in touch
Pentru nelamuriri, dubii, comentarii si chestii de pe suflet ne putem auzi pe Discord, Reddit sau poti deschide o discutie noua pe forum

nba injury update # 5 months ago I аm reallу ikpressed Ƅy thе graphics οf thе game.
bingo philippines online # 5 months ago Excdellent game. Free tⲟ play. Нowever, onne caan buy small oг ⅼarge bundles, in odder tօ have extended play. Τhe download is worth it, үou will not be disappointed.
Qwzdgb # 1 month ago fenofibrate order online <a href="https://fenoficor.com/">buy generic tricor for sale</a> where can i buy tricor
Sdqyuc # 1 month ago zaditor 1 mg pills <a href="https://flixitorp.shop/">buy ketotifen paypal</a> order tofranil 25mg generic
Dgkzex # 1 month ago oral minoxidil <a href="https://aminirin.com/">purchase minoxytop sale</a> ed pills for sale
Rbwuzr # 1 month ago generic acarbose <a href="https://micronide.com/">buy generic micronase over the counter</a> buy fulvicin 250mg without prescription
Ihymcw # 1 month ago oral aspirin <a href="https://levquinon.com/">levoflox ca</a> purchase zovirax online
Envfsn # 4 weeks ago dipyridamole 100mg cheap <a href="https://pravinef.com/">pravastatin pill</a> buy cheap generic pravastatin
Wmkiiz # 3 weeks ago order duphaston 10mg generic <a href="https://janozin.com/">buy sitagliptin for sale</a> empagliflozin 25mg pill
Hwrcwo # 3 weeks ago order monograph without prescription <a href="https://colotazol.com/">buy colospa 135 mg without prescription</a> buy generic pletal 100 mg
Qnecwm # 3 weeks ago prasugrel online buy <a href="https://imocarbam.shop/">prasugrel 10mg us</a> buy tolterodine generic
Urisem # 2 weeks ago ferrous generic <a href="https://fertonel.com/">ferrous tablet</a> sotalol 40mg canada
Wdmhxy # 2 weeks ago pyridostigmine 60 mg tablet <a href="https://aelimax.com/">maxalt 5mg us</a> maxalt 5mg brand
Ixoydu # 2 weeks ago enalapril 5mg pill <a href="https://betaotec.shop/">buy enalapril 10mg</a> buy duphalac without prescription
Jzsqms # 1 week ago buy zovirax generic <a href="https://aelimax.shop/">order xalatan without prescription</a> buy exelon 6mg generic
Yjrgcz # 1 week ago cheap betahistine 16 mg <a href="https://haloatan.shop/">xalatan price</a> probenecid buy online
Uqrwak # 1 week ago buy telmisartan pills <a href="https://molnenil.shop/">movfor us</a> order movfor without prescription
Hxokof # 6 days ago purchase cenforce pill <a href="https://enapocen.shop/">buy generic naproxen</a> aralen 250mg us
Urmxpp # 6 hours ago atorvastatin 40mg cost <a href="https://liptamol.com/">atorvastatin 20mg brand</a> buy norvasc
Club-ul este dedicat membrilor si ofera access la mai multe zone ale website-ului.
Login Register

🔖 Bookmarks
✨ Pentru a sustine aceasta comunitate am sa te rog sa te autentifici sau sa te inregistrezi!

🌪️ Discord
Back to top
Folosim cookie-uri pentru a oferi functionalitatile critice ale aplicatiei Invata-Programare. Folosim cookie-uri si pentru a analiza traficul, pentru care e nevoie de consimtamantul dvs. explicit.