Forskjellen mellom Web Sockets, Web Workers og Service Workers

Web Sockets, Web Workers, Service Workers ... dette er begreper du kanskje har lest eller overhørt. Kanskje ikke alle, men sannsynligvis minst én av dem. Og selv om du har god kontroll på frontend-utvikling, er det en god sjanse for at du må slå opp hva de betyr. Eller kanskje du er som meg og blander dem fra tid til annen. Begrepene ser alle ut og høres forferdelig like ut, og det er veldig lett å få dem forvirret.

Så la oss dele dem ned sammen og skille mellom nettsockets, webarbeidere og servicearbeidere. Ikke i den grove forstanden der vi gjør et dypdykk og får praktisk erfaring med hver enkelt – mer som en liten hjelper å bokmerke neste gang I du trenger en oppfriskning.

Rask referanse

Vi starter med en oversikt på høyt nivå for en rask sammenligning og kontrast.

Trekk	Hva det er
Web Socket	Etablerer en åpen og vedvarende toveisforbindelse mellom nettleseren og serveren for å sende og motta meldinger over en enkelt tilkobling utløst av hendelser.
Webarbeider	Lar skript kjøres i bakgrunnen i separate tråder for å forhindre at skript blokkerer hverandre på hovedtråden.
tjenesten Worker	En type Web Worker som lager en bakgrunnstjeneste som fungerer mellomvare for håndtering av nettverksforespørsler mellom nettleseren og serveren, selv i frakoblede situasjoner.

Nettkontakter

En Web Socket er en toveis kommunikasjonsprotokoll. Tenk på dette som en pågående samtale mellom deg og vennen din som ikke vil ende med mindre en av dere bestemmer seg for å legge på. Den eneste forskjellen er at du er nettleseren og vennen din er serveren. Klienten sender en forespørsel til serveren og serveren svarer ved å behandle klientens forespørsel og omvendt.

Kommunikasjonen er basert på hendelser. EN WebSocket objektet etableres og kobles til en server, og meldinger mellom serveren utløser hendelser som sender og mottar dem.

Dette betyr at når den første tilkoblingen er opprettet, har vi en klient-server-kommunikasjon der en tilkobling initieres og holdes i live til enten klienten eller serveren velger å avslutte den ved å sende en CloseEvent. Det gjør Web Sockets ideelle for applikasjoner som krever kontinuerlig og direkte kommunikasjon mellom en klient og en server. De fleste definisjoner jeg har sett kaller chat-apper som en vanlig brukssak - du skriver en melding, sender den til serveren, utløser en hendelse, og serveren svarer med data uten å måtte pinge serveren om og om igjen.

Vurder dette scenariet: Du er på vei ut og bestemmer deg for å slå på Google Maps. Du vet sikkert allerede hvordan Google Maps fungerer, men hvis du ikke gjør det, finner den posisjonen din automatisk etter at du kobler til appen og holder styr på den uansett hvor du går. Den bruker sanntidsdataoverføring for å holde styr på posisjonen din så lenge denne forbindelsen er i live. Det er en Web Socket som etablerer en vedvarende toveis samtale mellom nettleseren og serveren for å holde disse dataene oppdatert. En sportsapp med sanntidspoeng kan også bruke Web Sockets på denne måten.

Den store forskjellen mellom Web Sockets og Web Workers (og, i forlengelsen som vi skal se, Service Workers) er at de har direkte tilgang til DOM. Mens Web Workers (og Service Workers) kjører på separate tråder, er Web Sockets en del av hovedtråden som gir dem muligheten til å manipulere DOM.

Det finnes verktøy og tjenester som hjelper deg med å etablere og vedlikeholde Web Socket-tilkoblinger, inkludert: SocketCluster, AsyncAPI, cowboy, WebSocket King, kanalerog Gorilla WebSocket. MDN har en kjøreliste som inkluderer andre tjenester.

Mer informasjon om Web Sockets

Nettarbeidere

Tenk på et scenario der du må utføre en haug med komplekse beregninger samtidig som du gjør endringer i DOM. JavaScript er en enkelt-tråds applikasjon, og å kjøre mer enn ett skript kan forstyrre brukergrensesnittet du prøver å gjøre endringer i, samt den komplekse beregningen som utføres.

Det er her Web Workers kommer inn i bildet.

Web Workers lar skript kjøres i bakgrunnen i separate tråder for å forhindre at skript blokkerer hverandre på hovedtråden. Det gjør dem ypperlige for å forbedre ytelsen til applikasjoner som krever intensive operasjoner siden disse operasjonene kan utføres i bakgrunnen på separate tråder uten å påvirke brukergrensesnittet fra gjengivelse. Men de er ikke så flinke til å få tilgang til DOM fordi, i motsetning til Web Sockets, kjører en nettarbeider utenfor hovedtråden i sin egen tråd.

