PricingLoginStart free
Firebase Auth & Realtime Database Apps · Ders

Kullanıcı Varlığını ve Çevrimiçi Durumu Algılama

Bağlantı durumunu güvenilir biçimde yansıtmak için Realtime Database kullanıcı varlığını, onDisconnect işleyicilerini ve özel .info/connected düğümünü kullanarak canlı çevrimiçi/çevrimdışı göstergeleri oluşturun.

4. ders / 413 adım

Kullanıcı Varlığını ve Çevrimiçi Durumu Algılama, CoddyKit'te ücretsiz bir Firebase Auth & Realtime Database Apps dersidir. Bu, 4 dersinin 4. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Firebase Auth & Realtime Database Apps öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Firebase Auth & Realtime Database Apps kursu toplamda 4 dersten oluşur.

Bu dersin bazı bölümleri henüz çevrilmemiş olup İngilizce olarak gösterilmektedir.

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.

İnteraktif derste cevapla

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
Başlamak ücretsiz

Yapay zeka eğitmeniyle Firebase Auth & Realtime Database Apps öğren — ücretsiz

Tarayıcında gerçek kod yaz ve çalıştır, 7/24 yapay zeka eğitmeninden anında yardım al; web'de ya da uygulamada kaldığın yerden devam et.

Kurslar
11
Dersler
44
Ücretsiz öğrenmeye başlaTüm kursu görüntüle

Sıkça Sorulan Sorular

“Kullanıcı Varlığını ve Çevrimiçi Durumu Algılama” dersi ücretsiz mi?

Evet — “Kullanıcı Varlığını ve Çevrimiçi Durumu Algılama” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Firebase Auth & Realtime Database Apps kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Firebase Auth & Realtime Database Apps kursu toplamda 4 dersten oluşur.

“Kullanıcı Varlığını ve Çevrimiçi Durumu Algılama” dersinde ne öğreneceğim?

Bağlantı durumunu güvenilir biçimde yansıtmak için Realtime Database kullanıcı varlığını, onDisconnect işleyicilerini ve özel .info/connected düğümünü kullanarak canlı çevrimiçi/çevrimdışı göstergele… Firebase Auth & Realtime Database Apps ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Firebase Auth & Realtime Database Apps öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Firebase Auth & Realtime Database Apps, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 4. dersidir.

“Kullanıcı Varlığını ve Çevrimiçi Durumu Algılama” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Firebase Auth & Realtime Database Apps dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Firebase Auth & Realtime Database Apps dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

  1. Çevrim Dışı Kalıcılığı Etkinleştirme
  2. Ağ Bağlantısı Kesintilerini Yönetme
  3. Veri Eşitleme Stratejileri
  4. Kullanıcı Varlığını ve Çevrimiçi Durumu Algılama
← Firebase Auth & Realtime Database Apps Sayfasına Dön