Реалізація WebSockets для веб-додатків реального часу
Перш ніж ми розпочнемо, давайте спершу з’ясуємо одне – вам не потрібно панікувати. Жодному сокету не вдалося втекти, і ми абсолютно не втручаємося у чийсь “веб”. WebSockets – це просто протокол! І якщо це речення налякало вас більше, ніж мало вас заспокоїти, не хвилюйтеся. До кінця цього статті ви вже будите вільно володіти “мовою веб-розробника”.
Розшифрування жаргону: Що таке WebSockets?
Ось приклад прямо з вашого інтернет-життя, щоб пояснити WebSockets. Припустимо, ви відеочатите зі своїм другом. Ви ж не будете надсилати електронний лист кожного разу, коли хочете щось сказати, чи не так? Замість цього у вас буде реальний, двосторонній зв’язок у реальному часі. Це те, що роблять Websockets; вони дозволяють зв’язок в реальному часі між сервером і клієнтом.
Порівняно з традиційним HTTP, уявіть, що WebSockets – це той найкращий друг, який завжди тримає всі свої канали відкритими для вас, переконуючись, що ви отримуєте всі найновіші чутки, як тільки вони з’являються. Розгляньте це як покращення порівняно з тими “телефонними” днями інтернету!
Механізм роботи WebSockets
Перш ніж ви щось реалізуєте, корисно зрозуміти, як це працює, хоча й в спрощених термінах. Websockets починаються з традиційного з’єднання HTTP. Потім вони оновлюють цей протокол до протоколу WebSocket через те саме з’єднання.
Все ще зі мною? Гарно.
Отже, ось де починається веселощі. Після оновлення до WebSocket, це просте відношення HTTP перетворюється в постійне з’єднання! Це як підняття вашого відношення з сервером на новий рівень.
Тепер ви тільки що відкрили чіткий шлях для постійного обміну даними. Та зворотній зв’язок, який мав відбуватися з традиційним HTTP, зводиться до простої розмови з WebSockets.
Як реалізувати WebSockets у вашому веб-застосунку
Добре, люди. Досить теорій. Час для дій!
(Не забудьте мати порцію попкорну поруч, це буде цікаво.)
Крок 1: Встановлення WebSocket сервера
На жаль, знайомство з сервером не таке просте, як додавання його в друзі на Facebook. Просто кажучи, вашому серверу потрібно підтримувати протокол WebSocket.
Крок 2: Створення з’єднання на стороні клієнта
Далі вам потрібно створити об’єкт WebSocket у вашому JavaScript. Це схоже на ініціювання DM з вашим сервером і залишання його відкритим для всіх майбутніх повідомлень.
Крок 3: Обробка з’єднання з обробниками подій
Тут ви призначаєте завдання для різних обробників подій. Це схоже на те, що ви кажете їм “бути насторожі, і бути готовими отримувати або відправляти дані у будь-який час”.
Крок 4: Відправлення та закриття з’єднання
Ваш перший чат з сервером! Ви надсилаєте йому повідомлення через з’єднання WebSocket. І коли всі розмови закінчуються, ви ввічливо закриваєте з’єднання.
Великий результат
І ось воно! Веб-застосунок готовий на побачення з даними у реальному часі. Від онлайн-чатів та оновлень живих спортивних подій до онлайн-ігор для багатьох гравців, тепер всі оновлення будуть з’являтися миттєво. Через цю статтю ви пройшли високі хвилі мови веб-розробки, подружилися з WebSocket та навіть вдалося реалізувати його в робочому веб-застосунку. Відклоніться, хоробрі програмісти, ви це заслужили!