En Web Worker er et objekt som kjører en skriptfil ved å bruke en Worker objekt for å utføre oppgavene. Og når vi snakker om arbeidere, har de en tendens til å falle inn i en av tre typer:

• Dedikerte arbeidere: En dedikert medarbeider er bare innen rekkevidde av manuset som kaller det. Den utfører fortsatt oppgavene til en typisk nettarbeider, for eksempel multi-threading-skriptene.
• Delte arbeidere: En delt arbeider er det motsatte av en dedikert arbeider. Den kan nås med flere skript og kan praktisk talt utføre alle oppgaver som en nettarbeider utfører så lenge de eksisterer i samme domene som arbeideren.
• Servicearbeidere: En tjenestearbeider fungerer som en nettverksproxy mellom en app, nettleseren og serveren, slik at skript kan kjøres selv i tilfelle nettverket går offline. Vi kommer til dette i neste avsnitt.

Mer informasjon om Web Workers

Servicearbeidere

Det er noen ting vi ikke har kontroll over som utviklere, og en av disse tingene er en brukers nettverkstilkobling. Uansett hvilket nettverk en bruker kobler til er det det er. Vi kan bare gjøre vårt beste for å optimalisere appene våre slik at de yter best mulig på alle tilkoblinger som tilfeldigvis blir brukt.

Servicearbeidere er en av tingene vi kan gjøre for å forbedre ytelsen til en app gradvis. En tjenestearbeider sitter mellom appen, nettleseren og serveren, og gir en sikker tilkobling som kjører i bakgrunnen på en egen tråd, takket være - du gjettet riktig - Web Workers. Som vi lærte i den siste delen, er Service Workers en av tre typer nettarbeidere.

Så hvorfor skulle du noen gang trenge en servicearbeider som sitter mellom appen din og brukerens nettleser? Igjen, vi har ingen kontroll over brukerens nettverkstilkobling. Si at forbindelsen gir seg av en eller annen ukjent grunn. Det ville bryte kommunikasjonen mellom nettleseren og serveren, og forhindre at data sendes frem og tilbake. En servicearbeider opprettholder tilkoblingen, og fungerer som en asynkron proxy som er i stand til å avskjære forespørsler og utføre oppgaver – selv etter at nettverkstilkoblingen er tapt.

Dette er hoveddriveren til det som ofte omtales som "offline-first" utvikling. Vi kan lagre eiendeler i den lokale hurtigbufferen i stedet for nettverket, gi kritisk informasjon hvis brukeren går offline, forhåndshente ting slik at de er klare når brukeren trenger dem, og gi tilbakefall som svar på nettverksfeil. De er helt asynkrone, men i motsetning til Web Sockets har de ingen tilgang til DOM siden de kjører på sine egne tråder.

Den andre store tingen å vite om Service Workers er at de fanger opp hver eneste forespørsel og svar fra appen din. Som sådan har de noen sikkerhetsimplikasjoner, spesielt at de følger en policy for samme opprinnelse. Så det betyr at du ikke kjører en tjenestearbeider fra en CDN eller tredjepartstjeneste. De krever også en sikker HTTPS-tilkobling, noe som betyr at du trenger et SSL-sertifikat for at de skal kunne kjøre.

Mer informasjon om servicearbeidere

Innpakning opp

Det er en forklaring på superhøyt nivå på forskjellene (og likhetene) mellom Web Sockets, Web Workers og Service Workers. Igjen, terminologien og konseptene er like nok til å blande den ene med den andre, men forhåpentligvis gir dette deg en bedre ide om hvordan du kan skille dem.

Vi startet ting med en rask referansetabell. Her er det samme, men litt utvidet for å trekke tykkere sammenligninger.

Trekk	Hva det er	Flertrådet?	HTTPS?	DOM-tilgang?
Web Socket	Etablerer en åpen og vedvarende toveisforbindelse mellom nettleseren og serveren for å sende og motta meldinger over en enkelt tilkobling utløst av hendelser.	Kjører på hovedtråden	Ikke obligatorisk	Ja
Webarbeider	Lar skript kjøres i bakgrunnen i separate tråder for å forhindre at skript blokkerer hverandre på hovedtråden.	Går på egen tråd	Påkrevd	Nei
tjenesten Worker	En type Web Worker som lager en bakgrunnstjeneste som fungerer mellomvare for håndtering av nettverksforespørsler mellom nettleseren og serveren, selv i frakoblede situasjoner.	Går på egen tråd	Påkrevd	Nei