Firebase Auth & Realtime Database Apps · Leçon

Détecter la présence et l’état en ligne

Leçon 4 sur 413 étapes

Détecter la présence et l’état en ligne est une leçon Firebase Auth & Realtime Database Apps gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Firebase Auth & Realtime Database Apps, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Firebase Auth & Realtime Database Apps comprend 4 leçons au total.

Certaines parties de cette leçon n'ont pas encore été traduites et s'affichent en anglais.

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.

Réponds-y dans la leçon interactive

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

Gratuit pour commencer

Apprends Firebase Auth & Realtime Database Apps avec un tuteur IA — gratuit

Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.

Cours: 11
Leçons: 44

Commencer gratuitement Voir le cours complet

Questions Fréquemment Posées

La leçon « Détecter la présence et l’état en ligne » est-elle gratuite ?

Oui — le texte complet de « Détecter la présence et l’état en ligne » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Firebase Auth & Realtime Database Apps, passe à CoddyKit PRO. Le cours Firebase Auth & Realtime Database Apps comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Détecter la présence et l’état en ligne » ?

Créez des indicateurs en ligne et hors ligne en direct à l’aide de la présence de la base de données en temps réel, des gestionnaires onDisconnect et du nœud spécial .info/connected, afin de refléter… Tu pratiques Firebase Auth & Realtime Database Apps avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Firebase Auth & Realtime Database Apps ?

Aucune expérience préalable n'est requise. Firebase Auth & Realtime Database Apps sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.

Combien de temps prend la leçon « Détecter la présence et l’état en ligne » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Firebase Auth & Realtime Database Apps ?

Oui. Chaque leçon Firebase Auth & Realtime Database Apps inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

Activer la persistance hors ligne
Gérer les déconnexions réseau
Stratégies de synchronisation des données
Détecter la présence et l’état en ligne

← Retour à Firebase Auth & Realtime Database Apps