JavaScript'te Çevrimdışı Özellikleri Etkinleştirme

Firebase uygulamaları, uygulamanızın ağ bağlantısı geçici olarak kesilse bile çalışır. Bu belgede tanıtılan, varlığın izlenmesi ve yerel durumu sunucu durumuyla senkronize etmek için çeşitli araçlar sağlıyoruz.

Varlığı Yönetmek

Gerçek zamanlı uygulamalarda, istemcilerin ne zaman bağlanıp bağlantılarını kestiğini tespit etmek genellikle faydalıdır. Örneğin, istemcisinin bağlantısı kesildiğinde bir kullanıcıyı 'çevrimdışı' olarak işaretlemek isteyebilirsiniz.

Firebase Veritabanı istemcileri, bir istemcinin Firebase Veritabanı sunucularıyla bağlantısı kesildiğinde veritabanına yazmak için kullanabileceğiniz basit temel öğeler sağlar. Bu güncellemeler, istemcinin bağlantısı temiz bir şekilde kesilse de kesilmese de gerçekleşir; böylece bağlantı kesilse veya istemci çökse bile verileri temizlemek için bunlara güvenebilirsiniz. Ayarlama, güncelleme ve kaldırma dahil tüm yazma işlemleri bağlantı kesildiğinde gerçekleştirilebilir.

Bağlantı kesildiğinde onDisconnect ilkelini kullanarak veri yazmanın basit bir örneği:

Web modular API

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 namespaced API

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

Bağlantıyı Kesme Nasıl Çalışır?

Bir onDisconnect() işlemi oluşturduğunuzda, işlem Firebase Gerçek Zamanlı Veritabanı sunucusunda yaşar. Sunucu, kullanıcının istenen yazma olayını gerçekleştirebildiğinden emin olmak için güvenliği kontrol eder ve geçersizse uygulamanızı bilgilendirir. Sunucu daha sonra bağlantıyı izler. Herhangi bir noktada bağlantı zaman aşımına uğrarsa veya Realtime Database istemcisi tarafından aktif olarak kapatılırsa, sunucu güvenliği ikinci kez kontrol eder (işlemin hala geçerli olduğundan emin olmak için) ve ardından olayı başlatır.

Uygulamanız onDisconnect doğru şekilde eklendiğinden emin olmak için yazma işleminde geri aramayı kullanabilir:

Web modular API

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

Web namespaced API

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

Bir onDisconnect olayı, .cancel() çağrılarak da iptal edilebilir:

Web modular API

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

Web namespaced API

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

Bağlantı Durumunu Algılama

Durumla ilgili birçok özellik için uygulamanızın ne zaman çevrimiçi veya çevrimdışı olduğunu bilmesi faydalıdır. Firebase Gerçek Zamanlı Veritabanı, /.info/connected adresinde, Firebase Gerçek Zamanlı Veritabanı istemcisinin bağlantı durumu her değiştiğinde güncellenen özel bir konum sağlar. İşte bir örnek:

Web modular API

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 namespaced API

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 , değer istemcinin durumuna bağlı olduğundan Gerçek Zamanlı Veritabanı istemcileri arasında senkronize edilmeyen bir boole değeridir. Başka bir deyişle, eğer bir istemci /.info/connected false olarak okursa, bu, ayrı bir istemcinin de false olarak okuyacağını garanti etmez.

Gecikmeyi Yönetme

Sunucu Zaman Damgaları

Firebase Gerçek Zamanlı Veritabanı sunucuları, sunucuda oluşturulan zaman damgalarını veri olarak eklemek için bir mekanizma sağlar. onDisconnect ile birleştirilen bu özellik, Gerçek Zamanlı Veritabanı istemcisinin bağlantısının kesildiği zamanı güvenilir bir şekilde not etmenin kolay bir yolunu sağlar:

Web modular API

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 namespaced API

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

Saat Eğrisi

firebase.database.ServerValue.TIMESTAMP çok daha doğru ve çoğu okuma/yazma işlemi için tercih edilir olsa da, Firebase Gerçek Zamanlı Veritabanı sunucularına göre istemcinin saat çarpıklığını tahmin etmek bazen yararlı olabilir. Firebase Realtime Database istemcilerinin sunucu süresini tahmin etmek için yerel olarak bildirilen zamana (milisaniye cinsinden dönem süresi) eklediği değeri milisaniye cinsinden elde etmek için /.info/serverTimeOffset konumuna bir geri çağrı ekleyebilirsiniz. Bu farkın doğruluğunun ağ gecikmesinden etkilenebileceğini ve bu nedenle öncelikle saat zamanındaki büyük (> 1 saniye) farklılıkların keşfedilmesinde yararlı olduğunu unutmayın.

Web modular API

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 namespaced API

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

Örnek Varlık Uygulaması

Bağlantı kesme işlemlerini bağlantı durumu izleme ve sunucu zaman damgalarıyla birleştirerek bir kullanıcı varlığı sistemi oluşturabilirsiniz. Bu sistemde her kullanıcı, Gerçek Zamanlı Veritabanı istemcisinin çevrimiçi olup olmadığını belirtmek için verileri bir veritabanı konumunda saklar. İstemciler çevrimiçi olduklarında bu konumu true olarak ve bağlantıyı kestiklerinde zaman damgasını ayarlar. Bu zaman damgası, söz konusu kullanıcının en son ne zaman çevrimiçi olduğunu gösterir.

Her iki komutun da sunucuya gönderilebilmesinden önce istemcinin ağ bağlantısının kesilmesi durumunda herhangi bir yarış koşulundan kaçınmak için, bir kullanıcı çevrimiçi olarak işaretlenmeden önce uygulamanızın bağlantı kesme işlemlerini sıraya koyması gerektiğini unutmayın.

İşte basit bir kullanıcı varlığı sistemi:

Web modular API

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 namespaced API

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