Kaynak Özel Dosya Sistemi tarafından desteklenen tarayıcıda SQLite Wasm

Tüm depolama ihtiyaçlarınızı web'de etkili bir şekilde karşılamak için SQLite kullanın.

SQLite hakkında

SQLite, popüler, açık kaynaklı, hafif ve yerleşik bir ilişkisel veritabanı yönetim sistemidir. Birçok geliştirici, verileri yapılandırılmış ve kullanımı kolay bir şekilde depolamak için bu çözümden yararlanır. SQLite, küçük boyutu ve düşük bellek gereksinimleri nedeniyle mobil cihazlarda, masaüstü uygulamalarında ve web tarayıcılarında veritabanı motoru olarak sık kullanılır.

SQLite'ın temel özelliklerinden biri sunucusuz bir veritabanı olmasıdır. Bu da, çalışmak için ayrı bir sunucu işlemi gerektirmemesi anlamına gelir. Bunun yerine, veritabanı kullanıcının cihazında tek bir dosyada depolanarak uygulamalara entegre edilmesini kolaylaştırır.

SQLite logosu

Web Assembly tabanlı SQLite

Web Assembly'yi (Wasmm) temel alan ve sql.js gibi web tarayıcılarında kullanılmasına olanak tanıyan, resmi olmayan bazı SQLite sürümleri mevcuttur. sqlite3 WASM/JS alt projesi, desteklenen SQLite teslimatları ailesinin üyeleri olan kitaplıkta Wasm derlemelerini oluşturan SQLite projesiyle resmi olarak ilişkilendirilen ilk çalışmadır. Bu projenin somut hedefleri şunlardır:

  • Kullanım açısından mümkün olan C'ye en yakın düşük seviyeli sqlite3 API'yi bağlama.
  • sql.js ve Node.js stili uygulamalara daha çok benzeyen, doğrudan alt seviyedeki API'ye hitap eden daha üst düzey nesne tabanlı bir API. Bu API, alt seviyeli API ile aynı iş parçacığından kullanılmalıdır.
  • Önceki API'lere Çalışan mesajları aracılığıyla hitap eden, Çalışan tabanlı bir API'dir. Bu API, alt düzey API'lerin bir Worker iş parçacığına yüklenmiş olduğu ve bu API'lerle Çalışan mesajları aracılığıyla iletişim kurduğu ana iş parçacığında kullanılmak üzere tasarlanmıştır.
  • Worker API'nin, iş parçacıkları arası iletişim özelliklerini kullanıcıdan tamamen gizleyen Promise tabanlı bir varyantı.
  • Kaynak Özel Dosya Sistemi (OPFS) dahil olmak üzere mevcut JavaScript API'lerini kullanarak kalıcı istemci tarafı depolama desteği.

Kaynak Özel Dosya Sistemi kalıcı arka ucuyla SQLite Wasm'ı kullanma

Kitaplığı npm'den yükleniyor

Aşağıdaki komutla npm'den @sqlite.org/sqlite-wasm paketini yükleyin:

npm install @sqlite.org/sqlite-wasm

Kaynak Özel Dosya Sistemi

