WebSocket: що це, протокол повнодуплексного зв'язку і як працює

Що таке WebSocket?

WebSocket — це протокол зв'язку, що працює поверх TCP і забезпечує повнодуплексний канал між клієнтом і сервером. Він стандартизований організацією IETF як RFC 6455 у 2011 році та підтримується всіма сучасними браузерами, мобільними платформами та серверними фреймворками.

На відміну від HTTP, де клієнт ініціює запит і отримує відповідь, WebSocket дозволяє обом сторонам надсилати повідомлення в будь-який момент після встановлення з'єднання. Це робить його ідеальним для сценаріїв, що вимагають миттєвої доставки даних: чати, сповіщення, спільне редагування документів.

Протокол WebSocket використовує HTTP-порт 80 або HTTPS-порт 443 для початкового handshake, після чого перемикається на власний протокол із мінімальним заголовком — всього 2 байти замість 800+ байт у HTTP. Ця особливість дає значний виграш у продуктивності при великій кількості повідомлень.

Ключові характеристики протоколу

З'єднання WebSocket починається з HTTP-запиту на оновлення (Upgrade), після чого протокол перемикається на двійковий фреймовий формат. Розмір фрейму варіюється від 2 байт до 2^63 байт, що дозволяє передавати як короткі текстові повідомлення, так і великі двійкові дані. Підтримується фрагментація повідомлень, маскування даних від клієнта до сервера та ping/pong для підтримки з'єднання.

Як працює WebSocket?

Процес встановлення з'єднання WebSocket складається з двох етапів: handshake та передача даних. На етапі handshake клієнт надсилає HTTP-запит із заголовком Upgrade: websocket, а сервер підтверджує перемикання протоколу статусом 101 Switching Protocols. Після цього з'єднання переходить у режим повнодуплексної передачі.

Кожне повідомлення в WebSocket розбивається на фрейми. Фрейм містить opcode (текст, двійкові дані, закриття, ping/pong), довжину payload та маскувальний ключ для даних від клієнта. Фрейм може бути фрагментований — контрольні фрейми (ping/pong) можуть передаватися між фрагментами повідомлення, що запобігає розриву з'єднання при тривалій передачі.

const ws = new WebSocket('wss://example.com/chat')

