Listeners em Tempo Real (onValue, off)

Use onValue para receber dados iniciais e atualizações. Sempre guarde a função unsubscribe retornada e chame-a quando não precisar mais do listener.

JavaScript

const counterRef = fireSyncClient.ref('liveCounter');
let unsubscribeCounter = null;

function startCounting() {
    if (unsubscribeCounter) return; // Já está escutando
    unsubscribeCounter = counterRef.onValue(
        snapshot => {
            document.getElementById('counter').innerText = snapshot.val() ?? 0;
        },
        error => {
            console.error("Erro no listener do contador:", error);
            stopCounting(); // Tenta parar se der erro
        }
    );
}

function stopCounting() {
    if (unsubscribeCounter) {
        unsubscribeCounter();
        unsubscribeCounter = null;
        console.log("Listener do contador parado.");
    }
}

// Iniciar: startCounting();
// Parar: stopCounting();
  • O callback (handleDataUpdate no exemplo) é chamado uma vez com os dados iniciais (se existirem) e depois a cada mudança detectada pelo servidor.

  • É crucial chamar a função unsubscribe retornada por onValue quando você não precisar mais dos dados (por exemplo, quando um componente da UI é destruído ou o usuário navega para outra página) para evitar vazamentos de memória e tráfego de rede desnecessário.

  • ref.off() é útil para limpar todos os listeners de um caminho de uma vez.

Atualizado