JavaScript Academy · Урок

Жизненный цикл соединения и ошибки

Обрабатывайте события открытия, закрытия и ошибки.

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

Полный жизненный цикл

Socket проходит состояния CONNECTING → OPEN → CLOSING → CLOSED. Этим переходам соответствуют четыре события: open, message, error и close.

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

onclose срабатывает при завершении соединения — корректном или аварийном. Событие содержит code, reason и wasClean.

socket.onclose = (event) => {
  console.log("Closed", event.code, event.reason, event.wasClean);
};

Коды закрытия

Стандартные коды включают 1000 (нормальное завершение), 1001 (сторона отключается), 1006 (аварийное завершение без кадра закрытия) и 1011 (ошибка сервера). Коды от 4000 до 4999 определяются приложением.

socket.onclose = (e) => {
  if (e.code === 1000) console.log("normal close");
  else console.log("unexpected", e.code);
};

Намеренное закрытие

socket.close(code, reason) инициирует корректное завершение. Используйте 1000 для нормального закрытия; строка причины должна быть короче 123 bytes.

socket.close(1000, "user logged out");

Событие ошибки

onerror срабатывает при сбоях. В целях безопасности событие ошибки намеренно содержит минимум информации и не сообщает подробную причину. Почти всегда после него следует событие close.

socket.onerror = (event) => {
  console.log("Socket error — a close will follow");
};

Различие корректного и аварийного завершения

event.wasClean имеет значение true только тогда, когда обе стороны обменялись кадрами закрытия. При разрыве сетевого соединения wasClean: false и код равен 1006.

socket.onclose = (e) => {
  if (!e.wasClean) console.log("Connection dropped unexpectedly");
};

Освобождение ресурсов

При закрытии очистите таймеры (сигналы активности), отклоните ожидающие запросы в состоянии pending и обновите состояние интерфейса, чтобы приложение отразило отключение.

socket.onclose = () => {
  clearInterval(heartbeatTimer);
  pending.forEach((reject) => reject(new Error("disconnected")));
  pending.clear();
};

Удаление обработчиков

Если вы подключили обработчики с помощью addEventListener, удалите их при закрытии, чтобы избежать утечек, особенно при создании новых socket.

function cleanup() {
  socket.removeEventListener("message", onMessage);
  socket.removeEventListener("close", onClose);
}

Состояние readyState во время завершения

Между вызовом close() и событием onclose свойство readyState имеет значение CLOSING (2). Отправка в этот период игнорируется.

socket.close();
console.log(socket.readyState); // 2 (CLOSING)

Тайм-ауты бездействия на серверах

Серверы и прокси часто закрывают неактивные соединения через 30–60 секунд. Сигналы активности поддерживают соединение и позволяют быстро обнаружить разрыв.

Обнаружение неработающего соединения

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

let pongTimer;
function ping() {
  socket.send(JSON.stringify({ type: "ping" }));
  pongTimer = setTimeout(() => socket.close(4000, "no pong"), 5000);
}
socket.onmessage = (e) => {
  if (JSON.parse(e.data).type === "pong") clearTimeout(pongTimer);
};

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

Проверьте обработку жизненного цикла.

Повторение: жизненный цикл и ошибки

Вы обработали onclose с его code/reason/wasClean, изучили стандартные коды закрытия, выполнили намеренное закрытие, разобрались с малосодержательным событием onerror, очистили таймеры и обработчики и создали сторожевой механизм на основе сигналов активности. Далее: стратегии переподключения.

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

Урок «Жизненный цикл соединения и ошибки» бесплатный?

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

Чему я научусь в уроке «Жизненный цикл соединения и ошибки»?

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

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

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

Сколько времени занимает урок «Жизненный цикл соединения и ошибки»?

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

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

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

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

← Назад к JavaScript Academy