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ığı izlemek ve yerel durumu sunucu durumuyla senkronize etmek için çeşitli araçlar sunuyoruz.

Varlığı Yönetme

Gerçek zamanlı uygulamalarda, istemcilerin ne zaman bağlandığını ve bağlantısını kestiğini algılamak genellikle yararlıdır. Örneğin, istemcisinin bağlantısı kesilen bir kullanıcıyı "çevrimdışı" olarak işaretlemek isteyebilirsiniz.

Firebase Database istemcileri, bir istemci Firebase Database sunucularının bağlantısını kestiğinde veritabanına yazmak için kullanabileceğiniz basit temel öğeler sağlar. Bu güncellemeler, istemcinin bağlantısı düzgün bir şekilde kesilse de kesilmese de gerçekleşir. Bu nedenle, bağlantı düşse veya istemci kilitlense bile verileri temizlemek için bu güncellemelerden yararlanabilirsiniz. Ayar yapma, güncelleme ve kaldırma dahil olmak üzere tüm yazma işlemleri bağlantı kesildiğinde gerçekleştirilebilir.

onDisconnect temel öğesini kullanarak bağlantı kesildiğinde veri yazma ile ilgili basit bir örneği aşağıda bulabilirsiniz:

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'in işleyiş şekli

onDisconnect() işlemi oluşturduğunuzda işlem, Firebase Realtime Database sunucusunda yer alır. Sunucu, kullanıcının istenen yazma etkinliğini 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. Bağlantının herhangi bir noktada zaman aşımına uğraması veya Realtime Database istemcisi tarafından etkin olarak kapatılması durumunda sunucu, işlemi ikinci kez kontrol eder (işlemin hâlâ geçerli olduğundan emin olmak için) ve ardından etkinliği çağırır.

Uygulamanız, onDisconnect öğesinin doğru şekilde eklendiğinden emin olmak için yazma işlemindeki geri çağırmayı kullanabilir:

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 etkinliği .cancel() numarası aranarak da iptal edilebilir:

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

Bağlantı durumunu algılama

Birçok varlık özelliği için uygulamanızın ne zaman çevrimiçi veya çevrimdışı olduğunu bilmesi yararlıdır. Firebase Realtime Database /.info/connected konumunda özel bir konum sağlar. Bu konum, Firebase Realtime Database istemcisinin bağlantı durumu her değiştiğinde güncellenir. Bir örnek verelim:

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, istemcinin durumuna bağlı olduğu için Realtime Database istemcileri arasında senkronize edilmeyen bir Boole değeridir. Diğer bir deyişle, bir istemci /.info/connected değerini yanlış olarak okursa ayrı bir istemcinin de yanlış olarak okuyacağı garanti edilmez.

İşleme Gecikmesi

Sunucu Zaman Damgaları

Firebase Realtime Database sunucuları, sunucuda oluşturulan zaman damgalarını veri olarak eklemek için bir mekanizma sağlar. Bu özellik, onDisconnect ile birlikte kullanıldığında Realtime Database istemcisinin bağlantısının kesildiği zamanı güvenilir bir şekilde not almanın kolay bir yolunu sunar:

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

Saat Sapması

firebase.database.ServerValue.TIMESTAMP çok daha doğru olsa ve çoğu okuma/yazma işlemi için tercih edilse de Firebase Realtime Database sunucularına göre istemcinin saat sapmasını tahmin etmek bazen yararlı olabilir. Sunucu saatini tahmin etmek için /.info/serverTimeOffset konumuna bir geri çağırma ekleyerek Firebase Realtime Database istemcilerinin yerel olarak bildirilen saate (milisaniye cinsinden dönem zamanı) eklediği değeri milisaniye cinsinden elde edebilirsiniz. Bu farkın doğruluğunun ağ gecikmesinden etkilenebileceğini ve bu nedenle öncelikle saat zamanındaki büyük (> 1 saniye) tutarsızlıkları keşfetmek için yararlı olduğunu unutmayın.

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

Örnek Presence Uygulaması

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

İstemcinin ağ bağlantısı her iki komut da sunucuya gönderilmeden önce kaybolursa yarış durumu oluşmasını önlemek için uygulamanızın, kullanıcı çevrimiçi olarak işaretlenmeden önce bağlantıyı kesme işlemlerini sıraya alması gerektiğini unutmayın.

Basit bir kullanıcı varlığı sistemi:

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