WebSocket в браузере: двусторонняя связь в реальном времени

Что такое WebSocket

HTTP — модель «запрос-ответ»: сервер не может сам отправить данные браузеру. Для живых данных раньше использовали polling (спрашивать каждую секунду), что нагружает сервер и даёт задержку. WebSocket — двустороннее соединение, которое создаётся один раз и остаётся открытым: любая сторона в любой момент отправляет сообщение.

Схемы адресов — ws:// и wss:// (с TLS). Соединение начинается с обычного HTTP-запроса (Upgrade: websocket), сервер отвечает 101 Switching Protocols, и по тому же TCP-соединению начинают идти фреймы.

💡 Если данные идут только от сервера к браузеру, проще Server-Sent Events (EventSource). WebSocket выбирают, когда нужен обмен в обе стороны.

Соединение, события и состояние

Соединение создаётся через new WebSocket(url) и управляется четырьмя событиями. В примере сервер — эхо-сервер (адрес условный, подставьте свой сервер).

const ws = new WebSocket('wss://echo.example.test/chat');

ws.addEventListener('open', () => {
  console.log('open');
  ws.send('hello');
});

ws.addEventListener('message', (event) => {
  console.log('message:', event.data);
});

ws.addEventListener('close', (event) => {
  console.log('close:', event.code);
});

Состояние соединения лежит в ws.readyState:

Событие error не даёт подробностей (из соображений безопасности), за ним всегда следует close; причину показывает event.code.