На заре интернета, когда возможности веба ограничивались просмотром информационных статей, однонаправленного протокола HTTP, посылающего запрос серверу и получающего ответ, было вполне достаточно. А потом пришли приложения со своими push-уведомлениями, мессенджеры для общения, карты для онлайн-навигации — и здесь технологии HTTP уже стало недостаточно. Требовалось двунаправленное соединение, в котором не только клиент мог отправлять запрос, но и сервер мог динамически посылать информацию клиенту для отображения. Так и появились WebSockets.
Сегодня мы разберем, что это за технология, чем WS отличается от WSS, и почему без WebSockets современный веб был бы невыносимо медленным.
Что такое WebSocket?
WebSocket — это протокол связи, обеспечивающий постоянный двунаправленный канал передачи данных между клиентом (браузером) и сервером через одно TCP-соединение.
WebSockets возникли в 2010 году из-за роста числа интернет-пользователей и появления онлайн-игр и мессенджеров, требующих мгновенного соединения без постоянных запросов.
WebSocket решает проблему медленного обмена данными. Вместо постоянных запросов "Что нового?", браузер и сервер могут мгновенно обмениваться сообщениями, как в реальной беседе. Это делает интерфейс быстрым и отзывчивым.
Соединение, установленное с помощью WebSocket, сохраняется до тех пор, пока его не прервет любой из участников. Если одна сторона разрывает соединение, то другая не сможет продолжить коммуникацию, поскольку соединение автоматически разрывается для обоих участников.
Чем WebSocket отличается от HTTP?
WebSocket и HTTP — это как разговор по телефону по сравнению с отправкой писем.
- HTTP (Письмо): Вы пишете запрос, отправляете его, ждете, пока сервер его получит, обработает и пришлет ответное письмо. Чтобы сказать что-то еще, нужно писать новое письмо.
- WebSocket (Телефонный звонок): Вы один раз набираете номер (рукопожатие), сервер поднимает трубку, и линия остается открытой. Вы и сервер можете говорить и слушать одновременно, перебивать друг друга и молчать, не вешая трубку.
И HTTP, и WebSocket работают поверх TCP. Но HTTP — это однонаправленный протокол: клиент отправляет запрос, сервер отвечает, и соединение закрывается. WebSocket — это постоянное двунаправленное (полнодуплексное) соединение: клиент и сервер могут отправлять данные одновременно, без необходимости повторных запросов. Оно сохраняется до разрыва одной из сторон.
Что было до WebSocket?
Чтобы понять удобство веб-сокетов, нужно взглянуть на альтернативы, которые использовались раньше (и используются до сих пор для других задач).
В попытке сделать HTTP более динамическим был создан AJAX — это способ отправлять HTTP-запросы из браузера в фоне, без перезагрузки страницы. AJAX позволяет динамически получать данные по HTTP. Именно он дал первые «живые» интерфейсы до появления WebSocket.
1. Обычный HTTP + периодический опрос (short polling)
Клиент с помощью AJAX раз в N секунд отправляет запрос:
«Сервер, для меня есть что‑то новое?»
Минусы:
- задержка не меньше интервала опроса;
- куча пустых запросов;
- лишняя нагрузка и на сервер, и на сеть.
2. Длинный опрос (long polling, Comet)
Клиент отправляет запрос и ждёт, пока на сервере не появятся новые данные. Сервер держит запрос открытым и отвечает только когда есть что отдать, либо по таймауту.
Плюсы:
- меньше пустых ответов;
- новые данные приходят быстрее, чем при коротком опросе.
Минусы:
- серверу нужно держать множество «зависших» запросов;
- есть таймауты, сессии приходится постоянно переоткрывать;
- реализация сложнее, чем простое REST‑API.
3. Server‑Sent Events (SSE / EventSource)
SSE позволяют серверу стримить события клиенту по HTTP в одну сторону (сервер → клиент). Браузер открывает соединение и слушает поток событий.
Плюсы:
- простой API (EventSource в браузере);
- хорошо подходит для лент котировок, логов, метрик.
Минусы:
- соединение однонаправленное: для отправки данных от клиента всё равно нужен отдельный HTTP‑запрос;
- ограничения по количеству соединений в браузерах;
- хуже поддерживается в старых/встроенных клиентах.
Все эти решения работали, но оставались костылями поверх HTTP, который изначально не был рассчитан на постоянный двусторонний поток.
Техническое устройство WebSockets
Магия веб-сокетов начинается с... обычного HTTP.
1. Рукопожатие (Handshake)
Клиент отправляет серверу особый HTTP-запрос с заголовком Upgrade.
2. Ответ сервера
Если сервер поддерживает веб-сокеты, он отвечает статусом 101 Switching Protocols.
3. Обмен данными (Фреймы)
С этого момента HTTP-соединение превращается в постоянный поток байтов. Данные передаются не громоздкими пакетами, а легкими «фреймами» (кадрами). В любой момент и клиент, и сервер могут отправить фрейм с данными.
Для поддержания жизни соединения (чтобы роутеры не обрывали «молчащий» канал) используются специальные Ping/Pong фреймы — невидимые сообщения, проверяющие, что собеседник еще на связи.
Каждый фрейм содержит:
- признак, последний ли это фрагмент сообщения (FIN) или будут ещё;
- тип данных (opcode — говорит, что именно мы передаём: текст, бинарные данные, ping/pong или запрос на закрытие);
- флаг маскирования (это отметка «данные замаскированы». Без неё сервер не поймёт, нужно ли раскодировать данные)и ключ маски (благодаря которому сервер может раскодировать сообщение);
Маскирование нужно для защиты от прокси, которые могут кэшировать или подменять незамаскированный трафик. - длину полезной нагрузки (число, указывающее, сколько байт занимают данные сообщения);
- сами данные.
Веб-сокеты позволяют обмениваться текстовыми сообщениями, изображениями, аудио- и видеофайлами, потоковыми данными.
Фреймы можно фрагментировать: большое сообщение (например, изображение) разбивается на несколько частей, которые идут подряд. Благодаря этому WebSocket справляется и с крупными полезными нагрузками.
WS и WSS: В чем разница?
По аналогии с HTTP и HTTPS, у веб-сокетов есть два режима работы:
- WS (ws://): Стандартный протокол WebSockets. Данные передаются в открытом виде.Это небезопасно: злоумышленник в той же сети может перехватить переписку. Подходит для внутренних сетей и тех случаев, где чувствительных данных нет и канал защищён иным образом (VPN и т.п.). В открытом интернете сегодня это редкость.
- WSS (wss://): Это WebSocket Secure. Данные шифруются с использованием SSL/TLS (так же, как в HTTPS). Клиент может проверить подлинность сервера по сертификату. Трафик нельзя просто так подглядеть или подменить. WSS обычно использует порт 443, как и HTTPS, и подходит для приложений, требующих надежной защиты.
Важно: Если ваш сайт работает по защищенному HTTPS, браузер не разрешит вам использовать небезопасный ws://, он потребует wss://. Это стандарт безопасности современного веба.
Где и когда использовать WebSockets?
Не везде, где есть динамика, нужен веб-сокет. Например, для простой подгрузки постов при скролле ленты (пагинация) лучше подойдет обычный HTTP-запрос.
WebSockets идеальны для:
- Чаты и мессенджеры: Telegram, WhatsApp Web, VK. Здесь критична каждая миллисекунда.
- Онлайн-игры: Передача координат игрока, выстрелов и действий в реальном времени.
- Финансовые тикеры: Биржи, где курсы валют и криптовалют скачут каждую секунду.
- Коллаборативная работа: Google Docs или Figma, когда вы видите курсор коллеги, который пишет текст одновременно с вами.
- Push-уведомления: Всплывающие окна о новых заказах или лайках.
Плюсы и минусы WebSockets
Плюсы:
- Скорость: Мгновенная передача данных без задержек на рукопожатия.
- Экономия трафика: Заголовки передаются только один раз при подключении.
- Двусторонность: Сервер может инициировать общение.
Минусы:
- Нагрузка на сервер: Сервер вынужден держать в памяти тысячи открытых соединений одновременно (в отличие от HTTP, где «ответил и забыл»).
- Сложность разработки: Нужно обрабатывать обрывы связи, переподключения и потерю пакетов.
- Таймауты: Прокси-серверы и фаерволы часто обрубают долгие соединения, если по ним не ходят данные (нужно настраивать Ping/Pong).
Заключение
WebSocket сделал интернет живым. Он превратил веб-страницы из статических газет в интерактивные приложения.
Если вы строите простой блог или новостной сайт, вам, скорее всего, хватит старого доброго HTTP. Но если ваша цель — создать интерактивную среду, где пользователи взаимодействуют друг с другом или получают данные в реальном времени, WebSockets станут фундаментом вашего проекта.