WebSocket: що це і як він працює?

Що таке WebSocket?

WebSocket – це протокол зв’язку, який забезпечує постійне двостороннє з’єднання між клієнтом (браузером) і сервером. Він дозволяє передавати дані в реальному часі без необхідності повторного відкриття з’єднання.

🔹 На відміну від HTTP, WebSocket забезпечує безперервний обмін даними, що робить його ідеальним для чатів, онлайн-ігор, біржових торгів, live-стрімінгу та інших інтерактивних веб-додатків.

---

Як працює WebSocket?

Робота WebSocket складається з чотирьох основних етапів:

1. Встановлення з’єднання (handshake)

З’єднання починається через HTTP-запит із заголовком Upgrade: websocket. Сервер розпізнає його і переключає з’єднання на WebSocket-протокол.

📌 Запит від клієнта (браузера):

GET /chat HTTP/1.1
Host: example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==
Sec-WebSocket-Version: 13

📌 Відповідь сервера:

HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=

✅ Після цього з’єднання залишається відкритим для обміну повідомленнями без потреби в нових HTTP-запитах.

---

2. Двосторонній обмін даними

Після встановлення WebSocket-з’єднання сервер і клієнт можуть надсилати дані один одному в обох напрямках без затримок.

• Клієнт може вільно відправляти повідомлення на сервер.
• Сервер може миттєво відповідати клієнту або надсилати оновлення.

📌 Приклад надсилання повідомлення:

socket.send("Привіт, сервер!");

📌 Приклад отримання повідомлення:

socket.onmessage = function(event) {
    console.log("Отримано повідомлення: " + event.data);
};

---

3. Підтримка з’єднання

Поки клієнт і сервер не закриють з’єднання, WebSocket залишається активним. Для підтримки зв’язку часто використовують ping/pong-пакети, які перевіряють, чи обидві сторони ще в мережі.

📌 Сервер надсилає ping-запит:

socket.ping();

📌 Клієнт відповідає pong-відповіддю:

socket.on('ping', () => socket.pong());

---

4. Закриття з’єднання

З’єднання можна закрити будь-якою зі сторін (клієнтом або сервером).

📌 Клієнт закриває з’єднання:

socket.close();

📌 Сервер закриває з’єднання:

ws.close(1000, "Користувач вийшов");

✅ Після цього жодні дані більше не передаються.

---

WebSocket vs HTTP: в чому різниця?

Характеристика	HTTP	WebSocket
Тип зв’язку	Одноразові запити-відповіді	Постійне двостороннє з’єднання
Продуктивність	Високе навантаження (багато запитів)	Мінімальне навантаження на сервер
Реальний час	Використовує AJAX, SSE або Long Polling	Миттєва передача без затримок
Оновлення	Запитує нові дані (polling)	Сервер сам надсилає оновлення
Затримки	Високі (залежить від запитів)	Мінімальні (завдяки постійному з’єднанню)

✅ WebSocket ідеальний для додатків, які потребують швидкого обміну даними.

---

Як використовувати WebSocket у JavaScript?

Клієнт (браузер)

// Відкрити WebSocket-з'єднання
const socket = new WebSocket("wss://example.com/socket");

// Обробка відкриття з'єднання
socket.onopen = function() {
    console.log("WebSocket з'єднання встановлено!");
    socket.send("Привіт, сервер!");
};

// Обробка отриманих повідомлень
socket.onmessage = function(event) {
    console.log("Отримано повідомлення: " + event.data);
};

// Обробка закриття
socket.onclose = function(event) {
    console.log("WebSocket з'єднання закрито, код: " + event.code);
};

---

Сервер (Node.js + ws бібліотека)

const WebSocket = require('ws');

const server = new WebSocket.Server({ port: 8080 });

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

    socket.on('message', message => {
        console.log("Отримано: " + message);
        socket.send("Сервер отримав: " + message);
    });

    socket.on('close', () => {
        console.log("Клієнт відключився");
    });
});

📌 Сервер слухає порт 8080, приймає повідомлення та відповідає клієнту.

---

Де використовують WebSocket?

1. Чати та месенджери (Telegram Web, WhatsApp Web).
2. Онлайн-ігри (швидкий обмін даними між гравцями).
3. Фінансові додатки (біржові котирування, криптовалютні біржі).
4. Інтернет речей (IoT) (пристрої обмінюються даними в реальному часі).
5. Системи відеотрансляцій (YouTube, Twitch).
6. Спільна робота (редагування документів в реальному часі).

---

Переваги та недоліки WebSocket

✅ Переваги

✔ Мінімальна затримка – миттєвий обмін даними.
✔ Мала витрата трафіку – немає постійних HTTP-запитів.
✔ Масштабованість – підтримує тисячі одночасних підключень.
✔ Простота у використанні – зрозумілий API.

❌ Недоліки

❌ Потрібна підтримка сервером – не всі хостинги підтримують WebSocket.
❌ Більше ресурсів для сервера – підтримка постійного з’єднання.
❌ Може блокуватися брандмауерами (деякі корпоративні мережі).

---

Висновок

WebSocket – це ефективний протокол, який забезпечує швидкий двосторонній обмін даними між клієнтом і сервером. Він дозволяє зменшити навантаження на сервер і забезпечити миттєві оновлення.

📌 Коли варто використовувати WebSocket?

• Чати та месенджери
• Онлайн-ігри
• Фінансові біржі
• Спільне редагування документів
• Інтерактивні веб-додатки

Якщо твоєму проєкту потрібна швидкість і мінімальні затримки, WebSocket – чудове рішення! 🚀