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

Web'de tüm depolama ihtiyaçlarınızı performanslı bir şekilde karşılamak için SQLite'ı kullanın.

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

SQLite'ın temel özelliklerinden biri, sunucusuz bir veritabanı olmasıdır. Bu nedenle, çalışmak için ayrı bir sunucu işlemi gerektirmez. Bunun yerine, veritabanı kullanıcının cihazındaki tek bir dosyada depolanır ve uygulamalara entegre edilmesi kolaylaşır.

SQLite logosu.

Web Assembly tabanlı SQLite

Web Assembly'ye (Wasm) dayalı bir dizi resmi olmayan SQLite sürümü vardır. Bu sürümler, örneğin sql.js gibi web tarayıcılarında kullanılabilir. sqlite3 WASM/JS alt projesi, kitaplığın Wasm derlemelerini desteklenen SQLite teslimat ailesinin yerleşik üyeleri haline getiren SQLite projesiyle resmi olarak ilişkilendirilen ilk çalışmadır. Bu projenin somut hedefleri şunlardır:

  • Kullanım açısından C API'sine mümkün olduğunca yakın olan düşük seviyeli bir sqlite3 API'sini bağlama.
  • Doğrudan düşük seviyeli API ile iletişim kuran, sql.js ve Node.js tarzı uygulamalara daha çok benzeyen, daha yüksek seviyeli bir nesne yönelimli API. Bu API, düşük düzeyli API ile aynı iş parçacığında kullanılmalıdır.
  • Worker mesajları aracılığıyla önceki API'lerle iletişim kuran Worker tabanlı bir API. Bu, ana iş parçacığında kullanılmak üzere tasarlanmıştır. Daha düşük seviyeli API'ler bir Worker iş parçacığına yüklenir ve Worker mesajları aracılığıyla bunlarla iletişim kurulur.
  • Worker API'nin, iş parçacıkları arası iletişim yönlerini kullanıcıdan tamamen gizleyen Promise tabanlı bir varyantı.
  • Origin Private File System (OPFS) dahil olmak üzere mevcut JavaScript API'leri kullanılarak kalıcı istemci tarafı depolama desteği.

Origin Private File System kalıcılık arka ucuyla SQLite Wasm'ı kullanma

Kitaplığı npm'den yükleme

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

npm install @sqlite.org/sqlite-wasm

Origin Private File System

Origin Private File System (OPFS, File System Access API'nin bir parçasıdır) verilere çok yüksek performanslı erişim sağlayan özel bir yüzeyle desteklenir. Bu yeni yüzey, bir dosyanın içeriğine yerinde ve özel yazma erişimi sunarak mevcut yüzeylerden farklılık gösterir. Bu değişiklik, tutarlı bir şekilde okunmamış değişiklikleri okuma özelliği ve özel çalışanlarda senkron varyantın kullanılabilirliği ile birlikte performansı önemli ölçüde artırır ve yeni kullanım alanlarının önünü açar.

Tahmin edebileceğiniz gibi, projenin hedeflerinin son noktası olan "Mevcut JavaScript API'lerini kullanarak kalıcı istemci tarafı depolama desteği", verilerin veritabanı dosyasına kalıcı olarak kaydedilmesiyle ilgili katı performans koşullarıyla birlikte gelir. Bu noktada, Origin Private File System ve daha spesifik olarak createSyncAccessHandle() FileSystemFileHandle nesnelerinin yöntemi devreye girer. Bu yöntem, bir dosyadan senkron olarak okumak ve dosyaya yazmak için kullanılabilecek bir FileSystemSyncAccessHandle nesnesine çözümlenen bir Promise döndürür. Bu yöntemin senkron yapısı performans avantajları sağlar ancak bu nedenle yalnızca Origin Private File System'deki dosyalar için ayrılmış Web Workers içinde kullanılabilir. Böylece ana iş parçacığı engellenemez.

Gerekli üstbilgileri 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 çıktılarını içerir ve üst düzey dizinde gösterim ve test uygulamaları bulunur. Tarayıcılar, file:// URL'lerinden Wasm dosyaları sunmaz. Bu nedenle, bu dosyalarla oluşturduğunuz tüm uygulamalar için bir web sunucusu gerekir ve bu sunucu, dosyaları sunarken yanıtına aşağıdaki başlıkları eklemelidir:

Bu üstbilgilerin nedeni, SQLite Wasm'ın SharedArrayBuffer'a bağlı olması ve bu üstbilgilerin ayarlanmasının güvenlik şartlarının bir parçası olmasıdır.

Trafiği Geliştirici Araçları ile incelerseniz aşağıdaki bilgileri görmeniz gerekir:

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

Hız testi

SQLite ekibi, WebAssembly uygulamalarında, desteği sonlandırılan Web SQL'e kıyasla bazı karşılaştırma testleri gerçekleştirdi. Bu karşılaştırmalar, SQLite Wasm'ın genel olarak Web SQL kadar hızlı olduğunu gösteriyor. Bazen biraz daha yavaş, bazen biraz daha hızlıdır. Tüm ayrıntıları sonuçlar sayfasında bulabilirsiniz.

Başlangıç kod örneği

Daha önce belirtildiği gibi, Origin Private File System kalıcılık arka ucuyla SQLite Wasm'ın bir Worker bağlamında çalışması gerekir. Ancak kitaplık, tüm bunları sizin için otomatik olarak halleder ve kitaplığı 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);
  }
})();

Demo

Yukarıdaki kodun işleyiş şeklini demoda görebilirsiniz. GitHub'daki kaynak koduna göz atmayı unutmayın. Aşağıdaki yerleştirilmiş sürümün OPFS arka ucunu kullanmadığını, ancak demoyu ayrı bir sekmede açtığınızda kullandığını unutmayın.

Origin Private File System'da hata ayıklama

SQLite Wasm'ın Origin Private File System çıkışında hata ayıklamak için OPFS Explorer Chrome uzantısını kullanın.

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

Uzantıyı yükledikten sonra Chrome Geliştirici Araçları'nı açın, OPFS Explorer sekmesini seçin. Ardından, SQLite Wasm'ın Origin Private File System'e yazdıklarını incelemeye başlayabilirsiniz.

OPFS Explorer Chrome uzantısı, demo uygulamasının Origin Private File System yapısını gösteriyor.

Geliştirici Araçları'ndaki OPFS Gezgini penceresinde dosyalardan herhangi birini seçerseniz dosyayı yerel diske kaydedebilirsiniz. Ardından, veritabanını incelemek için SQLite Viewer gibi bir uygulama kullanabilirsiniz. Böylece, SQLite Wasm'ın gerçekten vaat edildiği 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 gönderme

SQLite Wasm, SQLite topluluğu tarafından geliştirilip yönetilmektedir. Destek forumunda arama yaparak ve gönderi paylaşarak yardım alabilir ve geri bildirimde bulunabilirsiniz. Tam belgelere SQLite sitesinden ulaşabilirsiniz.