Gniazda sieciowe, pracownicy sieciowi, pracownicy usług… to terminy, które mogłeś przeczytać lub podsłuchać. Może nie wszystkie, ale prawdopodobnie przynajmniej jeden. I nawet jeśli dobrze znasz się na programowaniu front-end, istnieje duża szansa, że musisz sprawdzić, co one oznaczają. A może jesteś taki jak ja i od czasu do czasu je mieszasz. Wszystkie terminy wyglądają i brzmią strasznie podobnie i naprawdę łatwo je pomylić.
Więc podzielmy je razem i rozróżnijmy Web Sockets, Web Worker i Service Worker. Nie w tym drobiazgowym sensie, w którym robimy głębokie nurkowanie i zdobywamy praktyczne doświadczenie z każdym z nich — bardziej jak mały pomocnik do zakładki następnym razem I potrzebujesz odświeżenia.
Krótki przegląd
Zaczniemy od ogólnego przeglądu w celu szybkiego porównania i kontrastu.
| Cecha | Co to jest |
|---|---|
| Gniazdo sieciowe | Ustanawia otwarte i trwałe dwukierunkowe połączenie między przeglądarką a serwerem w celu wysyłania i odbierania wiadomości za pośrednictwem jednego połączenia wyzwalanego przez zdarzenia. |
| Pracownik sieciowy | Umożliwia uruchamianie skryptów w tle w osobnych wątkach, aby zapobiec wzajemnemu blokowaniu się skryptów w głównym wątku. |
| usługa Worker | Typ narzędzia Web Worker, który tworzy usługę działającą w tle, działającą w ramach oprogramowania pośredniczącego w celu obsługi żądań sieciowych między przeglądarką a serwerem, nawet w sytuacjach offline. |
Gniazda sieciowe
Web Socket to dwukierunkowy protokół komunikacyjny. Pomyśl o tym jak o trwającej rozmowie między tobą a twoim przyjacielem, która nie zakończy się, chyba że jedno z was zdecyduje się rozłączyć. Jedyną różnicą jest to, że ty jesteś przeglądarką, a twój przyjaciel serwerem. Klient wysyła żądanie do serwera, a serwer odpowiada, przetwarzając żądanie klienta i odwrotnie.
Komunikacja opiera się na wydarzeniach. A WebSocket obiekt jest ustanawiany i łączy się z serwerem, a komunikaty między serwerami wyzwalają zdarzenia, które je wysyłają i odbierają.
Oznacza to, że po nawiązaniu początkowego połączenia mamy komunikację klient-serwer, w której połączenie jest inicjowane i utrzymywane, dopóki klient lub serwer nie zdecyduje się je zakończyć, wysyłając CloseEvent. To sprawia, że gniazda sieciowe są idealne dla aplikacji, które wymagają ciągłej i bezpośredniej komunikacji między klientem a serwerem. Większość definicji, które widziałem, określa aplikacje czatu jako typowy przypadek użycia — wpisujesz wiadomość, wysyłasz ją na serwer, uruchamiasz zdarzenie, a serwer odpowiada danymi bez konieczności ciągłego pingowania serwera.
Rozważ ten scenariusz: Jesteś na dobrej drodze i decydujesz się włączyć Mapy Google. Prawdopodobnie już wiesz, jak działają Mapy Google, ale jeśli tego nie zrobisz, po połączeniu się z aplikacją automatycznie wyszukuje Twoją lokalizację i śledzi ją, gdziekolwiek jesteś. Wykorzystuje transmisję danych w czasie rzeczywistym, aby śledzić Twoją lokalizację, dopóki to połączenie jest aktywne. To gniazdo sieciowe nawiązujące trwałą dwukierunkową konwersację między przeglądarką a serwerem, aby zapewnić aktualność tych danych. Aplikacja sportowa z wynikami w czasie rzeczywistym może również wykorzystywać w ten sposób Web Sockets.
Duża różnica między Web Sockets a Web Workerami (a także, jak zobaczymy, Service Workerami) polega na tym, że mają bezpośredni dostęp do DOM. Podczas gdy Web Workery (i Service Workery) działają w osobnych wątkach, Web Sockets są częścią głównego wątku, co daje im możliwość manipulowania DOM.
Istnieją narzędzia i usługi ułatwiające nawiązywanie i utrzymywanie połączeń Web Socket, w tym: Klaster gniazd, Asynchroniczny interfejs API, kowboj, Król gniazd sieciowych, Kanały, Gorilla WebSocket. MDN ma lista bieżąca zawierająca inne usługi.
Więcej informacji o gniazdach sieciowych
Pracownicy sieci
Rozważ scenariusz, w którym musisz wykonać kilka złożonych obliczeń, jednocześnie wprowadzając zmiany w DOM. JavaScript jest aplikacją jednowątkową i uruchomienie więcej niż jednego skryptu może zakłócić interfejs użytkownika, w którym próbujesz wprowadzić zmiany, a także wykonywane złożone obliczenia.
W tym miejscu do gry wkraczają Web Workers.
Web Workers umożliwiają uruchamianie skryptów w tle w oddzielnych wątkach, aby zapobiec wzajemnemu blokowaniu się skryptów w głównym wątku. Dzięki temu doskonale nadają się do zwiększania wydajności aplikacji wymagających intensywnych operacji, ponieważ operacje te można wykonywać w tle w osobnych wątkach bez wpływu na interfejs użytkownika podczas renderowania. Ale nie są tak dobre w dostępie do DOM, ponieważ, w przeciwieństwie do gniazd sieciowych, pracownik sieciowy działa poza głównym wątkiem we własnym wątku.
Web Worker to obiekt, który wykonuje plik skryptu za pomocą Worker obiekt do wykonania zadań. A kiedy mówimy o pracownikach, zwykle dzielą się na jeden z trzech typów:
- Oddani pracownicy: Oddany pracownik jest w zasięgu tylko skryptu, który go wywołuje. Nadal wykonuje zadania typowego pracownika sieci Web, takie jak skrypty wielowątkowe.
- Współdzieleni pracownicy: Współdzielony pracownik jest przeciwieństwem oddanego pracownika. Można do niego uzyskać dostęp za pomocą wielu skryptów i może praktycznie wykonać każde zadanie, które wykonuje pracownik sieciowy, o ile istnieje w tej samej domenie co pracownik.
- Pracownicy usług: Service Worker działa jako sieciowy serwer proxy między aplikacją, przeglądarką i serwerem, umożliwiając uruchamianie skryptów nawet w przypadku, gdy sieć przechodzi w tryb offline. Zajmiemy się tym w następnej sekcji.
Więcej informacji o pracownikach internetowych
Pracownicy usługowi
Są pewne rzeczy, nad którymi jako programiści nie mamy kontroli, a jedną z nich jest połączenie sieciowe użytkownika. Niezależnie od sieci, z którą łączy się użytkownik, jest tym, czym jest. Możemy zrobić wszystko, co w naszej mocy, aby zoptymalizować nasze aplikacje, aby działały najlepiej, jak potrafią, na dowolnym używanym połączeniu.
Service Workers to jedna z rzeczy, które możemy zrobić, aby stopniowo zwiększać wydajność aplikacji. Service worker znajduje się między aplikacją, przeglądarką i serwerem, zapewniając bezpieczne połączenie, które działa w tle w osobnym wątku, dzięki — zgadłeś — Web Workers. Jak dowiedzieliśmy się w poprzedniej sekcji, Service Workery są jednym z trzech typów Web Workerów.
Dlaczego więc miałbyś kiedykolwiek potrzebować pracownika serwisu siedzącego między Twoją aplikacją a przeglądarką użytkownika? Ponownie nie mamy kontroli nad połączeniem sieciowym użytkownika. Powiedzmy, że połączenie się rozpada z jakiegoś nieznanego powodu. Spowodowałoby to przerwanie komunikacji między przeglądarką a serwerem, uniemożliwiając przekazywanie danych tam iz powrotem. Service Worker utrzymuje połączenie, działając jako asynchroniczny serwer proxy, który może przechwytywać żądania i wykonywać zadania — nawet po utracie połączenia sieciowego.
Jest to główna przyczyna tego, co często określa się jako rozwój „offline-first”. Możemy przechowywać zasoby w lokalnej pamięci podręcznej zamiast w sieci, dostarczać krytyczne informacje, jeśli użytkownik przejdzie w tryb offline, wstępnie pobierać rzeczy, aby były gotowe, gdy użytkownik ich potrzebuje, i zapewniać awaryjne w odpowiedzi na błędy sieciowe. Są w pełni asynchroniczne, ale w przeciwieństwie do gniazd sieciowych nie mają dostępu do DOM, ponieważ działają we własnych wątkach.
Inną ważną rzeczą, którą należy wiedzieć o Service Workers, jest to, że przechwytują każde żądanie i odpowiedź z Twojej aplikacji. W związku z tym mają pewne implikacje dla bezpieczeństwa, w szczególności, że stosują politykę tego samego pochodzenia. Oznacza to, że nie ma uruchamiania usługi Service Worker z CDN lub usługi innej firmy. Wymagają również bezpiecznego połączenia HTTPS, co oznacza, że do ich uruchomienia potrzebny jest certyfikat SSL.
Więcej informacji o pracownikach serwisu
Zamykając
To bardzo wysokopoziomowe wyjaśnienie różnic (i podobieństw) między Web Sockets, Web Workerami i Service Workerami. Ponownie, terminologia i koncepcje są na tyle podobne, że można je pomylić z innymi, ale miejmy nadzieję, że daje to lepsze wyobrażenie o tym, jak je rozróżnić.
Rozpoczęliśmy od szybkiej tabeli referencyjnej. Oto ta sama rzecz, ale nieco rozszerzona, aby uzyskać grubsze porównania.
| Cecha | Co to jest | Wielowątkowy? | HTTPS? | Dostęp DOM? |
|---|---|---|---|---|
| Gniazdo sieciowe | Ustanawia otwarte i trwałe dwukierunkowe połączenie między przeglądarką a serwerem w celu wysyłania i odbierania wiadomości za pośrednictwem jednego połączenia wyzwalanego przez zdarzenia. | Działa na głównym wątku | Nie wymagane | Tak |
| Pracownik sieciowy | Umożliwia uruchamianie skryptów w tle w osobnych wątkach, aby zapobiec wzajemnemu blokowaniu się skryptów w głównym wątku. | Działa na osobnym wątku | Wymagane | Nie |
| usługa Worker | Typ narzędzia Web Worker, który tworzy usługę działającą w tle, działającą w ramach oprogramowania pośredniczącego w celu obsługi żądań sieciowych między przeglądarką a serwerem, nawet w sytuacjach offline. | Działa na osobnym wątku | Wymagane | Nie |
