JavaScript Academy · Aula

Ciclo de vida e erros da conexão

Trate eventos de abertura, fechamento e erro.

Ciclo de vida e erros da conexão é uma aula grátis de JavaScript Academy no CoddyKit. Esta é a aula 3 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de JavaScript Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de JavaScript Academy inclui 4 aulas no total.

O ciclo de vida completo

Um socket passa por CONNECTING → OPEN → CLOSING → CLOSED. Quatro eventos correspondem a essas transições: open, message, error e close.

O evento de encerramento

onclose é acionado quando a conexão termina, normalmente ou não. O evento contém code, reason e wasClean.

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

Códigos de encerramento

Entre os códigos padrão estão 1000 (normal), 1001 (indo embora), 1006 (anormal, sem quadro de encerramento) e 1011 (erro do servidor). Os códigos de 4000 a 4999 são definidos pelo aplicativo.

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

Encerrando deliberadamente

socket.close(code, reason) inicia um encerramento normal. Use 1000 para um encerramento normal; a cadeia de caracteres do motivo deve ter menos de 123 bytes.

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

O evento de erro

onerror é acionado quando ocorrem falhas. Por motivos de segurança, o evento de erro é intencionalmente limitado — ele não contém um motivo detalhado. Quase sempre um evento close é acionado em seguida.

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

Diferenciando encerramentos normais e anormais

event.wasClean só é true quando ambos os lados trocaram quadros de encerramento. Uma queda da rede resulta em wasClean: false e no código 1006.

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

Limpando recursos

Ao fechar, limpe os temporizadores (sinais de vida), rejeite as solicitações pendentes e atualize o estado da interface para que o aplicativo reflita a desconexão.

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

Removendo ouvintes

Se você associou manipuladores com addEventListener, remova-os ao fechar para evitar vazamentos, especialmente ao recriar sockets.

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

readyState durante o encerramento

Entre a chamada de close() e o evento onclose, readyState é CLOSING (2). O envio nesse intervalo é ignorado.

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

Tempos limite de inatividade dos servidores

Servidores e proxies frequentemente fecham conexões ociosas após 30–60 segundos. Sinais de vida mantêm a conexão ativa e permitem detectar quedas rapidamente.

Detectando uma conexão interrompida

Combine sinais de vida com um mecanismo de vigilância: se nenhuma resposta chegar dentro de um intervalo, trate o socket como inativo e feche-o para acionar a reconexão.

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);
};

Verificação rápida

Teste o tratamento do ciclo de vida.

Recapitulação: ciclo de vida e erros

Você tratou onclose com seus valores code/reason/wasClean, aprendeu os códigos de encerramento padrão, encerrou conexões deliberadamente, lidou com o onerror limitado, limpou temporizadores e ouvintes e criou um mecanismo de vigilância com sinais de vida. A seguir: estratégias de reconexão.

Perguntas Frequentes

A aula “Ciclo de vida e erros da conexão” é grátis?

Sim — o texto completo de “Ciclo de vida e erros da conexão” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de JavaScript Academy, atualize para CoddyKit PRO. O curso de JavaScript Academy inclui 4 aulas no total.

O que vou aprender em “Ciclo de vida e erros da conexão”?

Trate eventos de abertura, fechamento e erro. Você pratica JavaScript Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar JavaScript Academy?

Nenhuma experiência prévia é necessária. JavaScript Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 4.

Quanto tempo leva a aula “Ciclo de vida e erros da conexão”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de JavaScript Academy?

Sim. Cada aula de JavaScript Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

← Voltar para JavaScript Academy