JavaScript Academy · Aula

Estratégias de reconexão

Reconecte-se de forma confiável após desconexões.

Estratégias de reconexão é uma aula grátis de JavaScript Academy no CoddyKit. Esta é a aula 4 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.

Por que reconectar?

As redes não são confiáveis — o Wi-Fi cai, os laptops entram em suspensão e os servidores reiniciam. Um cliente WebSocket robusto detecta o encerramento e restabelece a conexão automaticamente, mantendo a experiência do usuário contínua.

Reconexão ingênua

A abordagem mais simples reabre a conexão imediatamente após o encerramento. O perigo é que, se o servidor estiver indisponível, isso o sobrecarregará em um laço contínuo.

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

Atraso fixo

Adicionar um atraso constante é mais moderado, mas ainda envia um fluxo contínuo de tentativas e pode sincronizar muitos clientes, criando uma sobrecarga simultânea.

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

Espera exponencial

Dobre o tempo de espera após cada tentativa malsucedida: 1 s, 2 s, 4 s, 8 s… limitado a um valor máximo. Isso distribui as novas tentativas e alivia um servidor sobrecarregado.

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

Adicionando variação aleatória

Varie ligeiramente o atraso para que milhares de clientes não se reconectem no mesmo instante. A variação aleatória total escolhe um valor aleatório entre 0 e o cap calculado.

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

Reiniciando após o sucesso

Quando onopen for acionado, reinicie o contador de tentativas para que a próxima desconexão comece a espera exponencial novamente.

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

Um cliente completo com reconexão

Combine as partes: conecte-se, reinicie ao abrir e use espera exponencial ao fechar.

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

Respeitando os estados conectado e desconectado

Observe os eventos de conexão e desconexão do navegador. Pause a reconexão enquanto estiver desconectado e faça uma tentativa imediata quando a conectividade retornar.

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

Limitando tentativas

Opcionalmente, aplique cap ao número de novas tentativas e informe o usuário sobre uma falha permanente em vez de tentar indefinidamente.

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

Ressincronizando o estado após reconectar

Uma nova conexão não tem contexto no servidor. Ao reabrir, inscreva-se novamente nos canais e solicite as mensagens perdidas durante a desconexão.

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

Evitando sockets duplicados

Impeça a abertura de vários sockets caso a lógica de reconexão seja acionada duas vezes. Acompanhe o socket atual e ignore manipuladores obsoletos.

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

Verificação rápida

Teste o projeto de reconexão.

Recapitulação: reconexão

Você passou de uma reconexão ingênua para uma espera exponencial com variação aleatória, reiniciou as tentativas após o sucesso, respeitou os eventos de conexão e desconexão, limitou as novas tentativas, ressincronizou o estado após reconectar e evitou sockets duplicados. Agora seu cliente é robusto.

Perguntas Frequentes

A aula “Estratégias de reconexão” é grátis?

Sim — o texto completo de “Estratégias de reconexã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 “Estratégias de reconexão”?

Reconecte-se de forma confiável após desconexões. 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 4 de 4.

Quanto tempo leva a aula “Estratégias de reconexã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