Firebase Auth & Realtime Database Apps · درس

الاستماع إلى التغييرات الفورية

اجعل تطبيقك حيًا بالفعل عبر الاشتراك في أحداث Realtime Database، والاستجابة لتغييرات القيم والعُقد الفرعية فور حدوثها، وتنظيف المستمعين لتجنب التسربات.

الدرس 4 من 413 خطوة

الاستماع إلى التغييرات الفورية درس مجاني في Firebase Auth & Realtime Database Apps على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Firebase Auth & Realtime Database Apps، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Firebase Auth & Realtime Database Apps 4 دروس في المجموع.

بعض أجزاء هذا الدرس لم تُترجم بعد وتظهر باللغة الإنجليزية.

From Fetch to Stream

Reading data once gives you a snapshot. The power of Realtime Database is live updates: your app reacts the instant data changes on the server, with no polling.

This is done by attaching listeners to a location in the database.

The Value Event

The most common listener is value. It fires once immediately with current data, then again every time anything under that location changes.

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

const db = getDatabase();
onValue(ref(db, 'scores/global'), (snapshot) => {
  console.log('New value:', snapshot.val());
});

Reading the Snapshot

The callback receives a DataSnapshot. Use .val() for the data, .exists() to check presence, and .key for the node name.

onValue(ref(db, 'user/42'), (snap) => {
  if (snap.exists()) {
    console.log(snap.key, snap.val());
  }
});

Child Events

For lists, value events resend the whole node on every change. Child events are more efficient, firing per item:

onChildAdded
onChildChanged
onChildRemoved

Using onChildAdded

onChildAdded fires once for each existing child, then for every new one. It is perfect for chat messages or feeds.

import { onChildAdded } from 'firebase/database';

onChildAdded(ref(db, 'messages'), (snap) => {
  appendMessage(snap.key, snap.val());
});

Reacting to Changes and Removals

Pair additions with change and removal handlers to keep your UI in sync without re-rendering everything.

import { onChildChanged, onChildRemoved } from 'firebase/database';

onChildChanged(ref(db, 'messages'), s => updateMessage(s.key, s.val()));
onChildRemoved(ref(db, 'messages'), s => removeMessage(s.key));

Reading Once

Sometimes you want current data without an ongoing subscription. Use get for a one-time read instead of a listener.

import { get } from 'firebase/database';

const snap = await get(ref(db, 'config'));
console.log(snap.val());

Detaching Listeners

Listeners stay active until removed, consuming bandwidth and memory. Always detach them when a screen unmounts, using the unsubscribe function returned by onValue.

const unsubscribe = onValue(ref(db, 'scores'), cb);
// later, when leaving the screen:
unsubscribe();

Handling Errors

Listeners can fail, often due to Security Rules denying read access. Provide an error callback so failures are visible, not silent.

onValue(ref(db, 'private'), (snap) => render(snap), (error) => {
  console.error('Read failed:', error.message);
});

Performance Tips

Keep listeners efficient:

Listen at the smallest path that has the data you need
Prefer child events for large lists
Never attach a value listener to the database root

A Live Counter Example

Putting it together: attach a value listener to a counter node, update the DOM in the callback, and unsubscribe on cleanup. The number changes for every connected client in real time.

const unsub = onValue(ref(db, 'visitors/count'), (snap) => {
  document.getElementById('count').textContent = snap.val() ?? 0;
});

Quick Check

Test your understanding of realtime listeners.

أجب عليها في الدرس التفاعلي

Recap

Your app can now respond to data the moment it changes.

Use onValue for single nodes
Use child events for efficient lists
Read once with get when no subscription is needed
Always detach listeners and handle errors
Listen at the narrowest useful path

البدء مجانًا

تعلم Firebase Auth & Realtime Database Apps مع معلم ذكاء اصطناعي — مجانًا

اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.

الدورات: 11
الدروس: 44

ابدأ التعلم مجانًا عرض الدورة الكاملة

الأسئلة الشائعة

هل درس «الاستماع إلى التغييرات الفورية» مجاني؟

نعم — نص درس «الاستماع إلى التغييرات الفورية» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Firebase Auth & Realtime Database Apps، انتقل إلى CoddyKit PRO. تتضمن دورة Firebase Auth & Realtime Database Apps 4 دروس في المجموع.

ماذا ستتعلم في «الاستماع إلى التغييرات الفورية»؟

اجعل تطبيقك حيًا بالفعل عبر الاشتراك في أحداث Realtime Database، والاستجابة لتغييرات القيم والعُقد الفرعية فور حدوثها، وتنظيف المستمعين لتجنب التسربات. تتمرن على Firebase Auth & Realtime Database Apps مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Firebase Auth & Realtime Database Apps؟

لا تُشترط خبرة سابقة. Firebase Auth & Realtime Database Apps على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.

كم من الوقت يستغرق درس «الاستماع إلى التغييرات الفورية»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Firebase Auth & Realtime Database Apps هذا؟

نعم. كل درس في Firebase Auth & Realtime Database Apps يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى Firebase Auth & Realtime Database Apps