Включение автономных возможностей в 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!");
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

При создании операции onDisconnect() она выполняется на сервере Firebase Realtime Database . Сервер проверяет безопасность, чтобы убедиться, что пользователь может выполнить запрошенное событие записи, и сообщает приложению, если оно недействительно. Затем сервер контролирует соединение. Если в какой-либо момент соединение истекает или клиент Realtime Database активно закрывает его, сервер повторно проверяет безопасность (чтобы убедиться, что операция всё ещё допустима), а затем вызывает событие.

Ваше приложение может использовать обратный вызов при операции записи, чтобы убедиться, что onDisconnect был правильно подключен:

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 также можно отменить, вызвав .cancel() :

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

Определение состояния соединения

Для многих функций, связанных с присутствием, вашему приложению полезно знать, находится ли оно онлайн или офлайн. 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");
  }
});
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 — это логическое значение, которое не синхронизируется между клиентами Realtime Database , поскольку зависит от состояния клиента. Другими словами, если один клиент считывает /.info/connected как false, это не гарантирует, что другой клиент также считывает false.

Обработка задержек

Временные метки сервера

Серверы 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());
rtdb_set_server_timestamp.js

Web 

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

Перекос часов

Хотя значение 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;
});
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

Пример приложения присутствия

Комбинируя операции отключения с мониторингом состояния подключения и временными метками сервера, можно построить систему контроля присутствия пользователей. В этой системе каждый пользователь хранит данные в расположении базы данных, чтобы указать, находится ли клиент Realtime Database в сети. Клиенты устанавливают это расположение в значение true при подключении к сети и временную метку при отключении. Эта временная метка указывает время последнего нахождения пользователя в сети.

Обратите внимание, что ваше приложение должно ставить операции отключения в очередь до того, как пользователь будет помечен как находящийся в сети, чтобы избежать состояний гонки в случае, если сетевое соединение клиента будет потеряно до того, как обе команды будут отправлены на сервер.

Вот простая система присутствия пользователя:

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