Представьте себе телефонный разговор. Вы звоните другу, он поднимает трубку, и вы можете говорить одновременно, перебивать друг друга, молчать и снова говорить. Соединение держится постоянно, пока кто-то не положит трубку. Это и есть аналогия работы сокетов.
А теперь представьте рацию. Чтобы что-то сказать, вы должны нажать кнопку, произнести фразу и отпустить кнопку (“Прием!”). Пока вы не нажмете кнопку снова, вы ничего не можете передать. Это аналогия классического веба (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 — это одна из самых интересных технологий для изучения. Она полностью меняет подход к проектированию приложений. Вместо того, чтобы постоянно “дергать” сервер, вы создаете единое пространство, где события происходят мгновенно.
Если вы хотите двигаться дальше в веб-разработке, попробуйте интегрировать сокеты в свой следующий проект. Например, сделайте простое уведомление о новом заказе на своем сайте. Это добавит вашему проекту профессионального блеска и интерактивности.
