Уявіть собі телефонну розмову. Ви дзвоните другу, він піднімає слухавку, і ви можете говорити одночасно, перебивати один одного, мовчати і знову говорити. З’єднання тримається постійно, доки хтось не покладе слухавку. Це і є аналогія роботи сокетів.
А тепер уявіть рацію. Щоб щось сказати, ви повинні натиснути кнопку, сказати фразу і відпустити кнопку (“Прийом!”). Поки ви не натиснете кнопку знову, ви нічого не можете передати. Це аналогія класичного вебу (HTTP). У цій статті я хочу розповісти вам про технологію, яка перетворила веб з “рації” на “телефон” — про WebSocket.
HTTP проти WebSocket: у чому різниця?
Щоб зрозуміти революційність сокетів, треба згадати, як працює звичайний інтернет.
Класичний HTTP (Request-Response)
У звичайному вебі все ініціює клієнт (ваш браузер). Хочете побачити оновлення в чаті? Браузер має запитати сервер: “Є нові повідомлення?”. Сервер відповідає. Через секунду браузер знову питає: “А зараз є?”. Це називається Long Polling (довге опитування). Це неефективно, створює затримки і навантажує сервер.
WebSocket (Full-Duplex)
Протокол WebSocket (ws:// або wss://) працює інакше. Браузер і сервер один раз “тиснуть руки” (Handshake) і встановлюють постійний тунель (Persistent Connection). Через цей тунель:
- Сервер може надіслати дані клієнту в будь-який момент, не чекаючи запиту.
- Клієнт може надсилати дані серверу.
- З’єднання залишається відкритим, доки одна зі сторін його не розірве.
| Характеристика | HTTP | WebSocket |
|---|---|---|
| Ініціатор | Тільки клієнт | Клієнт або Сервер |
| Тип зв’язку | Однонаправлений (запит-відповідь) | Двонаправлений (дуплексний) |
| Оверхед (зайві дані) | Великий (заголовки в кожному запиті) | Мінімальний (тільки при встановленні) |
| Затримка (Latency) | Висока | Вкрай низька (Real-time) |
Де використовуються сокети?
Ви користуєтесь ними щодня, навіть не підозрюючи про це. Ось типові сценарії:
- Чати та месенджери: WhatsApp Web, Slack, Telegram — повідомлення приходять миттєво.
- Онлайн-ігри: Мультиплеєрні ігри в браузері, де важлива кожна мілісекунда.
- Фінансові тикери: Графіки криптовалют або акцій, що оновлюються в реальному часі.
- Спільна робота: Google Docs або Figma, коли ви бачите курсор іншого користувача.
- Сповіщення: Спливаючі вікна про нове замовлення в адмін-панелі магазину.
Практика: створюємо найпростіший чат
Досить теорії. Давайте напишемо мінімальний код, щоб побачити сокети в дії. Для сервера ми використаємо Node.js (це найпростіший спосіб), а клієнтом буде звичайний HTML-файл.
Попередня підготовка (Node.js)
Переконайтеся, що у вас встановлений Node.js. Створіть папку для проєкту, відкрийте там термінал і виконайте:
npm init -y npm install ws
Ми встановили бібліотеку ws — одну з найпопулярніших для роботи з сокетами в Node.js.
1. Серверна частина (server.js)
Створіть файл server.js. Цей скрипт буде “слухати” підключення і пересилати повідомлення всім підключеним клієнтам.
const WebSocket = require('ws');
// Створюємо сервер на порту 8080
const wss = new WebSocket.Server({ port: 8080 });
console.log("Сервер сокетів запущено на порту 8080");
wss.on('connection', function connection(ws) {
console.log('Новий клієнт підключився!');
// Коли отримуємо повідомлення від клієнта
ws.on('message', function incoming(message) {
console.log('Отримано: %s', message);
// Розсилаємо це повідомлення ВСІМ підключеним клієнтам
wss.clients.forEach(function each(client) {
if (client.readyState === WebSocket.OPEN) {
client.send(message.toString()); // Перетворюємо буфер в рядок
}
});
});
});
Запустіть сервер командою: node server.js
2. Клієнтська частина (index.html)
Створіть файл index.html. Тут ми використаємо вбудований у браузер API WebSocket.
<!DOCTYPE html>
<html lang="uk">
<body>
<h2>Мій WebSocket Чат</h2>
<div id="chat" style="border: 1px solid #ccc; height: 200px; overflow-y: scroll; margin-bottom: 10px;"></div>
<input type="text" id="messageInput" placeholder="Введіть повідомлення">
<button onclick="sendMessage()">Надіслати</button>
<script>
// Підключаємося до нашого сервера
const socket = new WebSocket('ws://localhost:8080');
// Коли з'єднання відкрито
socket.onopen = function(e) {
addMessage("З'єднання встановлено!");
};
// Коли отримуємо повідомлення від сервера
socket.onmessage = function(event) {
addMessage("Сервер: " + event.data);
};
// Функція відправки
function sendMessage() {
const input = document.getElementById('messageInput');
socket.send(input.value); // Відправляємо дані на сервер
input.value = '';
}
// Допоміжна функція для виводу на екран
function addMessage(text) {
const chat = document.getElementById('chat');
const msg = document.createElement('div');
msg.textContent = text;
chat.appendChild(msg);
}
</script>
</body>
</html>
Тепер відкрийте index.html у двох різних вкладках браузера. Напишіть щось в одній — і воно миттєво з’явиться в іншій! Вітаю, ви створили свій перший Real-time додаток.
Альтернативи: Socket.IO
На практиці чистий WebSocket використовують рідко. Частіше беруть бібліотеку Socket.IO. Чому?
- Фолбеки: Якщо браузер або проксі не підтримує WebSocket, Socket.IO автоматично перемкнеться на Long Polling, зберігаючи зв’язок.
- Кімнати (Rooms): Зручно розділяти користувачів на групи (наприклад, окремі чати).
- Автоматичне перепідключення: Якщо інтернет зник, бібліотека сама відновить зв’язок.
Висновок: технологія, що оживляє веб
На мою думку, WebSockets — це одна з найцікавіших технологій для вивчення. Вона повністю змінює підхід до проєктування додатків. Замість того, щоб постійно “смикати” сервер, ви створюєте єдиний простір, де події відбуваються миттєво.
Якщо ви хочете рухатися далі у веб-розробці, спробуйте інтегрувати сокети у свій наступний проєкт. Наприклад, зробіть просте сповіщення про нове замовлення на своєму сайті. Це додасть вашому проєкту професійного блиску та інтерактивності.
