Соединение, сообщения и закрытие

Короткий ответ: WebSocket работает так: браузер сначала отправляет HTTP-запрос на обновление соединения, сервер подтверждает переход на WebSocket, а затем между клиентом и сервером остается открытый двусторонний канал. После этого клиент и сервер могут отправлять сообщения друг другу без нового HTTP-запроса на каждое событие

Именно поэтому WebSocket используют там, где данные должны обновляться быстро: чат, уведомления, онлайн-табло, игры, live-графики, совместная работа

Шаг 1: HTTP Upgrade

Подключение начинается не “с нуля”, а с HTTP-запроса. Клиент говорит серверу: хочу перейти на WebSocket. Если сервер поддерживает такой endpoint, он подтверждает upgrade

После успешного перехода соединение больше не ведет себя как обычный HTTP-запрос. Оно остается открытым, пока одна из сторон его не закроет или пока соединение не оборвется

Шаг 2: событие open

В браузере это выглядит так:

const socket = new WebSocket("ws://localhost:8080");

socket.addEventListener("open", () => {
  console.log("Канал открыт");
  socket.send("ping");
});

Событие open означает, что соединение готово к отправке. До open лучше не отправлять данные

Шаг 3: обмен сообщениями

Сообщения приходят через message:

socket.addEventListener("message", (event) => {
  console.log("Пришло:", event.data);
});

Отправляются через send:

socket.send(JSON.stringify({
  type: "chat_message",
  text: "Привет",
}));

Чаще всего в веб-приложениях отправляют JSON-строки. Но WebSocket может передавать и бинарные данные: Blob, ArrayBuffer и другие форматы

Шаг 4: закрытие соединения

Закрытие отслеживается так:

socket.addEventListener("close", (event) => {
  console.log("Закрыто:", event.code, event.reason);
});

Закрыть соединение можно вручную:

socket.close(1000, "Пользователь вышел");

Код 1000 означает нормальное закрытие. В реальном приложении закрытие нужно использовать при выходе пользователя, уходе со страницы, смене аккаунта или остановке фонового процесса

readyState простыми словами

У WebSocket есть состояние:

socket.readyState

Основные значения:

0 CONNECTING - подключается
1 OPEN - открыто
2 CLOSING - закрывается
3 CLOSED - закрыто

Перед отправкой полезно проверять:

if (socket.readyState === WebSocket.OPEN) {
  socket.send("ping");
}

Это защищает от ошибки, когда приложение пытается отправить сообщение в еще не открытый или уже закрытый канал

ws и wss

ws:// — обычное соединение. Оно подходит для локальной разработки

wss:// — защищенное соединение. На публичном HTTPS-сайте используйте wss://, иначе браузер может заблокировать подключение

Пример:

const socket = new WebSocket("wss://example.com/realtime");

Почему WebSocket не заменяет весь HTTP

WebSocket хорош для постоянного обмена событиями. Но обычный HTTP все равно нужен для загрузки страниц, авторизации, REST API, файлов, SEO-страниц и многих операций, где достаточно одного запроса и одного ответа

Частая рабочая схема:

• HTTP API создает пользователя, загружает настройки и сохраняет формы;
• WebSocket присылает уведомления и live-события;
• при обрыве WebSocket клиент переподключается.

Частые ошибки

Первая ошибка — ждать, что WebSocket сам переподключится. Нет, переподключение нужно писать отдельно

Вторая ошибка — отправлять каждое мелкое изменение без ограничений. Если поток быстрый, используйте batching, throttle или отправку снимков состояния

Третья ошибка — использовать WebSocket без авторизации. Если канал передает личные данные, проверяйте токен или сессию

Четвертая ошибка — держать соединение открытым после ухода со страницы. Для браузерных приложений полезно закрывать сокет на pagehide или при размонтировании компонента

Мини-проверка понимания

Если пользователь отправил сообщение в чат, сервер получает его через открытый WebSocket-канал и рассылает другим подключенным клиентам. Клиенты получают событие message и обновляют интерфейс. Нового HTTP-запроса для каждого получателя не требуется

Что почитать дальше по WebSocket

Если нужен общий маршрут по теме, откройте рубрику WebSocket. Для соседних задач пригодятся эти разборы:

• WebSocket test: как проверить соединение и сообщения
• Nginx и WebSocket proxy: почему локально работает, а на сервере нет
• WSS: что это и как использовать защищенный WebSocket
• WebSocket protocol: как работает протокол WebSocket