تمكين القدرات دون اتصال في JavaScript

إدارة الحضور

في تطبيقات الوقت الفعلي، غالبًا ما يكون من المفيد اكتشاف وقت اتصال العملاء وقطع الاتصال. على سبيل المثال، قد ترغب في وضع علامة "غير متصل" على المستخدم عندما ينقطع اتصال العميل.

يوفر عملاء قاعدة بيانات Firebase عناصر أولية بسيطة يمكنك استخدامها للكتابة إلى قاعدة البيانات عندما ينقطع اتصال العميل بخوادم قاعدة بيانات Firebase. تحدث هذه التحديثات سواء تم قطع اتصال العميل بشكل نظيف أم لا، لذا يمكنك الاعتماد عليها لتنظيف البيانات حتى في حالة انقطاع الاتصال أو تعطل العميل. يمكن تنفيذ جميع عمليات الكتابة، بما في ذلك الإعداد والتحديث والإزالة، عند قطع الاتصال.

فيما يلي مثال بسيط لكتابة البيانات عند قطع الاتصال باستخدام onDisconnect البدائي:

import { getDatabase, ref, onDisconnect } from "firebase/database";

const db = getDatabase();
const presenceRef = ref(db, "disconnectmessage");
// Write a string when this client loses connection
onDisconnect(presenceRef).set("I disconnected!");
rtdb_ondisconnect_simple.js

var presenceRef = firebase.database().ref("disconnectmessage");
// Write a string when this client loses connection
presenceRef.onDisconnect().set("I disconnected!");
offline.js

onDisconnect(presenceRef).remove().catch((err) => {
  if (err) {
    console.error("could not establish onDisconnect event", err);
  }
});
rtdb_ondisconnect_callback.js

presenceRef.onDisconnect().remove((err) => {
  if (err) {
    console.error("could not establish onDisconnect event", err);
  }
});
offline.js

const onDisconnectRef = onDisconnect(presenceRef);
onDisconnectRef.set("I disconnected");
// some time later when we change our minds
onDisconnectRef.cancel();
rtdb_ondisconnect_cancel.js

var onDisconnectRef = presenceRef.onDisconnect();
onDisconnectRef.set("I disconnected");
// some time later when we change our minds
onDisconnectRef.cancel();
offline.js

الكشف عن حالة الاتصال

بالنسبة للعديد من الميزات المتعلقة بالتواجد، من المفيد أن يعرف تطبيقك متى يكون متصلاً بالإنترنت أو غير متصل بالإنترنت. توفر قاعدة بيانات Firebase Realtime موقعًا خاصًا على /.info/connected والذي يتم تحديثه في كل مرة تتغير فيها حالة اتصال عميل Firebase Realtime Database. هنا مثال:

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

const db = getDatabase();
const connectedRef = ref(db, ".info/connected");
onValue(connectedRef, (snap) => {
  if (snap.val() === true) {
    console.log("connected");
  } else {
    console.log("not connected");
  }
});
rtdb_detect_connection_state.js

var connectedRef = firebase.database().ref(".info/connected");
connectedRef.on("value", (snap) => {
  if (snap.val() === true) {
    console.log("connected");
  } else {
    console.log("not connected");
  }
});
offline.js

/.info/connected هي قيمة منطقية لا تتم مزامنتها بين عملاء قاعدة بيانات Realtime لأن القيمة تعتمد على حالة العميل. بمعنى آخر، إذا قرأ أحد العملاء /.info/connected كـ false، فهذا لا يضمن أن العميل المنفصل سيقرأ أيضًا false.

التعامل مع الكمون

import { getDatabase, ref, onDisconnect, serverTimestamp } from "firebase/database";

const db = getDatabase();
const userLastOnlineRef = ref(db, "users/joe/lastOnline");
onDisconnect(userLastOnlineRef).set(serverTimestamp());
rtdb_set_server_timestamp.js

var userLastOnlineRef = firebase.database().ref("users/joe/lastOnline");
userLastOnlineRef.onDisconnect().set(firebase.database.ServerValue.TIMESTAMP);
offline.js

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

const db = getDatabase();
const offsetRef = ref(db, ".info/serverTimeOffset");
onValue(offsetRef, (snap) => {
  const offset = snap.val();
  const estimatedServerTimeMs = new Date().getTime() + offset;
});
rtdb_estimate_clock_skew.js

var offsetRef = firebase.database().ref(".info/serverTimeOffset");
offsetRef.on("value", (snap) => {
  var offset = snap.val();
  var estimatedServerTimeMs = new Date().getTime() + offset;
});
offline.js

تطبيق الحضور النموذجي

من خلال الجمع بين عمليات قطع الاتصال ومراقبة حالة الاتصال والطوابع الزمنية للخادم، يمكنك إنشاء نظام حضور المستخدم. في هذا النظام، يقوم كل مستخدم بتخزين البيانات في موقع قاعدة البيانات للإشارة إلى ما إذا كان عميل قاعدة بيانات Realtime متصلاً بالإنترنت أم لا. يقوم العملاء بتعيين هذا الموقع على "صحيح" عند اتصالهم بالإنترنت وطابع زمني عند قطع الاتصال. يشير هذا الطابع الزمني إلى آخر مرة كان فيها المستخدم متصلاً بالإنترنت.

لاحظ أن تطبيقك يجب أن يضع عمليات قطع الاتصال في قائمة الانتظار قبل أن يتم وضع علامة على المستخدم متصلاً بالإنترنت، لتجنب أي حالات سباق في حالة فقدان اتصال شبكة العميل قبل إرسال كلا الأمرين إلى الخادم.

فيما يلي نظام حضور مستخدم بسيط:

import { getDatabase, ref, onValue, push, onDisconnect, set, serverTimestamp } from "firebase/database";

// Since I can connect from multiple devices or browser tabs, we store each connection instance separately
// any time that connectionsRef's value is null (i.e. has no children) I am offline
const db = getDatabase();
const myConnectionsRef = ref(db, 'users/joe/connections');

// stores the timestamp of my last disconnect (the last time I was seen online)
const lastOnlineRef = ref(db, 'users/joe/lastOnline');

const connectedRef = ref(db, '.info/connected');
onValue(connectedRef, (snap) => {
  if (snap.val() === true) {
    // We're connected (or reconnected)! Do anything here that should happen only if online (or on reconnect)
    const con = push(myConnectionsRef);

    // When I disconnect, remove this device
    onDisconnect(con).remove();

    // Add this device to my connections list
    // this value could contain info about the device or a timestamp too
    set(con, true);

    // When I disconnect, update the last time I was seen online
    onDisconnect(lastOnlineRef).set(serverTimestamp());
  }
});
rtdb_sample_presence_app.js

// Since I can connect from multiple devices or browser tabs, we store each connection instance separately
// any time that connectionsRef's value is null (i.e. has no children) I am offline
var myConnectionsRef = firebase.database().ref('users/joe/connections');

// stores the timestamp of my last disconnect (the last time I was seen online)
var lastOnlineRef = firebase.database().ref('users/joe/lastOnline');

var connectedRef = firebase.database().ref('.info/connected');
connectedRef.on('value', (snap) => {
  if (snap.val() === true) {
    // We're connected (or reconnected)! Do anything here that should happen only if online (or on reconnect)
    var con = myConnectionsRef.push();

    // When I disconnect, remove this device
    con.onDisconnect().remove();

    // Add this device to my connections list
    // this value could contain info about the device or a timestamp too
    con.set(true);

    // When I disconnect, update the last time I was seen online
    lastOnlineRef.onDisconnect().set(firebase.database.ServerValue.TIMESTAMP);
  }
});
offline.js