SQLite Wasm w przeglądarce korzystającej z prywatnego systemu plików źródła

Dzięki SQLite możesz wydajnie zarządzać wszystkimi zapasami miejsca na dane w internecie.

Informacje o SQLite

SQLite – popularny, open source, lekki, osadzony relacyjny system zarządzania bazami danych. Wielu programistów używa jej do przechowywania danych w uporządkowany i prosty w użyciu sposób. Ze względu na mały rozmiar i małą pamięć SQLite jest często wykorzystywany jako silnik bazy danych w urządzeniach mobilnych, aplikacje komputerowe i przeglądarki.

Jedną z kluczowych cech SQLite jest to, że jest to bezserwerowa baza danych, oznacza, że do działania nie potrzeba osobnego procesu serwera. Zamiast tego: jest przechowywana w jednym pliku na urządzeniu użytkownika, integrują się z aplikacjami.

Logo SQLite.

SQLite oparty na Web Assembly

Istnieje wiele nieoficjalnych wersji SQLite opartych na Web Assembly (Wasm), umożliwiając korzystanie z niej w przeglądarkach, na przykład sql.js Podprojekt WASM/JS sqlite3 to oficjalnie wiążąc się z Projekt SQLite tworzący kompilacje Wasm z biblioteki członków rodziny obsługiwanych materiałów SQLite. Beton Cele tego projektu to:

  • Powiązanie niskopoziomowego interfejsu API sqlite3, który jest jak najbardziej zbliżony do interfejsu API C warunki korzystania z usługi.
  • Interfejs API wyższego poziomu zorientowany obiektowo sql.js i implementacji w stylu Node.js, komunikuje się bezpośrednio z niskim poziomem interfejsu API. Tego interfejsu API należy używać z tego samego jako niskopoziomowego interfejsu API.
  • Interfejs API instancji roboczej, który przemawia do poprzednich interfejsów API za pomocą komunikatów instancji roboczej. Ten jest przeznaczona do użycia w wątku głównym, a interfejsy API niższego poziomu – zostały zainstalowane w wątku instancji roboczej i rozmawiają z nimi za pomocą wiadomości.
  • Oparty na obietnicy wariant interfejsu Worker API, który całkowicie ukrywa czyli interakcje użytkownika z reklamą w różnych wątkach.
  • obsługa trwałej pamięci po stronie klienta przy użyciu dostępnych interfejsów API JavaScript, w tym Origin Private File System (OPFS).

Użycie bazy danych SQLite Wasm z backendem trwałości prywatnego systemu plików punktu początkowego

Instaluję bibliotekę z npm

Zainstaluj @sqlite.org/sqlite-wasm package z npm za pomocą tego polecenia:

npm install @sqlite.org/sqlite-wasm

Prywatny system plików punktu początkowego

Origin Private File System (OPFS), który jest częścią File System Access API) został uzupełniony o specjalną platformę, która zapewnia bardzo skuteczny dostęp do danych. Ta nowa platforma różni się od istniejących możliwości tym, że oferuje lokalny i wyłączny dostęp z możliwością zapisu do zawartość pliku. Ta zmiana wraz z możliwością spójnego czytania nieusunięte zmiany i dostępność synchronicznego wariantu zaangażowanych pracowników, znacznie poprawia wydajność i umożliwia korzystanie z nowych funkcji przypadków.

Ostatnim celem projektu jest wsparcie trwałą pamięć po stronie klienta za pomocą dostępnych interfejsów API JavaScript. ścisłe wymagania dotyczące wydajności w zakresie zachowywania danych w pliku bazy danych. To tu punkt początkowy prywatnego systemu plików, a dokładniej createSyncAccessHandle() metoda FileSystemFileHandle Ta metoda zwraca obietnicę, która odnosi się do FileSystemSyncAccessHandle którego można używać do synchronicznego odczytu i zapisu w pliku. synchroniczny charakter tej metody zwiększa wydajność, ale można jej używać tylko wewnątrz Skrypty Web Workers dla w prywatnym systemie plików origin, aby nie można było zablokować wątku głównego.

Ustawianie wymaganych nagłówków

Pobrane archiwum Wasm SQLite zawiera między innymi te pliki: sqlite3.js i sqlite3.wasm, które składają się na kompilację sqlite3 WASM/JS. jswasm katalog zawiera podstawowe materiały dostarczane sqlite3 i katalog najwyższego poziomu zawiera aplikacje demonstracyjne i testowe. Przeglądarki nie będą wyświetlać plików Wasm z: file://, więc wszystkie aplikacje, które tworzysz, wymagają serwera WWW, serwer musi umieszczać w odpowiedzi następujące nagłówki podczas udostępniania pliki:

