JavaScript में ऑफ़लाइन क्षमताएं चालू करना

अगर आपके ऐप्लिकेशन का नेटवर्क कनेक्शन कुछ समय के लिए टूट जाता है, तब भी Firebase ऐप्लिकेशन काम करते हैं. हम उपस्थिति की निगरानी करने और स्थानीय स्थिति को सर्वर की स्थिति के साथ सिंक करने के लिए कई टूल उपलब्ध कराते हैं. इनके बारे में इस दस्तावेज़ में बताया गया है.

उपस्थिति मैनेज करना

रीयलटाइम ऐप्लिकेशन में, यह पता लगाना अक्सर काम का होता है कि क्लाइंट कब कनेक्ट और डिसकनेक्ट होते हैं. उदाहरण के लिए, जब किसी उपयोगकर्ता का क्लाइंट डिसकनेक्ट हो जाता है, तो हो सकता है कि आपको उसे 'ऑफ़लाइन' के तौर पर मार्क करना हो.

Firebase डेटाबेस क्लाइंट, आसान प्रिमिटिव उपलब्ध कराते हैं. इनका इस्तेमाल करके, Firebase डेटाबेस सर्वर से क्लाइंट के डिसकनेक्ट होने पर, डेटाबेस में लिखा जा सकता है. ये अपडेट तब भी होते हैं, जब क्लाइंट सही तरीके से डिसकनेक्ट नहीं होता, इसलिए, कनेक्शन टूटने या क्लाइंट क्रैश होने पर भी, डेटा को साफ़ करने के लिए इन पर भरोसा किया जा सकता है. डिसकनेक्ट होने पर, लिखने से जुड़ी सभी कार्रवाइयां की जा सकती हैं. इनमें सेटिंग, अपडेट करना, और हटाना शामिल है.

` 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!");

Web

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

onDisconnect कैसे काम करता है

onDisconnect() कार्रवाई सेट करने पर, यह कार्रवाई Firebase Realtime Database सर्वर पर काम करती है. सर्वर, सुरक्षा की जांच करता है, ताकि यह पक्का किया जा सके कि उपयोगकर्ता, अनुरोध किया गया राइट इवेंट कर सकता है या नहीं. अगर यह अमान्य है, तो सर्वर आपके ऐप्लिकेशन को इसकी सूचना देता है. इसके बाद, सर्वर कनेक्शन की निगरानी करता है. अगर किसी भी समय कनेक्शन टाइम आउट हो जाता है या Realtime Database क्लाइंट की मदद से, कनेक्शन को बंद कर दिया जाता है, तो सर्वर दूसरी बार सुरक्षा की जांच करता है. इससे यह पक्का किया जाता है कि कार्रवाई अब भी मान्य है. इसके बाद, सर्वर इवेंट को शुरू करता है.

आपका ऐप्लिकेशन, राइट ऑपरेशन पर कॉलबैक का इस्तेमाल कर सकता है यह पक्का करने के लिए कि onDisconnect सही तरीके से अटैच किया गया था:

Web

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

Web

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

.cancel() को कॉल करके, onDisconnect इवेंट को रद्द भी किया जा सकता है:

Web

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

Web

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

कनेक्शन की स्थिति का पता लगाना

उपस्थिति से जुड़ी कई सुविधाओं के लिए, यह जानना ज़रूरी है कि आपका ऐप्लिकेशन ऑनलाइन है या ऑफ़लाइन. 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");
  }
});

Web

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

/.info/connected एक बूलियन वैल्यू है, जो Realtime Database क्लाइंट के बीच सिंक नहीं होती. इसकी वजह यह है कि वैल्यू, क्लाइंट की स्थिति पर निर्भर करती है. दूसरे शब्दों में कहें, तो अगर कोई क्लाइंट /.info/connected को 'फ़ॉल्स' के तौर पर पढ़ता है, तो इसकी कोई गारंटी नहीं है कि कोई दूसरा क्लाइंट भी इसे 'फ़ॉल्स' के तौर पर पढ़ेगा.

इंतज़ार के समय को मैनेज करना

सर्वर टाइमस्टैंप

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());

Web

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

घड़ी में अंतर

हालांकि firebase.database.ServerValue.TIMESTAMP ज़्यादा सटीक है. साथ ही, ज़्यादातर रीड/राइट ऑपरेशन के लिए इसका इस्तेमाल करना बेहतर है. हालांकि, कभी-कभी Firebase Realtime Database के सर्वर के हिसाब से, क्लाइंट की घड़ी में अंतर का अनुमान लगाना काम का हो सकता है. वैल्यू पाने के लिए, /.info/serverTimeOffset जगह पर कॉलबैक अटैच किया जा सकता है. यह वैल्यू, मिलीसेकंड में होती है. Firebase Realtime Database क्लाइंट, सर्वर के समय का अनुमान लगाने के लिए, स्थानीय तौर पर रिपोर्ट किए गए समय (मिलीसेकंड में इपोक टाइम) में इस वैल्यू को जोड़ते हैं. ध्यान दें कि इस ऑफ़सेट की सटीक जानकारी, नेटवर्क के इंतज़ार के समय से प्रभावित हो सकती है. इसलिए, इसका इस्तेमाल मुख्य रूप से घड़ी के समय में बड़े (> 1 सेकंड) अंतर का पता लगाने के लिए किया जाता है.

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;
});

Web

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

उपस्थिति दिखाने वाला सैंपल ऐप्लिकेशन

डिसकनेक्ट करने के ऑपरेशन को, कनेक्शन की स्थिति की निगरानी और सर्वर टाइमस्टैंप के साथ जोड़कर, उपयोगकर्ता की उपस्थिति दिखाने वाला सिस्टम बनाया जा सकता है. इस सिस्टम में, हर उपयोगकर्ता डेटाबेस की किसी जगह पर डेटा सेव करता है. इससे यह पता चलता है कि Realtime Database क्लाइंट ऑनलाइन है या नहीं. क्लाइंट, ऑनलाइन होने पर इस जगह को 'सही' पर सेट करते हैं. वहीं, डिसकनेक्ट होने पर, टाइमस्टैंप सेट करते हैं. इस टाइमस्टैंप से पता चलता है कि दिया गया उपयोगकर्ता पिछली बार कब ऑनलाइन था.

ध्यान दें कि आपके ऐप्लिकेशन को, उपयोगकर्ता को ऑनलाइन के तौर पर मार्क करने से पहले, डिसकनेक्ट करने के ऑपरेशन को क्यू करना चाहिए. ऐसा इसलिए, ताकि अगर सर्वर को दोनों कमांड भेजने से पहले, क्लाइंट का नेटवर्क कनेक्शन टूट जाता है, तो रेस कंडीशन से बचा जा सके.

यहां उपयोगकर्ता की उपस्थिति दिखाने वाला एक आसान सिस्टम दिया गया है:

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());
  }
});

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);
  }
});