Web Sockets, Web Workers, Service Workers… nämä ovat termejä, jotka olet ehkä lukenut tai kuullut. Ei ehkä kaikki, mutta todennäköisesti ainakin yksi. Ja vaikka sinulla olisi hyvä käsitys etupään kehittämisestä, sinun on hyvä mahdollisuus tarkistaa, mitä ne tarkoittavat. Tai ehkä olet kuin minä ja sekoitat niitä aika ajoin. Kaikki termit näyttävät ja kuulostavat hirvittävän samanlaisilta, ja ne on todella helppo sekoittaa.
Joten, jaetaan ne yhdessä ja erottelemme Web Socketit, Web Workersit ja Service Workersit. Ei siinä tiukassa merkityksessä, jossa sukeltamme syvälle ja saamme käytännön kokemusta jokaisen kanssa – enemmän kuin pieni apulainen kirjanmerkkeihin seuraavan kerran I tarvitset virkistystä.
Nopea viittaus
Aloitamme korkean tason yleiskatsauksella nopeaa vertailua ja kontrastia varten.
| Ominaisuus | Mikä se on |
|---|---|
| Web Socket | Muodostaa avoimen ja jatkuvan kaksisuuntaisen yhteyden selaimen ja palvelimen välille viestien lähettämiseksi ja vastaanottamiseksi yhden tapahtumien laukaiseman yhteyden kautta. |
| Verkkotyöntekijä | Sallii komentosarjojen ajaa taustalla eri säikeissä, jotta skriptit eivät estä toisiaan pääsäikeessä. |
| palvelu Worker | Web Worker -tyyppi, joka luo taustapalvelun, joka toimii väliohjelmistona verkkopyyntöjen käsittelemiseksi selaimen ja palvelimen välillä, myös offline-tilanteissa. |
Verkkoliittimet
Web Socket on kaksisuuntainen viestintäprotokolla. Ajattele tätä jatkuvana puheluna sinun ja ystäväsi välillä, joka ei lopu, ellei joku teistä päätä katkaista puhelinta. Ainoa ero on, että sinä olet selain ja ystäväsi on palvelin. Asiakas lähettää pyynnön palvelimelle ja palvelin vastaa käsittelemällä asiakkaan pyyntöä ja päinvastoin.
Viestintä perustuu tapahtumiin. A WebSocket objekti muodostetaan ja muodostaa yhteyden palvelimeen, ja palvelimen väliset viestit laukaisevat tapahtumia, jotka lähettävät ja vastaanottavat niitä.
Tämä tarkoittaa, että kun ensimmäinen yhteys muodostetaan, meillä on asiakas-palvelin-kommunikaatio, jossa yhteys aloitetaan ja pidetään yllä, kunnes joko asiakas tai palvelin päättää katkaista sen lähettämällä CloseEvent. Tämä tekee Web Socketista ihanteellisen sovelluksille, jotka vaativat jatkuvaa ja suoraa viestintää asiakkaan ja palvelimen välillä. Useimmat määritelmät, joita olen nähnyt, kutsuvat chat-sovelluksia yleiseksi käyttötapaukseksi – kirjoitat viestin, lähetät sen palvelimelle, käynnistät tapahtuman, ja palvelin vastaa tiedoilla ilman, että sinun tarvitsee pingata palvelinta yhä uudelleen.
Harkitse tätä skenaariota: Olet matkalla ulos ja päätät ottaa Google Mapsin käyttöön. Tiedät todennäköisesti jo, kuinka Google Maps toimii, mutta jos et tiedä, se löytää sijaintisi automaattisesti, kun muodostat yhteyden sovellukseen, ja seuraa sitä missä tahansa menetkin. Se käyttää reaaliaikaista tiedonsiirtoa sijaintisi seuraamiseen niin kauan kuin tämä yhteys on elossa. Se on Web Socket, joka luo jatkuvan kaksisuuntaisen keskustelun selaimen ja palvelimen välillä tietojen pitämiseksi ajan tasalla. Urheilusovellus, jossa on reaaliaikaiset tulokset, saattaa myös hyödyntää Web Socketsia tällä tavalla.
Suuri ero Web Socketsin ja Web Workersin (ja laajemmin, kuten näemme, Service Workersin) välillä on, että heillä on suora pääsy DOM:iin. Kun Web Workers (ja Service Workers) toimivat erillisissä säikeissä, Web Sockets ovat osa pääsäiettä, joka antaa heille mahdollisuuden käsitellä DOM:ia.
On olemassa työkaluja ja palveluita, jotka auttavat luomaan ja ylläpitämään Web Socket -yhteyksiä, mukaan lukien: SocketCluster, AsyncAPI, cowboy, WebSocket King, Kanavatja Gorilla WebSocket. MDN:llä on a käynnissä oleva luettelo, joka sisältää muita palveluita.
Lisätietoja Web Socketista
Verkkotyöntekijät
Harkitse skenaariota, jossa sinun on suoritettava joukko monimutkaisia laskelmia ja samalla tehtävä muutoksia DOM:iin. JavaScript on yksisäikeinen sovellus, ja useamman kuin yhden skriptin suorittaminen saattaa häiritä käyttöliittymää, johon yrität tehdä muutoksia, sekä suoritettavaa monimutkaista laskutoimitusta.
Tässä Web Workers -työntekijät tulevat esiin.
Web Workers sallii komentosarjojen ajamisen taustalla erillisissä säikeissä, jotta skriptit eivät estä toisiaan pääsäikeessä. Tämä tekee niistä erinomaiset tehostaa intensiivistä toimintaa vaativien sovellusten suorituskykyä, koska nämä toiminnot voidaan suorittaa taustalla erillisissä säikeissä vaikuttamatta käyttöliittymän hahmontamiseen. Mutta he eivät ole niin hyviä pääsemään DOM:iin, koska toisin kuin Web Sockets, verkkotyöntekijä toimii pääsäikeen ulkopuolella omassa säikeessään.
Web Worker on objekti, joka suorittaa komentosarjatiedoston käyttämällä a Worker vastustaa tehtävien suorittamista. Ja kun puhumme työntekijöistä, he yleensä jakautuvat johonkin kolmesta tyypistä:
- Asialliset työntekijät: Omistautunut työntekijä on vain sitä kutsuvan skriptin ulottuvilla. Se suorittaa edelleen tyypillisen verkkotyöntekijän tehtäviä, kuten monisäikeisiä komentosarjoja.
- Jaetut työntekijät: Jaettu työntekijä on omistautuneen työntekijän vastakohta. Sitä voidaan käyttää useilla skripteillä, ja se voi käytännössä suorittaa minkä tahansa verkkotyöntekijän suorittaman tehtävän, kunhan ne ovat samassa toimialueella kuin työntekijä.
- Palvelutyöntekijät: Palvelutyöntekijä toimii verkon välityspalvelimena sovelluksen, selaimen ja palvelimen välillä, mikä mahdollistaa komentosarjojen suorittamisen myös silloin, kun verkko on offline-tilassa. Siirrymme tähän seuraavassa osiossa.
Lisää tietoa verkkotyöntekijöistä
Palvelutyöntekijät
On joitain asioita, joihin emme kehittäjinä voi vaikuttaa, ja yksi niistä on käyttäjän verkkoyhteys. Mikä tahansa verkko, johon käyttäjä muodostaa yhteyden, on mitä se on. Voimme vain tehdä parhaamme optimoidaksemme sovelluksemme niin, että ne toimivat parhaiten missä tahansa käytössä olevalla yhteydellä.
Palvelutyöntekijät ovat yksi niistä asioista, joita voimme tehdä sovelluksen suorituskyvyn asteittain parantamiseksi. Palvelutyöntekijä istuu sovelluksen, selaimen ja palvelimen välissä ja tarjoaa suojatun yhteyden, joka toimii taustalla erillisessä säikeessä, kiitos – arvasit sen – Web Workersin. Kuten viime osiossa opimme, palvelutyöntekijät ovat yksi kolmesta verkkotyöntekijätyypistä.
Joten miksi tarvitset palvelutyöntekijää sovelluksesi ja käyttäjän selaimen välissä? Jälleen kerran, emme voi hallita käyttäjän verkkoyhteyttä. Oletetaan, että yhteys katkeaa jostain tuntemattomasta syystä. Tämä katkaisisi tiedonsiirron selaimen ja palvelimen välillä ja estäisi tietojen välittämisen edestakaisin. Palvelutyöntekijä ylläpitää yhteyttä ja toimii asynkronisena välityspalvelimena, joka pystyy sieppaamaan pyyntöjä ja suorittamaan tehtäviä – jopa verkkoyhteyden katkeamisen jälkeen.
Tämä on tärkein syy siihen, mitä usein kutsutaan "offline-ensimmäinen" kehitys. Voimme tallentaa resurssit paikalliseen välimuistiin verkon sijaan, tarjota tärkeitä tietoja, jos käyttäjä siirtyy offline-tilaan, esihakua asioita, jotta ne ovat valmiita, kun käyttäjä niitä tarvitsee, ja tarjota varatoimia verkon virheiden varalta. Ne ovat täysin asynkronisia, mutta toisin kuin Web Socketsilla, niillä ei ole pääsyä DOM:iin, koska ne toimivat omissa säikeissään.
Toinen suuri asia, joka on hyvä tietää Service Workersista, on se, että he sieppaavat jokaisen sovelluksesi pyynnön ja vastauksen. Sellaisenaan niillä on joitain turvallisuusvaikutuksia, erityisesti se, että ne noudattavat samaa alkuperää koskevaa politiikkaa. Tämä tarkoittaa, että palvelutyöntekijää ei käytetä CDN:stä tai kolmannen osapuolen palvelusta. Ne vaativat myös suojatun HTTPS-yhteyden, mikä tarkoittaa, että tarvitset SSL-varmenteen toimiakseen.
Lisätietoja palvelutyöntekijöistä
Käärimistä
Tämä on erittäin korkeatasoinen selitys Web Socketsin, Web Workersin ja Service Workersin välisistä eroista (ja yhtäläisyyksistä). Jälleen, terminologia ja käsitteet ovat riittävän samankaltaisia sekoittaakseen ne toisiinsa, mutta toivottavasti tämä antaa sinulle paremman käsityksen siitä, miten ne erotetaan toisistaan.
Aloitimme asiat pikaviittaustaulukolla. Tässä sama asia, mutta hieman laajennettuna, jotta voidaan tehdä paksumpia vertailuja.
| Ominaisuus | Mikä se on | Monisäikeinen? | HTTPS? | DOM-käyttö? |
|---|---|---|---|---|
| Web Socket | Muodostaa avoimen ja jatkuvan kaksisuuntaisen yhteyden selaimen ja palvelimen välille viestien lähettämiseksi ja vastaanottamiseksi yhden tapahtumien laukaiseman yhteyden kautta. | Toimii päälangalla | Ei tarvita | Kyllä |
| Verkkotyöntekijä | Sallii komentosarjojen ajaa taustalla eri säikeissä, jotta skriptit eivät estä toisiaan pääsäikeessä. | Toimii erillisessä säikeessä | edellytetään | Ei |
| palvelu Worker | Web Worker -tyyppi, joka luo taustapalvelun, joka toimii väliohjelmistona verkkopyyntöjen käsittelemiseksi selaimen ja palvelimen välillä, myös offline-tilanteissa. | Toimii erillisessä säikeessä | edellytetään | Ei |
