Firebase & Supabase • المستوى الأول • الدرس 3

المزامنة الفورية للبيانات (Real-time Sync with onSnapshot)

أهداف الدرس العلمية

تطبيق المزامنة الفورية بـ onSnapshot دون الحاجة لإعادة طلب الصفحة (Polling).
إدارة دالة إلغاء الاشتراك (Unsubscribe Listener) لمنع تسريب الذاكرة Memory Leaks.
دمج onSnapshot مع query و where للفلترة الفورية.
معالجة الأخطاء في المستمع عبر الـ callback الثالث.

1. قوة التحديث اللحظي Real-time

تُمكّن onSnapshot تطبيقك من استقبال التحديثات الحية فور إجراء أي تعديل على قاعدة البيانات من قِبَل أي مستخدم آخر، مما يجعلها مثالية لتطبيقات المحادثة والمتاجر اللحظية.

javascript

// آلية onSnapshot
// 1. تشغيل المستمع
const unsubscribe = onSnapshot(
  collection(db, "messages"),
  (snapshot) => {
    // يُستدعى أول مرة + عند كل تغيير
    snapshot.docChanges().forEach((change) => {
      if (change.type === "added")   console.log("جديد:", change.doc.data());
      if (change.type === "modified") console.log("معدّل:", change.doc.data());
      if (change.type === "removed")  console.log("محذوف:", change.doc.data());
    });
  }
);

// 2. إلغاء الاشتراك (مهم!)
unsubscribe();

2. مقارنة: getDocs vs onSnapshot

getDocs

قراءة لمرة واحدة فقط.

const snap = await getDocs(ref);
// لا تحديثات بعد ذلك

onSnapshot

قراءة مستمرة + تحديث تلقائي.

const unsub = onSnapshot(ref, cb);
// تحديثات حية

3. دورة حياة المستمع (Listener Lifecycle)

1. Subscribe

تشغيل onSnapshot

2. Updates

استقبال التغييرات

3. Unsubscribe

إيقاف المستمع

مهم: يجب استدعاء unsubscribe() عند إغلاق المكوّن لتجنب تسريب الذاكرة!

التطبيق العملي المباشر

تحدي الدرس الثالث: إتقان المزامنة الفورية

قم بالتعديل على الكود بداخل المحرر أدناه لتطبيق المتطلبات التالية:

أضف query و where و orderBy إلى قائمة imports.
أنشئ دالة subscribeToRecentMessages(callback) تستخدم query + where + orderBy.
أنشئ دالة subscribeToUserProfile(userId, callback) تستمع لمستند واحد.
أنشئ دالة subscribeWithErrorHandling(callback, onError) مع 3 callbacks.
أضف استدعاء تلقائياً يحفظ unsubscribe ويستدعيها بعد ثانيتين.
اضغط "تشغيل الكود" لرؤية سجل المزامنة.

⏳ جارٍ تحميل المحرر التفاعلي...

الدرس السابق الانتقال للدرس الرابع