Mit SQLite können Sie Ihren gesamten Speicherbedarf im Web effizient bewältigen.
Über SQLite
SQLite ist eine beliebte, Open Source, schlank, eingebettet relational Datenbankmanagementsystem. Viele Entwickler speichern damit Daten in einem strukturiert und einfach zu verwenden. Aufgrund der geringen Größe und des geringen Arbeitsspeichers wird SQLite häufig als Datenbankmodul auf Mobilgeräten eingesetzt. Desktop-Anwendungen und Webbrowsern.
Eines der Hauptmerkmale von SQLite ist, dass es eine serverlose Datenbank ist, bedeutet, dass für den Betrieb kein separater Serverprozess erforderlich ist. Stattdessen Die Datenbank wird in einer einzigen Datei auf dem Gerät des Nutzers gespeichert. in Anwendungen integrieren.
SQLite auf Basis von Web Assembly
Es gibt einige inoffizielle SQLite-Versionen, die auf Web Assembly (Wasm) basieren. damit sie in Webbrowsern verwendet werden können, sql.js Die sqlite3 WASM/JS Unterprojekt ist das das offiziell mit dem SQLite-Projekt, das Wasm-Builds der Bibliothek erstellt bereits etablierte Mitglieder der SQLite-Familie. Der Beton Zu den Zielen dieses Projekts gehören:
- Binden einer Squarelite3-API auf niedriger Ebene, die sich so nah wie möglich an der C-API befindet Nutzungsbedingungen von Google.
- Eine übergeordnete objektorientierte API, die eher ähnelt sql.js und Implementierungen im Node.js-Stil, die spricht direkt mit der Low-Level-API. Diese API muss vom selben als Low-Level-API.
- Eine Worker-basierte API, die über Worker-Nachrichten mit den vorherigen APIs kommuniziert. Dieses eine ist für die Verwendung im Hauptthread vorgesehen, mit den untergeordneten APIs die in einem Worker-Thread installiert sind, und die Kommunikation mit ihnen über Worker-Nachrichten.
- Eine Promise-basierte Variante der Worker API, die die Thread-übergreifenden Kommunikationsaspekte der Nutzenden.
- Unterstützung von dauerhaftem clientseitigem Speicher mit verfügbaren JavaScript APIs einschließlich des Origin Private File System (OPFS).
SQLite Wasm mit dem Persistenz-Backend des privaten Dateisystems des Ursprungs verwenden
Bibliothek aus npm installieren
Installieren Sie die @sqlite.org/sqlite-wasm mit dem folgenden Befehl ein Paket aus npm erstellen:
npm install @sqlite.org/sqlite-wasm
Das ursprüngliche private Dateisystem
Das ursprüngliche private Dateisystem (OPFS, Teil des File System Access API) wird durch die eine spezielle Oberfläche, die einen starken Zugriff auf Daten ermöglicht. Diese neue Oberfläche unterscheidet sich von vorhandenen, indem sie direkten und exklusiven Schreibzugriff auf eine Dateiinhalt. Diese Änderung und die Möglichkeit, einheitlich zu lesen, und die Verfügbarkeit einer synchronen Variante engagierte Mitarbeiter, verbessert die Leistung erheblich und eröffnet neue Einsatzmöglichkeiten Cases.
Wie Sie sich vorstellen können, ist der letzte Punkt der Projektziele, die Unterstützung
nichtflüchtiger clientseitiger Speicher unter Verwendung der verfügbaren JavaScript APIs.
strenge Leistungsanforderungen bezüglich der dauerhaften Speicherung von Daten in der Datenbankdatei.
Hier befinden sich das
ursprüngliche private Dateisystem,
createSyncAccessHandle()
von
FileSystemFileHandle
ins Spiel kommen. Diese Methode gibt ein Promise zurück, das in ein
FileSystemSyncAccessHandle
-Objekt, das zum synchronen Lesen und Schreiben in eine Datei verwendet werden kann. Die
Diese Methode bringt Leistungsvorteile mit sich,
kann nur in dedizierten
Web Worker für
im ursprünglichen privaten Dateisystem gespeichert, damit der Hauptthread nicht blockiert werden kann.
Erforderliche Header festlegen
Neben anderen Dateien enthält das heruntergeladene SQLite-Wasm-Archiv das sqlite3.js
und sqlite3.wasm-Dateien, aus denen der Squarelite3-WASM/JS-Build besteht. Das jswasm
das Verzeichnis der Squarelite3-Kernergebnisse und das Verzeichnis der obersten Ebene enthält.
enthält Demonstrations- und Test-Apps. Browser stellen keine Wasm-Dateien aus
file:// URLs. Alle Apps, die Sie damit erstellen, benötigen also einen Webserver und
muss der Server beim Bereitstellen des
Dateien:
Cross-Origin-Opener-Policyfestgelegt aufsame-origin-Anweisung, Dadurch wird der Browserkontext ausschließlich auf Dokumente mit demselben Ursprung isoliert. Ursprungsübergreifende Dokumente werden nicht im selben Browserkontext geladen.Cross-Origin-Embedder-Policyfestgelegt aufrequire-corp-Anweisung, sodass ein Dokument nur Ressourcen aus demselben Ursprung oder Ressourcen explizit als aus einem anderen Ursprung ladebar gekennzeichnet ist.
Der Grund für diese Header ist, dass SQLite Wasm
SharedArrayBuffer,
Das Festlegen dieser Header ist Teil
Sicherheitsanforderungen.
Wenn Sie den Traffic mit den Entwicklertools prüfen, sehen Sie Folgendes: Informationen:
Geschwindigkeitstest
Das SQLite-Team hat einige Benchmarks für seine WebAssembly-Implementierung durchgeführt. im Vergleich zum verworfenen Web SQL. Diese Benchmarks zeigen, dass SQLite Wasm im Allgemeinen ungefähr so schnell wie Web SQL. Manchmal geht es etwas langsamer, ist es etwas schneller. Alle Details finden Sie auf der Ergebnisseite der Suchergebnisse.
Codebeispiel für den Einstieg
Wie bereits erwähnt, SQLite Wasm mit dem ursprünglichen privaten Dateisystem Persistenz-Back-End muss in einem Worker-Kontext ausgeführt werden. Die gute Nachricht ist, kümmert sich die Bibliothek automatisch für Sie und Sie können direkt vom Hauptthread aus.
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
Sehen Sie sich den obigen Code in der Demo an. In der Quellcode zu Glitch. Beachten Sie, dass die eingebettete Version unten nicht das OPFS-Back-End verwendet. aber wenn Sie die Demo in einem einen separaten Tab.
Fehlerbehebung im ursprünglichen privaten Dateisystem
Um Fehler in der Ausgabe des privaten Dateisystems von SQLite Wasm zu beheben, verwenden Sie die Methode OPFS-Explorer Chrome-Erweiterung.
Öffne nach der Installation der Erweiterung die Chrome-Entwicklertools und wähle die OPFS-Datei Explorer und können nun überprüfen, was SQLite Wasm in den Ursprüngliches privates Dateisystem.
Wenn du in den Entwicklertools im OPFS-Explorer-Fenster auf eine Datei klickst, auf der lokalen Festplatte speichern. Sie können dann eine App wie SQLite Viewer, um die Datenbank zu überprüfen, Versichern Sie sich, dass SQLite Wasm tatsächlich wie versprochen funktioniert.
Hilfe erhalten und Feedback geben
SQLite Wasm wird von der SQLite-Community entwickelt und gepflegt. Hilfe und Feedback geben, indem Sie im Supportforum. Die vollständige Dokumentation finden Sie auf der SQLite-Website.
Danksagungen
Hero-Image von Tobias Fischer auf Unsplash (Unsplash).