PassFront
  1. PassFront
  2. База знаний
  3. DOM и браузер

Какие события Web Socket важны на практике и как их применять?

DOM и браузер

События WebSocket: `open` (соединение установлено), `message` (получено сообщение), `close` (закрыто), `error` (ошибка). Применяются для обработки жизненного цикла и обмена данными в реальном времени.

Основные события

open

Соединение установлено — можно отправлять данные:

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

socket.addEventListener('open', () => {
  socket.send('Привет'); // соединение готово
});

message

Получено сообщение от сервера:

socket.addEventListener('message', (event) => {
  const data = JSON.parse(event.data); // обработка данных
});

Основное событие для получения real-time данных.

close

Соединение закрыто (сервером, клиентом или из-за сбоя):

socket.addEventListener('close', (event) => {
  console.log('Закрыто:', event.code, event.reason);
  // логика переподключения
});

error

Произошла ошибка:

socket.addEventListener('error', (error) => {
  console.error('Ошибка WebSocket');
});

Отправка данных

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

Практика применения

  • open — инициализация, подписки, аутентификация.
  • message — обработка входящих (чат, уведомления, обновления).
  • close — переподключение (с backoff), очистка.
  • error — логирование, обработка сбоев.

Состояния

socket.readyState: CONNECTING (0), OPEN (1), CLOSING (2), CLOSED (3).

Коротко для собеседования

События WebSocket: open (соединение готово — инициализация, отправка), message (получено сообщение — основная обработка данных, event.data), close (закрыто — переподключение, event.code), error (ошибка — логирование). Отправка — socket.send(). Состояние — readyState. Для чатов, уведомлений, real-time обновлений.

Другие вопросы раздела