Check out what’s new from Firebase at Google I/O 2022. Learn more

जावास्क्रिप्ट में ऑफ़लाइन क्षमताओं को सक्षम करना

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

उपस्थिति प्रबंधन

रीयलटाइम अनुप्रयोगों में यह पता लगाना अक्सर उपयोगी होता है कि क्लाइंट कब कनेक्ट और डिस्कनेक्ट होते हैं। उदाहरण के लिए, हो सकता है कि आप किसी उपयोगकर्ता के क्लाइंट के डिस्कनेक्ट होने पर उसे 'ऑफ़लाइन' के रूप में चिह्नित करना चाहें।

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

onDisconnect प्रिमिटिव का उपयोग करके डिस्कनेक्शन पर डेटा लिखने का एक सरल उदाहरण यहां दिया गया है:

Web version 9

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 version 8

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

डिस्कनेक्ट कैसे काम करता है

जब आप onDisconnect() ऑपरेशन स्थापित करते हैं, तो ऑपरेशन फायरबेस रीयलटाइम डेटाबेस सर्वर पर रहता है। सर्वर यह सुनिश्चित करने के लिए सुरक्षा की जांच करता है कि उपयोगकर्ता अनुरोधित लिखित घटना को निष्पादित कर सकता है, और यदि यह अमान्य है तो आपके ऐप को सूचित करता है। सर्वर तब कनेक्शन की निगरानी करता है। यदि किसी भी समय कनेक्शन का समय समाप्त हो जाता है, या रीयलटाइम डेटाबेस क्लाइंट द्वारा सक्रिय रूप से बंद कर दिया जाता है, तो सर्वर दूसरी बार सुरक्षा की जांच करता है (यह सुनिश्चित करने के लिए कि ऑपरेशन अभी भी मान्य है) और फिर ईवेंट को आमंत्रित करता है।

onDisconnect सही ढंग से संलग्न था यह सुनिश्चित करने के लिए आपका ऐप लिखने के संचालन पर कॉलबैक का उपयोग कर सकता है:

Web version 9

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

Web version 8

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

एक onDisconnect घटना को .cancel() पर कॉल करके भी रद्द किया जा सकता है:

Web version 9

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

Web version 8

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

कनेक्शन राज्य का पता लगाना

कई उपस्थिति-संबंधी सुविधाओं के लिए, आपके ऐप के लिए यह जानना उपयोगी होता है कि यह ऑनलाइन या ऑफलाइन कब है। Firebase रीयलटाइम डेटाबेस /.info/connected पर एक विशेष स्थान प्रदान करता है जिसे हर बार Firebase रीयलटाइम डेटाबेस क्लाइंट की कनेक्शन स्थिति में परिवर्तन होने पर अपडेट किया जाता है। यहाँ एक उदाहरण है:

Web version 9

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 version 8

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 एक बूलियन मान है जो रीयलटाइम डेटाबेस क्लाइंट के बीच सिंक्रनाइज़ नहीं है क्योंकि मान क्लाइंट की स्थिति पर निर्भर है। दूसरे शब्दों में, यदि कोई क्लाइंट /.info/connected को असत्य के रूप में पढ़ता है, तो इस बात की कोई गारंटी नहीं है कि एक अलग क्लाइंट भी असत्य पढ़ेगा।

विलंबता को संभालना

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

फायरबेस रीयलटाइम डेटाबेस सर्वर सर्वर पर उत्पन्न टाइमस्टैम्प को डेटा के रूप में सम्मिलित करने के लिए एक तंत्र प्रदान करते हैं। onDisconnect के साथ संयुक्त यह सुविधा, रीयलटाइम डेटाबेस क्लाइंट के डिस्कनेक्ट होने के समय को विश्वसनीय रूप से नोट करने का एक आसान तरीका प्रदान करती है:

Web version 9

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

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

Web version 8

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

कालद विचलन

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

Web version 9

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 version 8

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

नमूना उपस्थिति ऐप

कनेक्शन स्थिति निगरानी और सर्वर टाइमस्टैम्प के साथ डिस्कनेक्ट संचालन को जोड़कर, आप एक उपयोगकर्ता उपस्थिति प्रणाली बना सकते हैं। इस प्रणाली में, प्रत्येक उपयोगकर्ता यह इंगित करने के लिए डेटाबेस स्थान पर डेटा संग्रहीत करता है कि रीयलटाइम डेटाबेस क्लाइंट ऑनलाइन है या नहीं। क्लाइंट ऑनलाइन आने पर इस स्थान को सही पर सेट करते हैं और डिस्कनेक्ट होने पर टाइमस्टैम्प। यह टाइमस्टैम्प इंगित करता है कि दिया गया उपयोगकर्ता पिछली बार ऑनलाइन था।

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

यहाँ एक साधारण उपयोगकर्ता उपस्थिति प्रणाली है:

Web version 9

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 version 8

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