Веб-сокети, веб-воркери, сервіс-воркери… це терміни, які ви, можливо, читали або чули. Можливо, не всі, але, ймовірно, принаймні один із них. І навіть якщо ви добре розбираєтеся в інтерфейсній розробці, є велика ймовірність, що вам потрібно буде дізнатися, що вони означають. Або, можливо, ви схожі на мене і час від часу змішуєте їх. Усі терміни виглядають і звучать дуже схожі, і їх дуже легко сплутати.
Отже, давайте розберемо їх разом і виділимо Web Sockets, Web Workers і Service Workers. Не в тому сенсі, коли ми глибоко занурюємось і отримуємо практичний досвід роботи з кожним із них — більше як маленький помічник, щоб зробити закладку наступного разу I тобі потрібно освіжитися.
Короткий довідник
Ми почнемо з загального огляду для швидкого порівняння та порівняння.
| особливість | Що це |
|---|---|
| Веб-розетка | Встановлює відкрите та постійне двостороннє з’єднання між браузером і сервером для надсилання та отримання повідомлень через одне з’єднання, викликане подіями. |
| Веб-працівник | Дозволяє сценаріям запускатися у фоновому режимі в окремих потоках, щоб сценарії не блокували один одного в основному потокі. |
| сервіс працівник | Тип веб-працівника, який створює фонову службу, яка виконує проміжне програмне забезпечення для обробки мережевих запитів між браузером і сервером, навіть в автономних ситуаціях. |
Веб-розетки
Веб-сокет — це протокол двостороннього зв’язку. Уявіть це як постійний дзвінок між вами та вашим другом, який не завершиться, доки один із вас не вирішить покласти трубку. Єдина відмінність полягає в тому, що ви — браузер, а ваш друг — сервер. Клієнт надсилає запит серверу, а сервер відповідає, обробляючи запит клієнта, і навпаки.
Спілкування базується на подіях. А WebSocket об’єкт встановлений і підключається до сервера, а повідомлення між сервером ініціюють події, які надсилають і отримують їх.
Це означає, що коли встановлюється початкове з’єднання, ми маємо зв’язок клієнт-сервер, де з’єднання ініціюється та підтримується, доки клієнт або сервер не вирішать розірвати його, надіславши CloseEvent. Це робить веб-сокети ідеальними для додатків, які вимагають постійного та прямого зв’язку між клієнтом і сервером. Більшість визначень, які я бачив, викликають програми чату як звичайний випадок використання — ви вводите повідомлення, надсилаєте його на сервер, ініціюєте подію, і сервер відповідає даними без необхідності знову і знову перевіряти сервер.
Розглянемо цей сценарій: ви збираєтесь і вирішуєте ввімкнути Карти Google. Ви, мабуть, уже знаєте, як працює Google Maps, але якщо ні, воно автоматично знаходить ваше місцезнаходження після підключення до програми та відстежує його, куди б ви не були. Він використовує передачу даних у реальному часі, щоб відстежувати ваше місцезнаходження, доки це з’єднання активне. Це веб-сокет, який встановлює постійну двосторонню розмову між браузером і сервером, щоб підтримувати дані в актуальному стані. Спортивна програма з результатами в реальному часі також може використовувати веб-сокети таким чином.
Велика різниця між Web Sockets і Web Workers (і, за розширенням, як ми побачимо, Service Workers) полягає в тому, що вони мають прямий доступ до DOM. У той час як Web Workers (і Service Workers) працюють в окремих потоках, Web Sockets є частиною основного потоку, що дає їм можливість маніпулювати DOM.
Існують інструменти та служби, які допомагають установлювати та підтримувати з’єднання Web Socket, зокрема: SocketCluster, AsyncAPI, ковбой, WebSocket King, Канали та Gorilla WebSocket. MDN має a поточний список, який включає інші служби.
Більше інформації про Web Sockets
Веб -працівники
Розглянемо сценарій, коли вам потрібно виконати купу складних обчислень, одночасно вносячи зміни в DOM. JavaScript — це однопотокова програма, і запуск кількох сценаріїв може порушити роботу інтерфейсу користувача, який ви намагаєтесь змінити, а також виконати складні обчислення.
Ось тут вступають у гру Web Workers.
Web Workers дозволяють сценаріям виконуватися у фоновому режимі в окремих потоках, щоб запобігти блокуванню сценаріями один одного в основному потоці. Це робить їх чудовими для підвищення продуктивності додатків, які вимагають інтенсивних операцій, оскільки ці операції можна виконувати у фоновому режимі в окремих потоках, не впливаючи на рендеринг інтерфейсу користувача. Але вони не настільки чудові для доступу до DOM, тому що, на відміну від Web Sockets, веб-воркер працює поза основним потоком у своєму власному потоці.
Web Worker — це об’єкт, який виконує файл сценарію за допомогою a Worker об'єкт для виконання завдань. І коли ми говоримо про працівників, вони, як правило, поділяються на один із трьох типів:
- Віддані працівники: Відданий працівник доступний лише скрипту, який його викликає. Він все ще виконує завдання типового веб-воркера, як-от його багатопотокові сценарії.
- Спільні працівники: Спільний працівник є протилежністю відданого працівника. До нього можна отримати доступ за допомогою кількох сценаріїв, і він може практично виконувати будь-яке завдання, яке виконує веб-воркер, якщо він існує в тому самому домені, що й робочий.
- Обслуговуючі працівники: Service Worker діє як мережевий проксі-сервер між програмою, браузером і сервером, дозволяючи сценаріям запускатися навіть у випадку, коли мережа перебуває в автономному режимі. Ми поговоримо про це в наступному розділі.
Більше інформації про Web Workers
Службовці
Ми як розробники не маємо контролю над деякими речами, і одна з них – це підключення користувача до мережі. До якої б мережі не підключився користувач, вона є такою. Ми можемо лише зробити все можливе, щоб оптимізувати наші програми, щоб вони працювали якнайкраще під час будь-якого підключення, яке використовується.
Service Workers — це одна з речей, які ми можемо зробити для поступового підвищення продуктивності програми. Service Worker знаходиться між програмою, браузером і сервером, забезпечуючи безпечне з’єднання, яке працює у фоновому режимі в окремому потоці, завдяки — як ви здогадалися — Web Workers. Як ми дізналися в останньому розділі, Service Workers є одним із трьох типів Web Worker.
Отже, навіщо вам взагалі потрібен сервіс-воркер між вашою програмою та браузером користувача? Знову ж таки, ми не маємо контролю над підключенням користувача до мережі. Скажімо, зв'язок переривається з невідомої причини. Це призведе до порушення зв’язку між браузером і сервером, запобігаючи передачі даних туди-сюди. Service Worker підтримує з’єднання, діючи як асинхронний проксі-сервер, здатний перехоплювати запити та виконувати завдання — навіть після втрати з’єднання з мережею.
Це основний рушійний фактор того, що часто називають «офлайн-перша» розробка. Ми можемо зберігати ресурси в локальному кеші замість мережі, надавати важливу інформацію, якщо користувач переходить у мережу, попередньо завантажувати дані, щоб вони були готові, коли вони потрібні користувачу, і забезпечувати резервні варіанти у відповідь на помилки мережі. Вони повністю асинхронні, але, на відміну від веб-сокетів, вони не мають доступу до DOM, оскільки працюють у власних потоках.
Інша важлива річ, яку варто знати про Service Workers, це те, що вони перехоплюють кожен запит і відповідь від вашої програми. Таким чином, вони мають певні наслідки для безпеки, зокрема те, що вони дотримуються політики однакового походження. Отже, це означає, що не можна запускати сервіс-воркер із CDN або сторонньої служби. Їм також потрібне безпечне з’єднання HTTPS, що означає, що для їх роботи вам знадобиться сертифікат SSL.
Більше інформації про сервісних працівників
Підводячи підсумок
Це надзвичайно високорівневе пояснення відмінностей (і схожості) між Web Sockets, Web Workers і Service Workers. Знову ж таки, термінологія та поняття досить схожі, щоб змішувати одне з одним, але, сподіваюся, це дає вам краще уявлення про те, як їх розрізняти.
Ми розпочали роботу зі швидкої довідкової таблиці. Ось те саме, але трохи розширено, щоб зробити більш товсті порівняння.
| особливість | Що це | Багатопотоковий? | HTTPS? | Доступ до DOM? |
|---|---|---|---|---|
| Веб-розетка | Встановлює відкрите та постійне двостороннє з’єднання між браузером і сервером для надсилання та отримання повідомлень через одне з’єднання, викликане подіями. | Виконується на основному потоці | Не потрібно | Так |
| Веб-працівник | Дозволяє сценаріям запускатися у фоновому режимі в окремих потоках, щоб сценарії не блокували один одного в основному потокі. | Виконується в окремому потоці | Вимагається | Немає |
| сервіс працівник | Тип веб-працівника, який створює фонову службу, яка виконує проміжне програмне забезпечення для обробки мережевих запитів між браузером і сервером, навіть в автономних ситуаціях. | Виконується в окремому потоці | Вимагається | Немає |