Kaynak Gizli Dosya Sistemi (Dosya Sistemi Erişim API'sinin bir parçası olan OPFS), verilere yüksek performanslı erişim sağlayan özel bir yüzeyle artırılmıştır. Bu yeni yüzey, dosya içeriğine yerinde ve özel yazma erişimi sunarak mevcut yüzeylerden farklıdır. Bu değişiklik, temizlenmemiş değişiklikleri tutarlı bir şekilde okuma yeteneği ve özel çalışanlarda eşzamanlı bir varyantın kullanılabilirliğinin yanı sıra performansı önemli ölçüde iyileştiriyor ve yeni kullanım alanlarının önündeki engelleri kaldırıyor.

Tahmin edebileceğiniz gibi, projenin hedeflerinin son noktası olan mevcut JavaScript API'lerini kullanarak kalıcı istemci tarafı depolama desteği, verilerin veritabanı dosyasında tutulmasıyla ilgili katı performans gereksinimleriyle birlikte geliyor. Bu noktada Kaynak Özel Dosya Sistemi ve daha spesifik olarak FileSystemFileHandle nesnelerinin createSyncAccessHandle() yöntemi devreye girer. Bu yöntem, eşzamanlı olarak bir dosyadan okumak ve dosyaya yazmak için kullanılabilecek bir FileSystemSyncAccessHandle nesnesine çözümlenen Promise döndürür. Bu yöntemin eşzamanlı yapısı performans avantajları sunar ancak bu nedenle ana iş parçacığının engellenmemesini sağlamak üzere yalnızca Kaynak Özel Dosya Sistemi'ndeki dosyalar için özel Web Çalışanları içinde kullanılabilir.

Gerekli başlıkları ayarlama

İndirilen SQLite Wasm arşivi, diğer dosyaların yanı sıra sqlite3 WASM/JS derlemesini oluşturan sqlite3.js ve sqlite3.wasm dosyalarını içerir. jswasm dizini, temel sqlite3 teslimatlarını içerir. Üst düzey dizinde ise demo ve test uygulamaları bulunur. Tarayıcılar, file:// URL'lerinden Wasm dosyalarını sunmaz. Bu nedenle, bununla oluşturduğunuz tüm uygulamalar bir web sunucusu gerektirir ve bu sunucu, dosyalar sunarken yanıtında aşağıdaki üst bilgileri içermelidir:

Bu başlıkların nedeni, SQLite Wasm'ın SharedArrayBuffer'e dayalı olmasıdır ve bu başlıkların ayarlanması, güvenlik gereksinimleri kapsamında yer alır.

Geliştirici Araçları ile trafiği incelerseniz aşağıdaki bilgileri görürsünüz:

Yukarıda bahsedilen iki başlık (Cross-Origin-Embedder-Policy ve Cross-Origin-Opener-Policy) Chrome Geliştirici Araçları'nda vurgulanıyor.

Hız testi

SQLite ekibi, kullanımdan kaldırılan Web SQL ile karşılaştırıldığında WebAssembly uygulamasında bazı karşılaştırmalar yürütmüştür. Bu karşılaştırmalar SQLite Wasm'ın genellikle Web SQL kadar hızlı olduğunu göstermektedir. Bazen biraz daha yavaş, bazen biraz daha hızlı olabiliyor. Tüm ayrıntıları sonuçlar sayfasında bulabilirsiniz.

Başlarken kod örneği

Daha önce belirtildiği gibi, Kaynak Özel Dosya Sistemi kalıcı arka ucuna sahip SQLite Wasm'ın, Çalışan bağlamından çalıştırılması gerekir. Neyse ki kitaplık tüm bunları sizin için otomatik olarak halleder ve bunu doğrudan ana iş parçacığından kullanabilirsiniz.

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

Demografi

Demoda yukarıdaki kodu uygulamalı olarak görebilirsiniz. Glitch'teki kaynak koduna mutlaka göz atın. Aşağıdaki yerleştirilmiş sürümün OPFS arka ucunu kullanmadığına ancak demoyu ayrı bir sekmede açtığınızda kullandığına dikkat edin.

Kaynak Özel Dosya Sisteminde Hata Ayıklama

SQLite Wasm'ın Kaynak Özel Dosya Sistemi çıktısında hata ayıklamak için OPFS Explorer Chrome uzantısını kullanın.

Chrome Web Mağazası&#39;nda OPFS Explorer.

Uzantıyı yükledikten sonra Chrome Geliştirici Araçları'nı açın, OPFS Gezgin sekmesini seçin. Ardından, SQLite Wasm'in Kaynak Özel Dosya Sistemi'ne ne yazdıklarını incelemeye hazır olursunuz.

Demo uygulamanın Kaynak Gizli Dosya Sistemi yapısını gösteren OPFS Explorer Chrome uzantısı.

Geliştirici Araçları'ndaki OPFS Gezgini penceresindeki dosyalardan herhangi birini tıklarsanız bu dosyaları yerel diske kaydedebilirsiniz. Ardından, veritabanını incelemek için SQLite Viewer gibi bir uygulama kullanabilirsiniz. Böylece, SQLite Wasm'ın gerçekten söz verdiğiniz gibi çalıştığından emin olabilirsiniz.

SQLite Wasm demosundaki bir veritabanı dosyasını açmak için kullanılan SQLite Viewer uygulaması.

Yardım alma ve geri bildirim sağlama

SQLite Wasm, SQLite topluluğu tarafından geliştirilip yönetilir. Destek forumunda arama yapıp yayın paylaşarak yardım alın ve geri bildirim sağlayın. Tüm belgeleri SQLite sitesinde bulabilirsiniz.

Teşekkür

Tobias Fischer'ın Unsplash'teki lokomotif resmi.