JavaScript Academy · Урок

Стратегии повторного подключения

Надёжно подключайтесь повторно после разрывов.

«Стратегии повторного подключения» — бесплатный урок JavaScript Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения JavaScript Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс JavaScript Academy содержит 4 уроков всего.

Зачем переподключаться?

Сети ненадёжны: соединение Wi-Fi прерывается, ноутбуки переходят в спящий режим, серверы перезапускаются. Надёжный клиент WebSocket обнаруживает закрытие и автоматически восстанавливает соединение, чтобы взаимодействие с приложением оставалось непрерывным.

Наивное переподключение

Самый простой подход — немедленно открывать соединение заново после закрытия. Опасность в том, что при недоступном сервере клиент начнёт непрерывно отправлять запросы в тесном цикле.

function connect() {
  const socket = new WebSocket(url);
  socket.onclose = () => connect(); // too aggressive!
}

Фиксированная задержка

Добавление постоянной задержки снижает нагрузку, но всё равно создаёт равномерный поток попыток и может синхронизировать множество клиентов, вызывая эффект «стада».

socket.onclose = () => {
  setTimeout(connect, 3000);
};

Экспоненциальная задержка перед повтором

Удваивайте время ожидания после каждой неудачной попытки: 1 с, 2 с, 4 с, 8 с… до максимального значения. Это распределяет повторные попытки во времени и снижает нагрузку на перегруженный сервер.

let attempt = 0;
function reconnect() {
  const delay = Math.min(1000 * 2 ** attempt, 30000);
  attempt++;
  setTimeout(connect, delay);
}

Добавление случайного разброса

Немного рандомизируйте задержку, чтобы тысячи клиентов не переподключались одновременно. При полном случайном разбросе выбирается случайное значение между 0 и вычисленным значением cap.

function backoffWithJitter(attempt) {
  const cap = Math.min(1000 * 2 ** attempt, 30000);
  return Math.random() * cap;
}

Сброс при успешном подключении

Когда срабатывает onopen, сбросьте счётчик попыток, чтобы при следующем отключении задержка перед повтором начиналась заново.

socket.onopen = () => {
  attempt = 0;
  console.log("reconnected");
};

Полноценный клиент с переподключением

Объедините все части: подключайтесь, сбрасывайте счётчик при открытии и увеличивайте задержку перед повтором при закрытии.

let attempt = 0, socket;
function connect() {
  socket = new WebSocket(url);
  socket.onopen = () => { attempt = 0; };
  socket.onclose = () => {
    const delay = Math.min(1000 * 2 ** attempt++, 30000);
    setTimeout(connect, delay + Math.random() * 1000);
  };
}
connect();

Учёт состояния подключения к сети

Подпишитесь на события подключения браузера к сети и отключения от неё. Приостановите переподключение без сети и запустите немедленную попытку после восстановления соединения.

window.addEventListener("online", () => {
  attempt = 0;
  connect();
});
window.addEventListener("offline", () => {
  if (socket) socket.close();
});

Ограничение числа попыток

При необходимости ограничьте число повторных попыток и сообщите пользователю о постоянной ошибке вместо бесконечных повторов.

const MAX = 10;
socket.onclose = () => {
  if (attempt >= MAX) { showOfflineBanner(); return; }
  setTimeout(connect, backoffWithJitter(attempt++));
};

Повторная синхронизация состояния после переподключения

Новое соединение не имеет контекста на стороне сервера. После повторного открытия снова подпишитесь на каналы и запросите сообщения, пропущенные во время отключения.

socket.onopen = () => {
  attempt = 0;
  socket.send(JSON.stringify({ type: "resubscribe", channels }));
  socket.send(JSON.stringify({ type: "sync", since: lastSeenId }));
};

Предотвращение дублирования socket

Не допускайте открытия нескольких socket, если логика переподключения сработала дважды. Отслеживайте текущий socket и игнорируйте устаревшие обработчики.

function connect() {
  if (socket && socket.readyState <= WebSocket.OPEN) return;
  socket = new WebSocket(url);
}

Быстрая проверка

Проверьте конструкцию переподключения.

Повторение: переподключение

Вы перешли от наивного переподключения к экспоненциальной задержке со случайным разбросом, сбрасывали число попыток после успеха, учитывали события подключения к сети и отключения от неё, ограничивали количество повторов, повторно синхронизировали состояние после переподключения и избегали дублирования socket. Теперь ваш клиент устойчив к сбоям.

Часто задаваемые вопросы

Урок «Стратегии повторного подключения» бесплатный?

Да — полный текст урока «Стратегии повторного подключения» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс JavaScript Academy, подпишись на CoddyKit PRO. Курс JavaScript Academy содержит 4 уроков всего.

Чему я научусь в уроке «Стратегии повторного подключения»?

Надёжно подключайтесь повторно после разрывов. Ты практикуешь JavaScript Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать JavaScript Academy?

Предыдущий опыт не требуется. JavaScript Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.

Сколько времени занимает урок «Стратегии повторного подключения»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке JavaScript Academy?

Да. Каждый урок JavaScript Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к JavaScript Academy