Flutter Web端SQLite数据库操作插件sqlite3_web的使用

Flutter Web端SQLite数据库操作插件sqlite3_web的使用

sqlite3_web 插件为在Flutter Web项目中使用SQLite数据库提供了支持。通过这个插件，你可以在Web环境中以异步方式访问SQLite数据库。以下是关于如何使用 sqlite3_web 插件的详细说明和一个完整的示例demo。

1. 插件的功能

sqlite3_web 插件主要提供了以下功能：

• 编写数据库工作者（Workers）：你可以使用Dart编写Web Worker来处理数据库操作。
• 异步接口：插件提供了一个异步接口，用于与SQLite数据库进行交互。
• 自动选择最佳存储引擎：插件会自动检测浏览器支持的存储API，并选择最适合的存储引擎。

2. 快速开始

2.1 准备工作

1. 创建数据库控制器：你需要扩展 DatabaseController 类来定义如何打开和管理数据库。例如：

import 'package:sqlite3/sqlite3.dart';
import 'package:sqlite3_web/sqlite3_web.dart';

class ExampleController extends DatabaseController {
  @override
  Future<Database> open(String path, StorageMode storageMode, AccessMode accessMode) async {
    // 打开或创建数据库
    return sqlite3.open(path);
  }

  @override
  void close() {
    // 关闭数据库连接
    database?.close();
  }
}

1. 定义Worker入口点：你需要为Web Worker定义一个入口点文件，例如 worker.dart，并在其中调用 WebSqlite.workerEntrypoint 方法：

import 'package:sqlite3_web/sqlite3_web.dart';
import 'controller.dart';

void main() {
  WebSqlite.workerEntrypoint(controller: ExampleController());
}

1. 编译Worker：使用 dart compile js 命令将Worker编译为JavaScript文件。建议使用 -O4 优化选项：

dart compile js -O4 worker.dart -o worker.dart.js

1. 准备SQLite的WASM模块：你需要一个包含SQLite原生代码的 sqlite3.wasm 文件。你可以从 GitHub Releases 获取预构建版本，或者自己编译。

3. 使用示例

以下是一个完整的示例，展示了如何在Flutter Web项目中使用 sqlite3_web 插件进行数据库操作。

3.1 main.dart 文件

import 'dart:js_interop';
import 'dart:js_interop_unsafe';
import 'package:sqlite3_web/sqlite3_web.dart';

void main() async {
  // 打开SQLite数据库
  final sqlite = await WebSqlite.open(
    worker: Uri.parse('worker.dart.js'),  // Worker文件路径
    wasmModule: Uri.parse('sqlite3.wasm'),  // WASM模块路径
  );

  // 检测可用的功能
  final features = await sqlite.runFeatureDetection();
  print('got features: $features');

  // 连接到推荐的存储引擎
  final connection = await sqlite.connectToRecommended('my_database');
  print(await connection.database.select('select sqlite_version()'));

  // 将数据库操作暴露给JavaScript环境
  globalContext['open'] =
      (JSString name, JSString storage, JSString accessMode) {
    return Future(() async {
      final database = await sqlite.connect(
          name.toDart,
          StorageMode.values.byName(storage.toDart),
          AccessMode.values.byName(accessMode.toDart));

      // 监听数据库更新
      database.updates.listen((update) {
        print('Update on $name: $update');
      });

      return database.toJSBox;
    }).toJS;
  }.toJS;

  // 执行SQL语句
  globalContext['execute'] = (JSBoxedDartObject database, JSString sql) {
    return Future(() async {
      await (database.toDart as Database).execute(sql.toDart);
    }).toJS;
  }.toJS;
}

3.2 worker.dart 文件

import 'package:sqlite3_web/sqlite3_web.dart';
import 'controller.dart';

void main() {
  // 启动Web Worker并传入数据库控制器
  WebSqlite.workerEntrypoint(controller: ExampleController());
}

3.3 controller.dart 文件

import 'package:sqlite3/sqlite3.dart';
import 'package:sqlite3_web/sqlite3_web.dart';

class ExampleController extends DatabaseController {
  @override
  Future<Database> open(String path, StorageMode storageMode, AccessMode accessMode) async {
    // 打开或创建数据库
    return sqlite3.open(path);
  }

  @override
  void close() {
    // 关闭数据库连接
    database?.close();
  }
}

4. 自定义请求

在某些情况下，你可能希望重用 sqlite3_web 创建的Worker通信机制来实现自定义功能。例如，你可以使用共享Worker让不同的标签页连接到同一个数据库实例。为此，你可以在 WorkerDatabase 中重写 handleCustomRequest 方法，以实现同步原语或其他自定义逻辑。

客户端可以通过 Database.customRequest 发送自定义请求。例如：

final response = await database.customRequest({
  'type': 'custom_request',
  'data': 'some_data'
});
print(response);