הפעלת יכולות במצב אופליין ב-JavaScript

אפליקציות Firebase פועלות גם אם החיבור של האפליקציה לרשת נותק באופן זמני. במסמך הזה אנחנו מציגים כמה כלים למעקב אחר הנוכחות ולסנכרון המצב המקומי עם מצב השרת.

ניהול הנוכחות

באפליקציות בזמן אמת, לעיתים קרובות כדאי לזהות מתי לקוחות מתחברים ומתנתקים. לדוגמה, יכול להיות שתרצו לסמן משתמש כ 'אופליין' כשהלקוח שלו מתנתק.

לקוחות של Firebase Database מספקים פרימיטיבים פשוטים שאפשר להשתמש בהם כדי לכתוב למסד הנתונים כשלקוח מתנתק משרתי Firebase Database. העדכונים האלה מתרחשים בין אם הלקוח מתנתק בצורה תקינה ובין אם לא, כך שאפשר להסתמך עליהם כדי לנקות את הנתונים גם אם החיבור נפל או שהלקוח קרס. אפשר לבצע את כל פעולות הכתיבה, כולל הגדרה, עדכון והסרה, גם כשאין חיבור.

זוהי דוגמה פשוטה לכתיבת נתונים לאחר ניתוק באמצעות הפרימיטיב onDisconnect:

Web

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

Web

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

איך פועלת הפונקציה onDisconnect

כשמגדירים פעולת onDisconnect(), הפעולה מתבצעת בשרת Firebase Realtime Database. השרת בודק את האבטחה כדי לוודא שהמשתמש יכול לבצע את אירוע הכתיבה המבוקש, ומודיע לאפליקציה אם הבקשה לא תקינה. השרת עוקב אחרי החיבור. אם החיבור נכשל בגלל פסק זמן או אם הוא נסגר באופן פעיל על ידי לקוח Realtime Database, השרת בודק את האבטחה בפעם השנייה (כדי לוודא שהפעולה עדיין תקפה) ואז מפעיל את האירוע.

האפליקציה יכולה להשתמש בקריאה החוזרת בפעולת הכתיבה כדי לוודא ש-onDisconnect צורף בצורה נכונה:

Web

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

Web

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

אפשר גם לבטל onDisconnectאירוע.cancel() באמצעות קריאה ל-.cancel():

Web

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

Web

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

זיהוי מצב החיבור

במקרים רבים, כדי להשתמש בתכונות שקשורות לנוכחות, האפליקציה צריכה לדעת אם היא במצב אונליין או אופליין. ‫Firebase Realtime Database מספק מיקום מיוחד ב-/.info/connected שמתעדכן בכל פעם שמשתנה מצב החיבור של לקוח Firebase Realtime Database. לדוגמה:

Web

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

Web

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 Database כי הערך תלוי במצב הלקוח. במילים אחרות, אם לקוח אחד קורא את /.info/connected כ-false, אין זה אומר שלקוח אחר יקרא גם הוא false.

זמן האחזור של הטיפול

חותמות זמן של השרת

השרתים של Firebase Realtime Database מספקים מנגנון להוספת חותמות זמן שנוצרות בשרת כנתונים. התכונה הזו, בשילוב עם onDisconnect, מאפשרת לתעד בקלות ובאופן מהימן את השעה שבה לקוח Realtime Database התנתק:

Web

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

Web

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

הטיה בשעון

‫firebase.database.ServerValue.TIMESTAMP מדויק הרבה יותר, ועדיף לרוב פעולות הקריאה והכתיבה, אבל לפעמים כדאי להשתמש בו כדי להעריך את הטיית השעון של הלקוח ביחס לשרתים של Firebase Realtime Database. אפשר לצרף קריאה חוזרת למיקום /.info/serverTimeOffset כדי לקבל את הערך, באלפיות שנייה, שבו לקוחות Firebase Realtime Database מוסיפים לזמן המקומי המדווח (זמן עידן באלפיות שנייה) כדי להעריך את זמן השרת. חשוב לציין שזמן האחזור ברשת יכול להשפיע על הדיוק של ההפרש הזה, ולכן הוא שימושי בעיקר כדי לגלות פערים גדולים (> שנייה אחת) בשעון.

Web

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

Web

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

אפליקציה לדוגמה לזיהוי נוכחות

אפשר לשלב בין פעולות ניתוק לבין מעקב אחרי מצב החיבור וחותמות הזמן של השרת כדי ליצור מערכת לזיהוי נוכחות משתמשים. במערכת הזו, כל משתמש מאחסן נתונים במיקום במסד הנתונים כדי לציין אם לקוח Realtime Database מחובר לאינטרנט או לא. הלקוחות מגדירים את המיקום הזה כ-true כשהם מתחברים לאינטרנט, וחותמת זמן כשהם מתנתקים. חותמת הזמן הזו מציינת את הפעם האחרונה שבה המשתמש היה אונליין.

שימו לב: האפליקציה צריכה להוסיף את פעולות הניתוק לתור לפני שמשתמש מסומן כאונליין, כדי למנוע מצבי מירוץ במקרה שחיבור הרשת של הלקוח מתנתק לפני ששתי הפקודות נשלחות לשרת.

זוהי מערכת פשוטה של נוכחות משתמש:

Web

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

Web

// 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