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

Web'de tüm depolama alanınızı verimli bir şekilde yönetmek için SQLite'i kullanın.

SQLite, popüler, açık kaynak, hafif, 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 aracı kullanır. Küçük boyutu ve düşük bellek gereksinimleri nedeniyle SQLite, genellikle mobil cihazlarda, masaüstü uygulamalarında ve web tarayıcılarında veritabanı motoru olarak kullanılır.

SQLite'in en önemli özelliklerinden biri, sunucusuz bir veritabanı olmasıdır. Bu, çalışması için ayrı bir sunucu işlemi gerektirmediği anlamına gelir. Bunun yerine, veritabanı kullanıcının cihazında tek bir dosyada depolanır. Bu sayede, uygulamalara entegrasyonu kolaylaştırılır.

SQLite logosu.

Web Assembly tabanlı SQLite

Web Assembly'ye (Wasm) dayalı olan ve web tarayıcılarında (ör. sql.js) kullanılmasına izin veren çeşitli resmi olmayan SQLite sürümleri vardır. sqlite3 WASM/JS alt projesi, desteklenen SQLite yayınları ailesinin yerleşik üyelerinin kitaplığından Wasm derlemeleri oluşturan SQLite projesi ile resmi olarak ilişkilendirilen ilk çalışmadır. Bu projenin somut hedefleri şunlardır:

  • Kullanım açısından C API'ye olabildiğince yakın olan düşük seviye bir sqlite3 API bağlama.
  • Doğrudan düşük düzey API ile iletişim kuran, sql.js ve Node.js tarzı uygulamalara daha yakın olan daha üst düzey bir nesne yönelimli API. Bu API, düşük düzey API ile aynı iş parçacığında kullanılmalıdır.
  • Önceki API'lere çalışan mesajları aracılığıyla iletişim kuran çalışan tabanlı bir API. Bu çözüm, ana iş parçacığında alt düzey API'lerin yüklü olduğu bir Worker iş parçacığında kullanılmak ve bu API'lerle Çalışan mesajları aracılığıyla konuşmak için tasarlanmıştır.
  • İşçi API'sinin, iş parçacığı 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 alanı desteği.

SQLite Wasm'i Origin Private File System kalıcı arka ucu ile kullanma

npm'den kitaplığı yükleme

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

npm install @sqlite.org/sqlite-wasm

Kaynak Gizli Dosya Sistemi

Kaynak Özel Dosya Sistemi (File System Access API'nin bir parçası olan OPFS), verilere son derece etkili erişim sağlayan özel bir yüzeyle güçlendirilmiştir. Bu yeni yüzey, bir dosyanın 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 özelliği ve özel çalışanlarda senkron bir varyantın kullanılabilirliğiyle birlikte performansı önemli ölçüde artırır ve yeni kullanım alanlarının önünü açar.

Tahmin edebileceğiniz gibi, projenin hedeflerindeki son nokta olan mevcut JavaScript API'leri kullanarak istemci tarafında kalıcı depolama desteği, verileri veritabanı dosyasında kalıcı hale getirmeyle ilgili katı performans koşullarıyla birlikte gelir. Bu noktada, Kaynak Özel Dosya Sistemi ve daha spesifik olarak FileSystemFileHandle öğelerinin createSyncAccessHandle() yöntemi devreye girer. Bu yöntem, bir dosyaya senkronize olarak okuma ve yazma yapmak için kullanılabilecek bir FileSystemSyncAccessHandle objesi döndüren bir Promise döndürür. Bu yöntemin senkronize yapısı performans avantajları sağlar ancak bu nedenle, ana iş parçacığı engellenmemesi için yalnızca Kaynak Özel Dosya Sistemi'ndeki dosyalar için özel Web İşleyiciler içinde kullanılabilir.

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ı da içerir. jswasm dizini, temel sqlite3 teslimatlarını içerir. Üst düzey dizinde ise gösterim ve test uygulamaları bulunur. Tarayıcılar, file:// URL'lerinden Wasm dosyaları yayınlamaz. Bu nedenle, bu URL'leri kullanarak oluşturduğunuz uygulamalar için bir web sunucusu gerekir ve bu sunucu, dosyaları yayınlarken yanıtında aşağıdaki üstbilgileri içermelidir:

Bu üstbilgilerin nedeni, SQLite Wasm'in SharedArrayBuffer'e bağlı olması ve bu üstbilgilerin ayarlanmasının güvenlik şartlarından biri olmasıdır.

DevTools 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 vurgulanmıştır.

Hız testi

SQLite ekibi, desteği sonlandırılan Web SQL'e kıyasla WebAssembly uygulamalarında bazı karşılaştırmalar yaptı. Bu karşılaştırmalar, SQLite Wasm'in genellikle Web SQL kadar hızlı olduğunu gösteriyor. Bazen biraz daha yavaş, bazen biraz daha hızlı olur. Tüm ayrıntıları sonuçlar sayfasında bulabilirsiniz.

Başlangıç kodu örneği

Daha önce de belirtildiği gibi, Origin Private File System kalıcı arka ucuna sahip SQLite Wasm'in bir Worker bağlamında çalıştırılması gerekir. Ancak kitaplık tüm bunları sizin için otomatik olarak yapar ve doğrudan ana mesaj dizisinden 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. Glitch'teki kaynak koda göz atın. Aşağıdaki yerleştirilmiş sürümün OPFS arka ucunu kullanmadığını ancak demoyu ayrı bir sekmede açtığınızda OPFS arka ucunun nasıl kullanıldığını unutmayın.

Kaynak Gizli Dosya Sistemindeki Hata Ayıklama

SQLite Wasm'in Origin Private File System çıkışında hata ayıklama yapmak 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 ve OPFS Gezgin sekmesini seçin. SQLite Wasm'in kaynak Özel Dosya Sistemi'ne ne yazdığını incelemeye hazırsınız.

Demo uygulamasının Origin Private File System yapısını gösteren OPFS Explorer Chrome uzantısı.

Geliştirici Araçları'ndaki OPFS Gezgini penceresindeki dosyalardan herhangi birini seçerseniz yerel diske kaydedebilirsiniz. Ardından, SQLite Wasm'in gerçekten de vaat edildiği gibi çalıştığından emin olmak için veritabanını incelemek üzere SQLite Viewer gibi bir uygulama kullanabilirsiniz.

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 mesaj göndererek yardım alabilir ve geri bildirimde bulunabilirsiniz. Belgelerin tamamına SQLite sitesinden ulaşabilirsiniz.