0Pricing
Vue Academy · Aula

Composable useWebSocket com reconexão

Encapsulamento de WebSocket em um composable, reconexão automática com espera exponencial e acompanhamento do status.

Composable useWebSocket com reconexão é uma aula grátis de Vue 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 Vue Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Vue Academy inclui 4 aulas no total.

Encapsulando WebSockets em uma função componível

Espalhar o tratamento bruto de WebSocket pelos componentes fica confuso. Uma função componível useWebSocket centraliza o estado da conexão, a reconexão e o tratamento de mensagens — e pode ser reutilizada em qualquer lugar.

Vamos criá-la passo a passo.

Acompanhando o status com uma ref

Exponha o estado da conexão como uma ref reativa de status, para que a interface possa exibir indicadores "Conectando", "Aberta" ou "Fechada".

import { ref } from "vue"

export function useWebSocket(url) {
  const status = ref("CLOSED") // CONNECTING | OPEN | CLOSED
  // ...
  return { status }
}

A função connect

Encapsule a abertura da conexão em uma função interna connect, para que possamos chamá-la novamente depois e reconectar. Atualize status a cada evento do ciclo de vida.

let ws
function connect() {
  status.value = "CONNECTING"
  ws = new WebSocket(url)
  ws.onopen = () => { status.value = "OPEN" }
  ws.onclose = () => { status.value = "CLOSED"; scheduleReconnect() }
}

Reconexão com atraso crescente

Reconectar instantaneamente em um ciclo apertado sobrecarrega o servidor. Use um retardo exponencial: espere mais tempo após cada tentativa malsucedida, até atingir um limite.

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

Redefinindo o retardo após o sucesso

Quando uma conexão for estabelecida, redefina o contador de tentativas, para que a próxima desconexão comece o retardo desde o início, em vez de começar com uma espera longa.

ws.onopen = () => {
  status.value = "OPEN"
  attempts = 0
  flushQueue()
}

Uma fila de mensagens durante a desconexão

Se o usuário enviar uma mensagem enquanto a conexão estiver indisponível, não se deve perdê-la. Armazene as mensagens enviadas em uma fila e esvazie-a assim que a conexão for aberta.

const queue = []
function send(data) {
  const payload = JSON.stringify(data)
  if (ws && ws.readyState === WebSocket.OPEN) {
    ws.send(payload)
  } else {
    queue.push(payload)
  }
}

Esvaziando a fila

Quando a conexão for aberta, processe tudo o que se acumulou. Remova os itens do início para preservar a ordem.

function flushQueue() {
  while (queue.length && ws.readyState === WebSocket.OPEN) {
    ws.send(queue.shift())
  }
}

Manipuladores de mensagens tipadas

Permita que os consumidores registrem manipuladores para cada type de mensagem. Armazene as funções de retorno em um mapa e encaminhe cada quadro recebido com base no tipo da mensagem.

const handlers = {}
function on(type, cb) { handlers[type] = cb }

// inside connect:
ws.onmessage = (e) => {
  const msg = JSON.parse(e.data)
  if (handlers[msg.type]) handlers[msg.type](msg.payload)
}

Limpeza em onUnmounted

A função componível gerencia temporizadores e uma conexão. Desfaça-os quando o componente que a utiliza for desmontado, para que a reconexão não continue sendo disparada depois que a tela desaparecer.

import { onUnmounted } from "vue"

let reconnectTimer
onUnmounted(() => {
  clearTimeout(reconnectTimer)
  if (ws) ws.close(1000, "component unmounted")
})

Evitando a reconexão após um fechamento intencional

Um fechamento normal (código 1000) feito durante sua própria desmontagem não deve provocar uma reconexão. Acompanhe uma sinalização intentional e não agende a reconexão quando ela estiver definida.

let intentional = false
function close() { intentional = true; ws.close(1000) }

ws.onclose = () => {
  status.value = "CLOSED"
  if (!intentional) scheduleReconnect()
}

A estrutura completa da função componível

Tudo se encaixa: conectar na criação, expor status, send e on, enfileirar enquanto a conexão estiver indisponível, reconectar com retardo e realizar a limpeza automaticamente.

export function useWebSocket(url) {
  const status = ref("CLOSED")
  // connect, scheduleReconnect, send, on, flushQueue, cleanup...
  connect()
  return { status, send, on, close }
}

// usage:
// const { status, send, on } = useWebSocket("wss://...")

Verificação rápida

Verifique sua compreensão da estratégia de reconexão.

Recapitulação

Você criou uma função componível useWebSocket robusta:

  • Uma ref de status representa CONNECTING / OPEN / CLOSED para a interface.
  • Reconecte usando retardo exponencial, com limite máximo, e redefina o contador após o sucesso.
  • Enfileire as mensagens enviadas enquanto estiver desconectado e esvazie a fila quando a conexão for aberta.
  • Encaminhe os quadros recebidos para funções de retorno específicas de cada tipo.
  • Faça a limpeza dos temporizadores e da conexão em onUnmounted, ignorando a reconexão após um fechamento intencional.

Perguntas Frequentes

A aula “Composable useWebSocket com reconexão” é grátis?

Sim — o texto completo de “Composable useWebSocket com 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 Vue Academy, atualize para CoddyKit PRO. O curso de Vue Academy inclui 4 aulas no total.

O que vou aprender em “Composable useWebSocket com reconexão”?

Encapsulamento de WebSocket em um composable, reconexão automática com espera exponencial e acompanhamento do status. Você pratica Vue 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 Vue Academy?

Nenhuma experiência prévia é necessária. Vue 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 “Composable useWebSocket com 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 Vue Academy?

Sim. Cada aula de Vue 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

  1. Fundamentos de WebSocket no navegador
  2. Cliente Socket.io com Vue
  3. Criação de um componente de chat em tempo real
  4. Composable useWebSocket com reconexão
← Voltar para Vue Academy