ws.addEventListener('open', () => {
    console.log('З'єднання встановлено')
    ws.send('Привіт, сервере!')
})

ws.addEventListener('message', (event) => {
    console.log('Отримано:', event.data)
})

ws.addEventListener('close', () => {
    console.log('З'єднання закрито')
})

У наведеному прикладі клієнт створює об'єкт WebSocket, вказуючи захищений URL wss://. Після відкриття з'єднання надсилається вітальне повідомлення, а обробник message приймає відповіді від сервера. При закритті спрацьовує обробник close — це важливо для перепідключення при обриві мережі.

WebSocket vs HTTP: порівняння

Основна відмінність між WebSocket і HTTP полягає в моделі взаємодії. HTTP працює за схемою запит-відповідь: клієнт ініціює запит, сервер повертає відповідь, з'єднання закривається. WebSocket же встановлює постійний канал, по якому обидві сторони можуть ініціювати передачу в будь-який момент.

Для додатків, де потрібна низька затримка та постійний потік даних, WebSocket значно ефективніший. HTTP Long Polling — альтернатива, при якій сервер утримує запит відкритим до появи даних — створює надмірне навантаження на сервер і збільшує споживання пам'яті через множинні одночасні з'єднання.

За даними High Performance Browser Networking (Grigorik, O'Reilly), WebSocket скорочує мережеві затримки в real-time сценаріях на 40–60% порівняно з HTTP Long Polling, а навантаження на сервер знижується в 3–5 разів завдяки усуненню повторних handshake.

Де застосовується WebSocket

Завдяки низькій затримці та двосторонньому зв'язку, WebSocket використовується в широкому спектрі додатків. Ключові сценарії включають миттєвий обмін повідомленнями, синхронізацію стану в іграх та передачу ринкових даних у фінансових системах.

Чати та месенджери

WebSocket став стандартом де-факто для чат-додатків. Такі платформи, як Slack, Telegram Web і WhatsApp Web, використовують WebSocket для миттєвої доставки повідомлень. Протокол дозволяє надсилати як текстові повідомлення, так і файли через єдиний канал, а механізм ping/pong підтримує з'єднання активним навіть при відсутності активності.

Онлайн-ігри

Багатокористувацькі браузерні та мобільні ігри потребують мінімальної затримки для синхронізації стану гравців. WebSocket передає координати, дії та події в реальному часі без затримок HTTP-запитів. Фреймворки на кшталт Socket.IO та Colyseus абстрагують низькорівневу роботу з протоколом, додаючи автоматичне перепідключення та кімнати.

Фінансові додатки

Біржові термінали та трейдингові платформи використовують WebSocket для отримання котирувань у реальному часі. Затримка в кілька мілісекунд може коштувати мільйони доларів, тому фінансові API — наприклад, Binance WebSocket Streams, Coinbase Pro — надають саме WebSocket-інтерфейси для ринкових даних.

Мобільні додатки та IoT

У мобільній розробці WebSocket використовується через нативні API: URLSessionWebSocketTask на iOS та OkHttp WebSocket на Android. Для Flutter існує бібліотека web_socket_channel, а для React Native — react-native-websocket. IoT-пристрої застосовують WebSocket для передачі телеметрії та отримання команд керування, оскільки протокол споживає менше енергії, ніж постійний HTTP-polling.

Приклади коду WebSocket

Розглянемо приклад серверної частини на Node.js з бібліотекою ws — найбільш популярною реалізацією WebSocket для JavaScript. Сервер приймає підключення, обробляє повідомлення та транслює їх усім підключеним клієнтам.

const WebSocket = require('ws')
const wss = new WebSocket.Server({ port: 8080 })

wss.on('connection', (ws) => {
    console.log('Новий клієнт підключений')

    ws.on('message', (data) => {
        console.log('Отримано:', data.toString())
        ws.send('Сервер отримав ваше повідомлення')
    })

    ws.on('close', () => {
        console.log('Клієнт відключений')
    })
})

console.log('WebSocket сервер запущено на порту 8080')

Сервер створює екземпляр WebSocket.Server на порту 8080 і очікує підключення. Кожному новому клієнту призначається окремий об'єкт ws, через який сервер може надсилати повідомлення індивідуально. Трансляція повідомлень усім клієнтам реалізується через масовий обхід масиву підключень. При великій кількості клієнтів (понад 1000) рекомендується використовувати бібліотеки з підтримкою кластеризації, такі як Socket.IO, які додають масштабування через Redis та автоматичне перепідключення.

Надсилання повідомлень усім клієнтам

wss.clients.forEach((client) => {
    if (client.readyState === WebSocket.OPEN) {
        client.send('Повідомлення для всіх учасників')
    }
})

Перевірка readyState перед надсиланням обов'язкова: якщо клієнт уже відключився, виклик send викине помилку. Прапорець WebSocket.OPEN гарантує, що з'єднання активне і повідомлення буде доставлено.

Для мобільних iOS-додатків WebSocket реалізується через URLSessionWebSocketTask, доступний з iOS 13. Сесія створює завдання з URL протоколу wss://, після чого викликаються методи send та receive. Отримання повідомлень можна організувати через безперервну рекурсію receive, яка очікує наступне повідомлення після обробки попереднього, що забезпечує постійний прийом даних без повторного підключення. Для Android використовується OkHttp WebSocket, який надає аналогічний інтерфейс із колбеками onOpen, onMessage, onClosing та onClosed, а також автоматичне перепідключення при обриві з'єднання.

При роботі з WebSocket у мобільних додатках важливо враховувати управління життєвим циклом: при переході додатка у фон з'єднання може бути розірвано системою. На iOS необхідно перевстановлювати з'єднання при поверненні у foreground через делегат sceneDidBecomeActive. На Android слід використовувати Lifecycle-aware компоненти або Service для підтримки з'єднання. Додатково рекомендується реалізувати exponential backoff при перепідключенні — збільшувати інтервал між спробами з 1 до 30 секунд, щоб не створювати надмірне навантаження на сервер при тимчасових проблемах мережі.