由源私有文件系统提供支持的浏览器中的 SQLite Wasm

您可以使用 SQLite 在网络上高效处理您的所有存储需求。

SQLite 简介

SQLite 是一种广受欢迎的 开源、轻量级、嵌入式关系型 数据库管理系统许多开发者用它来将数据存储在 结构化、易于使用的方式。由于它的体积小、内存小, 因此 SQLite 通常被用作移动设备的数据库引擎, 桌面应用和网络浏览器。

SQLite 的一个主要功能是它是一个无服务器数据库, 这意味着它不需要单独的服务器进程来运行。相反, 该数据库存储在用户设备上的单个文件中,因此,您可以轻松 集成到应用中。

SQLite 徽标。

基于 Web Assembly 的 SQLite

目前有很多基于 Web Assembly (Wasm) 的非官方 SQLite 版本, 以便在网络浏览器中使用 sql.js。通过 sqlite3 WASM/JS 子项目 与云计算技术和机器学习 生成库的 Wasm build 的 SQLite 项目 受支持的 SQLite 交付项系列中的成熟成员。混凝土 此项目的目标包括:

  • 绑定一个尽可能接近 C 语言环境的低级别 sqlite3 API 使用条款。
  • 更高级的面向对象的 API,更类似于 sql.jsNode.js 风格的实现 直接与低级 API 交互。使用此 API 必须是同一个 作为低阶 API。
  • 基于 Worker 的 API,它通过 worker 消息与之前的 API 通信。这个 一种是在主线程中使用,而较低级别的 API 安装在工作器线程中,并通过工作器消息与之进行通信。
  • 基于 Promise 的 Worker API 变体,它会完全隐藏 跨线程通信。
  • 使用可用的 JavaScript API 支持永久性客户端存储; 包括源私有文件系统 (OPFS)。

将 SQLite Wasm 与源私有文件系统持久性后端搭配使用

从 npm 安装库

安装 @sqlite.org/sqlite-wasm 从 npm 运行以下命令:

npm install @sqlite.org/sqlite-wasm

源私有文件系统

源私有文件系统 (OPFS) 是 File System Access API)通过 一种特殊表面,可非常高效地访问数据。这一全新平台 与现有协议的不同之处在于,它会提供对 文件内容。这项变更生效后,您将能始终如一地阅读 未刷新的修改和同步变体的可用性 专职工作人员,显著提升性能并解锁新用途 案例

可以想象,项目目标的最后一个要点: 使用可用的 JavaScript API 的永久性客户端存储,附带 对将数据持久存储到数据库文件有严格的性能要求。 这是来源私有文件系统,更具体地说,就是 createSyncAccessHandle() 方法 FileSystemFileHandle 各种问题。此方法会返回一个解析为 FileSystemSyncAccessHandle 可用于同步对文件执行读写操作的对象。通过 此方法的同步性质可带来性能优势, 它只能在 Web Workers,适用于 以免主线程被阻塞。

设置所需的标头

下载的 SQLite Wasm 归档文件包含 sqlite3.js,以及其他文件 和 sqlite3.wasm 文件,它们构成了 sqlite3 WASM/JS build。jswasm 目录包含核心 sqlite3 交付项和顶级目录 包含演示版和测试应用。浏览器不会从以下位置传送 Wasm 文件: file:// 网址,因此您使用此方式构建的所有应用都需要 Web 服务器, 服务器在传送 文件:

之所以使用这些头文件,是因为 SQLite Wasm 依赖于 SharedArrayBuffer、 设置这些标头是 安全性要求

如果您使用开发者工具检查流量,应该会发现以下内容 信息:

Chrome 开发者工具中突出显示了上述两个标头,即 Cross-Origin-Embedder-Policy 和 Cross-Origin-Opener-Policy。

速度测试

SQLite 团队已经对其 WebAssembly 实现运行了一些基准测试 (与已弃用的 Web SQL 相比)。这些基准测试表明,SQLite Wasm 是 速度通常与 Web SQL 差不多。有时速度有点慢 速度就会快一点查看关于 搜索结果页

入门代码示例

如前所述,SQLite Wasm 与源私有文件系统搭配使用 持久性后端需要从工作器上下文运行。好消息是 该库会自动为您处理所有这些工作,您可以使用 调用这些方法

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

演示

通过演示查看上述代码的实际运用。 请务必查看 源代码 。请注意,以下嵌入式版本为何不使用 OPFS 后端, 但当您在 单独的标签页

调试源私有文件系统

如需调试 SQLite Wasm 的源私有文件系统输出,请使用 OPFS 探索器 Chrome 扩展程序。

Chrome 应用商店中的 OPFS Explorer。

安装扩展程序后,打开 Chrome 开发者工具,然后选择 OPFS Explorer 标签页中,然后检查 SQLite Wasm 向 源私有文件系统。

OPFS Explorer Chrome 扩展程序,其中显示了演示版应用的源私有文件系统结构。

如果您在开发者工具中点击 OPFS Explorer 窗口中的任何文件, 可以将其保存到本地磁盘然后,你可以使用 SQLite 查看器来检查数据库,以便 请放心,SQLite Wasm 确实能按预期运行。

用于从 SQLite Wasm 演示中打开数据库文件的 SQLite Viewer 应用。

获取帮助和提供反馈

SQLite Wasm 由 SQLite 社区开发和维护。获取帮助和 您可以通过搜索并发布到 支持论坛。完整的 您可以在 SQLite 网站上获取相关文档

致谢

主打图片,作者:Tobias Fischer 不启动