Что такое Сокеты (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="ru">
<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 — это одна из самых интересных технологий для изучения. Она полностью меняет подход к проектированию приложений. Вместо того, чтобы постоянно «дергать» сервер, вы создаете единое пространство, где события происходят мгновенно.

Если вы хотите двигаться дальше в веб-разработке, попробуйте интегрировать сокеты в свой следующий проект. Например, сделайте простое уведомление о новом заказе на своем сайте. Это добавит вашему проекту профессионального блеска и интерактивности.