Що таке Сокети (WebSocket) 🔌 | детально для початківців

Уявіть собі телефонну розмову. Ви дзвоните другу, він піднімає слухавку, і ви можете говорити одночасно, перебивати один одного, мовчати і знову говорити. З’єднання тримається постійно, доки хтось не покладе слухавку. Це і є аналогія роботи сокетів.

А тепер уявіть рацію. Щоб щось сказати, ви повинні натиснути кнопку, сказати фразу і відпустити кнопку (“Прийом!”). Поки ви не натиснете кнопку знову, ви нічого не можете передати. Це аналогія класичного вебу (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 — це одна з найцікавіших технологій для вивчення. Вона повністю змінює підхід до проєктування додатків. Замість того, щоб постійно “смикати” сервер, ви створюєте єдиний простір, де події відбуваються миттєво.

Якщо ви хочете рухатися далі у веб-розробці, спробуйте інтегрувати сокети у свій наступний проєкт. Наприклад, зробіть просте сповіщення про нове замовлення на своєму сайті. Це додасть вашому проєкту професійного блиску та інтерактивності.