0Pricing
Firebase Auth & Realtime Database Apps · Lección

Detección de presencia y estado en línea

Cree indicadores activos de conexión y desconexión usando la presencia de Realtime Database, controladores onDisconnect y el nodo especial .info/connected para reflejar el estado de la conexión de forma fiable.

Detección de presencia y estado en línea es una lección gratuita de Firebase Auth & Realtime Database Apps en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Firebase Auth & Realtime Database Apps, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Firebase Auth & Realtime Database Apps incluye 4 lecciones en total.

Partes de esta lección aún no han sido traducidas y se muestran en inglés.

What Is Presence

Presence means knowing which users are currently online. Chat apps, collaborative tools, and games all rely on it to show 'active now' indicators.

Realtime Database has special features that make presence robust even when a client disconnects unexpectedly.

The Connection Challenge

The hard part is the ungraceful disconnect: a user closes their laptop or loses signal. The app never gets to set status to 'offline'. We need the server to do it for us.

The .info/connected Node

Firebase exposes a special read-only boolean at .info/connected that is true when the client has a live connection and false when it does not.

import { getDatabase, ref, onValue } from 'firebase/database';

const db = getDatabase();
onValue(ref(db, '.info/connected'), (snap) => {
  console.log('Connected?', snap.val() === true);
});

onDisconnect Basics

onDisconnect registers an action that the server performs when the client disconnects. It is the key to reliable presence.

import { onDisconnect, set } from 'firebase/database';

const statusRef = ref(db, 'status/' + uid);
onDisconnect(statusRef).set({ state: 'offline' });

Order of Operations

The correct sequence is critical:

  • Wait until .info/connected is true
  • Register the onDisconnect action first
  • Only then set status to online

This guarantees the offline handler is armed before you go online.

A Complete Presence Setup

Combining the pieces gives a reliable presence system.

onValue(ref(db, '.info/connected'), (snap) => {
  if (snap.val() !== true) return;
  onDisconnect(statusRef).set({ state: 'offline', at: Date.now() })
    .then(() => set(statusRef, { state: 'online', at: Date.now() }));
});

Server Timestamps

Use serverTimestamp() instead of the client clock so 'last seen' times are consistent across devices with skewed clocks.

import { serverTimestamp } from 'firebase/database';

set(statusRef, { state: 'online', lastChanged: serverTimestamp() });

Multiple Devices

A user may be online on phone and laptop at once. Track presence per connection (a unique key per session) and treat the user as offline only when all connections drop.

import { push } from 'firebase/database';

const conRef = push(ref(db, 'status/' + uid + '/connections'));
onDisconnect(conRef).remove();

Cancelling onDisconnect

If the user logs out cleanly, cancel the pending onDisconnect action and set offline yourself, so stale handlers do not fire later.

import { onDisconnect } from 'firebase/database';

await onDisconnect(statusRef).cancel();
await set(statusRef, { state: 'offline' });

Displaying Presence

Other clients simply listen to the status node. A green dot appears when state is online and disappears when the server flips it to offline on disconnect.

onValue(ref(db, 'status/' + otherUid), (snap) => {
  const online = snap.val()?.state === 'online';
  toggleDot(online);
});

Best Practices

Keep presence reliable and cheap:

  • Store presence in a shallow, dedicated node
  • Use server timestamps for last-seen
  • Account for multiple connections
  • Always register onDisconnect before going online

Quick Check

Test your understanding of presence.

Recap

You can now build reliable online indicators.

  • Watch .info/connected for live connection state
  • Use onDisconnect so the server marks users offline
  • Register onDisconnect before going online
  • Use server timestamps and per-connection tracking
  • Cancel handlers on clean logout

Preguntas frecuentes

¿La lección «Detección de presencia y estado en línea» es gratis?

Sí — el texto completo de «Detección de presencia y estado en línea» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Firebase Auth & Realtime Database Apps, actualiza a CoddyKit PRO. El curso de Firebase Auth & Realtime Database Apps incluye 4 lecciones en total.

¿Qué aprenderé en «Detección de presencia y estado en línea»?

Cree indicadores activos de conexión y desconexión usando la presencia de Realtime Database, controladores onDisconnect y el nodo especial .info/connected para reflejar el estado de la conexión de fo… Practicas Firebase Auth & Realtime Database Apps con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Firebase Auth & Realtime Database Apps?

No se requiere experiencia previa. Firebase Auth & Realtime Database Apps en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.

¿Cuánto tiempo toma la lección «Detección de presencia y estado en línea»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Firebase Auth & Realtime Database Apps?

Sí. Cada lección de Firebase Auth & Realtime Database Apps incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

  1. Habilitación de la persistencia sin conexión
  2. Gestión de desconexiones de red
  3. Estrategias de sincronización de datos
  4. Detección de presencia y estado en línea
← Volver a Firebase Auth & Realtime Database Apps