Web Sockets, Web Workers, Service Workers… ezek olyan kifejezések, amelyeket esetleg olvasott vagy hallott. Talán nem mindegyik, de valószínűleg legalább egy. És még akkor is, ha jól ismeri a front-end fejlesztést, jó eséllyel utána kell néznie, mit jelentenek. Vagy talán olyan vagy, mint én, és időnként összekevered őket. A kifejezések mindegyike borzasztóan hasonlónak tűnik, és nagyon könnyű összekeverni őket.
Tehát bontsuk le őket együtt, és különböztessük meg a Web Socketeket, a Web Workerseket és a Service Workereket. Nem abban az aprócska értelemben, amikor mélyrepülést végzünk, és gyakorlati tapasztalatokat szerezzünk mindegyikkel – inkább egy kis segítőtárs a könyvjelzőkhöz legközelebb I frissítőre van szüksége.
Gyors hivatkozás
Kezdjük egy magas szintű áttekintéssel a gyors összehasonlítás és kontraszt érdekében.
| Funkció | Ami |
|---|---|
| Web Socket | Nyílt és állandó kétirányú kapcsolatot hoz létre a böngésző és a kiszolgáló között, hogy üzeneteket küldhessen és fogadjon egyetlen, események által kiváltott kapcsolaton keresztül. |
| Webmunkás | Lehetővé teszi a szkriptek futtatását a háttérben, külön szálakban, hogy megakadályozzák, hogy a szkriptek blokkolják egymást a fő szálon. |
| Service Worker | A Web Worker olyan típusa, amely háttérszolgáltatást hoz létre, amely köztes szoftverként működik a böngésző és a kiszolgáló közötti hálózati kérések kezelésére, még offline helyzetekben is. |
Webaljzatok
A Web Socket egy kétirányú kommunikációs protokoll. Tekintsd ezt úgy, mint egy folyamatos hívást közted és barátod között, amely csak akkor ér véget, ha valamelyikőtök úgy dönt, hogy leteszi. Az egyetlen különbség az, hogy te vagy a böngésző, és a barátod a szerver. A kliens kérést küld a szervernek, a szerver pedig az ügyfél kérésének feldolgozásával válaszol, és fordítva.
A kommunikáció eseményeken alapul. A WebSocket Az objektum létrejön, és csatlakozik egy kiszolgálóhoz, és a kiszolgáló közötti üzenetek olyan eseményeket indítanak el, amelyek küldik és fogadják azokat.
Ez azt jelenti, hogy amikor a kezdeti kapcsolat létrejön, kliens-szerver kommunikációval rendelkezünk, ahol a kapcsolat létrejön és életben marad mindaddig, amíg az ügyfél vagy a szerver úgy dönt, hogy megszakítja azt egy üzenet küldésével. CloseEvent. Emiatt a Web Socket ideális olyan alkalmazásokhoz, amelyek folyamatos és közvetlen kommunikációt igényelnek az ügyfél és a szerver között. A legtöbb definícióban a chat-alkalmazásokat gyakori használati esetként láttam – beír egy üzenetet, elküldi a szervernek, elindít egy eseményt, és a szerver adatokkal válaszol anélkül, hogy újra és újra pingelnie kellene a szervert.
Fontolja meg ezt a forgatókönyvet: Kifelé tart, és úgy dönt, hogy bekapcsolja a Google Térképet. Valószínűleg már ismeri a Google Térkép működését, de ha nem, akkor automatikusan megkeresi az Ön tartózkodási helyét, miután csatlakozik az alkalmazáshoz, és nyomon követi, bárhol is jár. Valós idejű adatátvitelt használ az Ön tartózkodási helyének nyomon követésére, amíg ez a kapcsolat él. Ez egy Web Socket, amely állandó, kétirányú párbeszédet hoz létre a böngésző és a szerver között, hogy naprakészen tartsa az adatokat. A valós idejű eredményeket elérő sportalkalmazások is használhatják a Web Socketeket ilyen módon.
A nagy különbség a Web Sockets és a Web Workers (és amint látni fogjuk, a Service Workers) között az, hogy közvetlen hozzáféréssel rendelkeznek a DOM-hoz. Míg a Web Workers (és a Service Workers) külön szálakon fut, a Web Socket a fő szál részét képezi, amely lehetővé teszi számukra a DOM kezelését.
Vannak olyan eszközök és szolgáltatások, amelyek segítenek létrehozni és fenntartani a Web Socket kapcsolatokat, többek között: SocketCluster, AsyncAPI, cowboy, WebSocket King, Csatornákés Gorilla WebSocket. Az MDN rendelkezik a futó lista, amely más szolgáltatásokat is tartalmaz.
További Web Socket információk
Webmunkások
Fontolja meg azt a forgatókönyvet, amikor egy csomó összetett számítást kell végrehajtania, miközben módosítania kell a DOM-ot. A JavaScript egyszálú alkalmazás, és egynél több szkript futtatása megzavarhatja a módosítani kívánt felhasználói felületet, valamint a folyamatban lévő összetett számításokat.
Itt jönnek képbe a webmunkások.
A Web Workers lehetővé teszi, hogy a szkriptek a háttérben, külön szálakban futhassanak, nehogy a szkriptek blokkolják egymást a fő szálon. Emiatt kiválóan alkalmasak az intenzív műveleteket igénylő alkalmazások teljesítményének fokozására, mivel ezek a műveletek a háttérben, külön szálakon is végrehajthatók anélkül, hogy a felhasználói felület megjelenítését befolyásolnák. A DOM elérésében azonban nem olyan jók, mert a Web Socketekkel ellentétben a webmunkás a fő szálon kívül fut a saját szálában.
A Web Worker egy olyan objektum, amely a parancsfájl használatával hajt végre egy parancsfájlt Worker tiltakozik a feladatok elvégzése érdekében. És amikor a munkavállalókról beszélünk, általában három típusba sorolhatók:
- Elkötelezett dolgozók: Egy elkötelezett dolgozó csak az őt meghívó szkript által elérhető. Még mindig végrehajtja egy tipikus webmunkás feladatait, például többszálú szkriptjeit.
- Megosztott dolgozók: A megosztott dolgozó az elhivatott munkás ellentéte. Több szkript is hozzáférhet, és gyakorlatilag bármilyen feladatot képes végrehajtani, amelyet a webmunkás végrehajt, mindaddig, amíg a dolgozóval azonos tartományban vannak.
- Szerviz dolgozók: A szervizmunkás hálózati proxyként működik egy alkalmazás, a böngésző és a kiszolgáló között, lehetővé téve a szkriptek futtatását akkor is, ha a hálózat offline állapotba kerül. Erre a következő részben térünk ki.
További információ a webmunkásokról
Szolgáltatási dolgozók
Vannak dolgok, amelyekre fejlesztőként nincs befolyásunk, és ezek egyike a felhasználó hálózati kapcsolata. Bármilyen hálózathoz is csatlakozik a felhasználó, az az. Csak mindent megteszünk annak érdekében, hogy alkalmazásainkat optimalizáljuk, hogy azok a lehető legjobban teljesítsenek minden esetlegesen használt kapcsolaton.
A Service Workers az egyik olyan dolog, amit tehetünk az alkalmazások teljesítményének fokozatos növelése érdekében. Egy szervizmunkás ül az alkalmazás, a böngésző és a kiszolgáló között, biztonságos kapcsolatot biztosítva, amely a háttérben, egy külön szálon fut, köszönhetően – kitaláltad – a Web Workersnek. Amint azt az utolsó részben megtudtuk, a Service Workers a webes dolgozók három típusának egyike.
Tehát miért van szüksége valaha egy szervizmunkásra, aki az alkalmazás és a felhasználó böngészője között ül? Ismét nincs befolyásunk a felhasználó hálózati kapcsolatára. Tegyük fel, hogy a kapcsolat ismeretlen okból megszakad. Ez megszakítaná a kommunikációt a böngésző és a szerver között, megakadályozva az adatok oda-vissza továbbítását. A szervizmunkás tartja fenn a kapcsolatot, aszinkron proxyként működik, amely képes a kérések elfogására és a feladatok végrehajtására – még a hálózati kapcsolat megszakadása után is.
Ez a fő mozgatórugója annak, amit gyakran emlegetnek „offline-első” fejlesztés. Az eszközöket a hálózat helyett a helyi gyorsítótárban tárolhatjuk, kritikus információkat biztosíthatunk, ha a felhasználó offline állapotba kerül, előre letölthetjük a dolgokat, hogy készen álljanak, amikor a felhasználónak szüksége van rájuk, és tartalékokat biztosíthatunk a hálózati hibák esetén. Teljesen aszinkronok, de a Web Socketekkel ellentétben nincs hozzáférésük a DOM-hoz, mivel saját szálaikon futnak.
A másik nagy dolog, amit tudni kell a Service Workersről, hogy elfognak minden egyes kérést és választ az alkalmazásból. Mint ilyenek, vannak bizonyos biztonsági vonatkozásaik, különösen az, hogy azonos eredetű politikát követnek. Tehát ez azt jelenti, hogy nem fut egy szervizmunkás CDN-ről vagy harmadik féltől származó szolgáltatásból. Biztonságos HTTPS-kapcsolatot is igényelnek, ami azt jelenti, hogy működésükhöz SSL-tanúsítványra lesz szükség.
További információ a szervizmunkásokról
Csomagolta
Ez egy rendkívül magas szintű magyarázat a Web Sockets, Web Workers és Service Workers közötti különbségekre (és hasonlóságokra). A terminológia és a fogalmak ismét elég hasonlóak ahhoz, hogy összekeverjék egymást, de remélhetőleg így jobban megértheti, hogyan lehet megkülönböztetni őket.
Egy gyors referenciatáblázattal indítottuk a dolgokat. Itt ugyanaz a dolog, csak kissé kibővítve, hogy vastagabb összehasonlításokat lehessen készíteni.
| Funkció | Ami | Többszálú? | HTTPS? | DOM hozzáférés? |
|---|---|---|---|---|
| Web Socket | Nyílt és állandó kétirányú kapcsolatot hoz létre a böngésző és a kiszolgáló között, hogy üzeneteket küldhessen és fogadjon egyetlen, események által kiváltott kapcsolaton keresztül. | A főszálon fut | Nem szükséges | Igen |
| Webmunkás | Lehetővé teszi a szkriptek futtatását a háttérben, külön szálakban, hogy megakadályozzák, hogy a szkriptek blokkolják egymást a fő szálon. | Külön szálon fut | Kötelező | Nem |
| Service Worker | A Web Worker olyan típusa, amely háttérszolgáltatást hoz létre, amely köztes szoftverként működik a böngésző és a kiszolgáló közötti hálózati kérések kezelésére, még offline helyzetekben is. | Külön szálon fut | Kötelező | Nem |