Powodem stosowania tych nagłówków jest to, że Wasm SQLite zależy od SharedArrayBuffer a ustawienie tych nagłówków jest częścią wymaganiami dotyczącymi bezpieczeństwa.

Jeśli sprawdzisz ruch za pomocą Narzędzi deweloperskich, zobaczysz te wyniki: informacje:

Dwa wspomniane wyżej nagłówki – Cross-Origin-Embedder-Policy i cross-Origin-Opener-Policy zaznaczone w Narzędziach deweloperskich w Chrome.

Test szybkości

Zespół SQLite przeprowadził testy porównawcze swojej implementacji WebAssembly w porównaniu z wycofaną usługą Web SQL. Te analizy porównawcze pokazują, że Wasm SQLite jest mniej więcej tyle co Web SQL. Czasem wolniej, a czasem trochę wolniej cały czas rośnie. Zobacz wszystkie informacje na stronie wyników.

Przykładowy kod dla początkujących

Jak wspomnieliśmy wcześniej, SQLite Wasm z prywatnym systemem plików origin trwałość musi być uruchamiana z kontekstu instancji roboczej. Dobra wiadomość jest taka, Biblioteka automatycznie zajmie się tym za Ciebie i będzie można z niej korzystać prosto z wątku głównego.

import { sqlite3Worker1Promiser } from '@sqlite.org/sqlite-wasm';

(async () => {
  try {
    console.log('Loading and initializing SQLite3 module...');

    const promiser = await new Promise((resolve) => {
      const _promiser = sqlite3Worker1Promiser({
        onready: () => {
          resolve(_promiser);
        },
      });
    });

    console.log('Done initializing. Running demo...');

    let response;

    response = await promiser('config-get', {});
    console.log('Running SQLite3 version', response.result.version.libVersion);

    response = await promiser('open', {
      filename: 'file:worker-promiser.sqlite3?vfs=opfs',
    });
    const { dbId } = response;
    console.log(
      'OPFS is available, created persisted database at',
      response.result.filename.replace(/^file:(.*?)\?vfs=opfs$/, '$1'),
    );

    await promiser('exec', { dbId, sql: 'CREATE TABLE IF NOT EXISTS t(a,b)' });
    console.log('Creating a table...');

    console.log('Insert some data using exec()...');
    for (let i = 20; i <= 25; ++i) {
      await promiser('exec', {
        dbId,
        sql: 'INSERT INTO t(a,b) VALUES (?,?)',
        bind: [i, i * 2],
      });
    }

    console.log('Query data with exec()');
    await promiser('exec', {
      dbId,
      sql: 'SELECT a FROM t ORDER BY a LIMIT 3',
      callback: (result) => {
        if (!result.row) {
          return;
        }
        console.log(result.row);
      },
    });

    await promiser('close', { dbId });
  } catch (err) {
    if (!(err instanceof Error)) {
      err = new Error(err.result.message);
    }
    console.error(err.name, err.message);
  }
})();

Prezentacja

Zobacz powyższy kod w praktyce w prezentacji. Zapoznaj się z kod źródłowy w usłudze Glitch. Zwróć uwagę, że niżej umieszczona wersja nie korzysta z backendu OPFS. ale po otwarciu wersji demonstracyjnej osobną kartę.

Debugowanie prywatnego systemu plików punktu początkowego

Aby debugować dane wyjściowe pierwotnego systemu plików Wasm SQLite, użyj Eksplorator OPFS Rozszerzenie do Chrome.

OPFS Explorer w Chrome Web Store.

Po zainstalowaniu rozszerzenia otwórz Narzędzia deweloperskie w Chrome, wybierz plik OPFS. Eksplorator i wtedy możesz sprawdzić, co SQLite Wasm zapisuje w Origin Private File System.

Rozszerzenie do Chrome OPFS Explorer pokazujące strukturę prywatnego systemu plików punktu początkowego w aplikacji w wersji demonstracyjnej.

Jeśli klikniesz dowolny plik w oknie Eksplorator OPFS w Narzędziach deweloperskich, i może zapisać go na dysku lokalnym. Możesz też użyć aplikacji, takiej jak Wyświetlający SQLite do badania bazy danych, dzięki czemu możesz upewnić się, że Wasm SQLite działa zgodnie z obietnicą.

Aplikacja SQLite Viewer używana do otwierania pliku bazy danych z wersji demonstracyjnej SQLite Wasm.

Uzyskiwanie pomocy i przekazywanie opinii

Projekt SQLite Wasm został opracowany i utrzymywany przez społeczność SQLite. Uzyskaj pomoc prześlij opinię, wyszukując ją i publikując na forum pomocy. Pełną listę dokumentacja jest dostępna na stronie SQLite.

Podziękowania

Baner powitalny: Tobias Fischer, w: Odchylenie.