Firebase Auth & Realtime Database Apps · Lezione

Rilevare la presenza e lo stato online

Lezione 4 di 413 passaggi

Rilevare la presenza e lo stato online è una lezione Firebase Auth & Realtime Database Apps gratuita su CoddyKit. Questa è la lezione 4 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Firebase Auth & Realtime Database Apps, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Firebase Auth & Realtime Database Apps include 4 lezioni in totale.

Parti di questa lezione non sono ancora state tradotte e vengono mostrate in inglese.

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.

Rispondi nella lezione interattiva

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

Gratis per iniziare

Impara Firebase Auth & Realtime Database Apps con un tutor IA — gratis

Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.

Corsi: 11
Lezioni: 44

Inizia a imparare gratis Visualizza il corso completo

Domande Frequenti

La lezione «Rilevare la presenza e lo stato online» è gratuita?

Sì — il testo completo di «Rilevare la presenza e lo stato online» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Firebase Auth & Realtime Database Apps, passa a CoddyKit PRO. Il corso Firebase Auth & Realtime Database Apps include 4 lezioni in totale.

Cosa imparerò in «Rilevare la presenza e lo stato online»?

Costruisca indicatori online/offline in tempo reale usando la presence del Realtime Database, gli handler onDisconnect e il nodo speciale .info/connected per riflettere in modo affidabile lo stato de… Eserciti Firebase Auth & Realtime Database Apps con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Firebase Auth & Realtime Database Apps?

Non è richiesta alcuna esperienza precedente. Firebase Auth & Realtime Database Apps su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 4 di 4.

Quanto tempo richiede la lezione «Rilevare la presenza e lo stato online»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Firebase Auth & Realtime Database Apps?

Sì. Ogni lezione Firebase Auth & Realtime Database Apps include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a Firebase Auth & Realtime Database Apps