Ikuti semua informasi yang diumumkan di Firebase Summit, dan pelajari bagaimana Firebase dapat membantu Anda mempercepat pengembangan aplikasi dan menjalankan aplikasi dengan percaya diri. Pelajari Lebih Lanjut

Mengaktifkan Kemampuan Offline di JavaScript

Tetap teratur dengan koleksi Simpan dan kategorikan konten berdasarkan preferensi Anda.

Aplikasi Firebase berfungsi meskipun aplikasi Anda kehilangan koneksi jaringannya untuk sementara. Kami menyediakan beberapa alat untuk memantau keberadaan dan menyinkronkan status lokal dengan status server, yang diperkenalkan dalam dokumen ini.

Mengelola Kehadiran

Dalam aplikasi realtime seringkali berguna untuk mendeteksi kapan klien terhubung dan terputus. Misalnya, Anda mungkin ingin menandai pengguna sebagai 'offline' saat klien mereka terputus.

Klien Firebase Database menyediakan primitif sederhana yang dapat Anda gunakan untuk menulis ke database saat klien terputus dari server Firebase Database. Pembaruan ini terjadi apakah klien terputus dengan bersih atau tidak, sehingga Anda dapat mengandalkan mereka untuk membersihkan data bahkan jika koneksi terputus atau klien lumpuh. Semua operasi tulis, termasuk menyetel, memperbarui, dan menghapus, dapat dilakukan setelah pemutusan.

Berikut adalah contoh sederhana penulisan data setelah pemutusan dengan menggunakan primitif 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!");

Bagaimana onDisconnect Bekerja

Saat Anda membuat operasi onDisconnect() , operasi tersebut berada di server Firebase Realtime Database. Server memeriksa keamanan untuk memastikan pengguna dapat melakukan peristiwa tulis yang diminta, dan memberi tahu aplikasi Anda jika tidak valid. Server kemudian memonitor koneksi. Jika sewaktu-waktu koneksi habis, atau ditutup secara aktif oleh klien Realtime Database, server akan memeriksa keamanan untuk kedua kalinya (untuk memastikan operasi masih valid) dan kemudian memanggil peristiwa tersebut.

Aplikasi Anda bisa menggunakan callback pada operasi tulis untuk memastikan onDisconnect terpasang dengan benar:

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

Acara onDisconnect juga dapat dibatalkan dengan memanggil .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();

Mendeteksi Status Koneksi

Untuk banyak fitur terkait kehadiran, aplikasi Anda perlu mengetahui kapan sedang online atau offline. Firebase Realtime Database menyediakan lokasi khusus di /.info/connected yang diperbarui setiap kali status koneksi klien Firebase Realtime Database berubah. Ini contohnya:

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 adalah nilai boolean yang tidak disinkronkan antara klien Realtime Database karena nilainya bergantung pada status klien. Dengan kata lain, jika satu klien membaca /.info/connected sebagai salah, ini bukan jaminan bahwa klien terpisah juga akan membaca salah.

Menangani Latensi

Stempel Waktu Server

Server Firebase Realtime Database menyediakan mekanisme untuk memasukkan stempel waktu yang dihasilkan di server sebagai data. Fitur ini, digabungkan dengan onDisconnect , menyediakan cara mudah untuk mencatat waktu ketika klien Realtime Database terputus:

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

Kemiringan Jam

Meskipun firebase.database.ServerValue.TIMESTAMP jauh lebih akurat, dan lebih disukai untuk sebagian besar operasi baca/tulis, terkadang berguna untuk memperkirakan kemiringan jam klien sehubungan dengan server Firebase Realtime Database. Anda dapat melampirkan callback ke lokasi /.info/serverTimeOffset untuk mendapatkan nilai, dalam milidetik, yang ditambahkan oleh klien Firebase Realtime Database ke waktu lokal yang dilaporkan (waktu zaman dalam milidetik) untuk memperkirakan waktu server. Perhatikan bahwa akurasi offset ini dapat dipengaruhi oleh latensi jaringan, sehingga berguna terutama untuk menemukan perbedaan besar (> 1 detik) dalam waktu jam.

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

Contoh Aplikasi Kehadiran

Dengan menggabungkan operasi pemutusan sambungan dengan pemantauan status koneksi dan stempel waktu server, Anda dapat membangun sistem kehadiran pengguna. Dalam sistem ini, setiap pengguna menyimpan data di lokasi database untuk menunjukkan apakah klien Realtime Database sedang online atau tidak. Klien menyetel lokasi ini ke true saat mereka online dan stempel waktu saat mereka memutuskan hubungan. Stempel waktu ini menunjukkan kapan terakhir kali pengguna tersebut online.

Perhatikan bahwa aplikasi Anda harus mengantrikan operasi pemutusan sambungan sebelum pengguna ditandai online, untuk menghindari kondisi balapan jika koneksi jaringan klien terputus sebelum kedua perintah dapat dikirim ke server.

Berikut adalah sistem kehadiran pengguna yang sederhana:

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