PGlite:浏览器中运行的PostgreSQL

发布于:2025-03-04 ⋅ 阅读:(18) ⋅ 点赞:(0)

PGlite 是一款基于 WebAssembly(WASM)构建的轻量级 PostgreSQL 数据库引擎,旨在简化开发者在浏览器、Node.js、Bun 或 Deno 环境中运行 PostgreSQL。PGlite 无需复杂的安装或配置,特别适合开发测试、本地化应用及快速原型设计。

在这里插入图片描述

一个完整的 PGlite 代码库压缩之后不到 3 MB,但是可以支持大量 PostgreSQL 扩展插件,包括向量数据库 pgvector。

PGlite 支持 Node、Bun、Deno、浏览器以及任何 JavaScript 框架,不同环境的安装方式如下:

-- npm
npm install @electric-sql/pglite

-- pnpm
pnpm install @electric-sql/pglite

-- yarn
yarn add @electric-sql/pglite

-- bun
bun install @electric-sql/pglite

-- deno
deno add npm:@electric-sql/pglite

创建数据库的方式如下:

import { PGlite } from '@electric-sql/pglite'

const db = new PGlite() -- 使用内存存储

const db = new PGlite('./path/to/pgdata') -- 使用文件系统存储

对于浏览器嵌入,安装后使用如下方式导入并创建数据库:

import { PGlite } from "@electric-sql/pglite"; -- 导入模块

const db = new PGlite() -- 使用内存存储
const db = new PGlite('idb://my-pgdata') -- 使用IndexedDB存储

await db.query("select 'Hello world' as message;") -- 执行查询
// -> { rows: [ { message: "Hello world" } ] }

接下来可以使用 .exec 方法创建表和数据:

await db.exec(`
  CREATE TABLE IF NOT EXISTS todo (
    id SERIAL PRIMARY KEY,
    task TEXT,
    done BOOLEAN DEFAULT false
  );
  INSERT INTO todo (task, done) VALUES ('Install PGlite from NPM', true);
  INSERT INTO todo (task, done) VALUES ('Load PGlite', true);
  INSERT INTO todo (task, done) VALUES ('Create a table', true);
  INSERT INTO todo (task, done) VALUES ('Insert some data', true);
  INSERT INTO todo (task) VALUES ('Update a task');
`)

然后使用 .query 方法查询数据:

const ret = await db.query(`
  SELECT * from todo WHERE id = 1;
`)
console.log(ret.rows)

查询返回的结果如下:

;[
  {
    id: 1,
    task: 'Install PGlite from NPM',
    done: false,
  },
]

以下是一个利用 pgvector 插件进行相似度搜索的示例:

import { PGlite } from "@electric-sql/pglite";
import { vector } from "@electric-sql/pglite/vector";

const pg = new PGlite({
  extensions: {
    vector,
    // Alternatively, you can specify the path to the extension tarball
    // vector: new URL("../dist/vector.tar.gz", import.meta.url),
  }
});

await pg.exec("CREATE EXTENSION IF NOT EXISTS vector;");
await pg.exec(`
  CREATE TABLE IF NOT EXISTS test (
    id SERIAL PRIMARY KEY,
    name TEXT,
    vec vector(3)
  );
`);
await pg.exec("INSERT INTO test (name, vec) VALUES ('test1', '[1,2,3]');");
await pg.exec("INSERT INTO test (name, vec) VALUES ('test2', '[4,5,6]');");
await pg.exec("INSERT INTO test (name, vec) VALUES ('test3', '[7,8,9]');");

const res = await pg.exec(`
  SELECT * FROM test;
`);
console.log(res);

const res2 = await pg.exec(`
  SELECT
    name,
    vec,
    vec <-> '[3,1,2]' AS distance
  FROM test;
`);
console.log(res2);

以上代码输出的结果如下:

[
  {
    "rows": [
      {
        "id": 1,
        "name": "test1",
        "vec": "[1,2,3]"
      },
      {
        "id": 2,
        "name": "test2",
        "vec": "[4,5,6]"
      },
      {
        "id": 3,
        "name": "test3",
        "vec": "[7,8,9]"
      }
    ],
    "fields": [
      {
        "name": "id",
        "dataTypeID": 23
      },
      {
        "name": "name",
        "dataTypeID": 25
      },
      {
        "name": "vec",
        "dataTypeID": 16385
      }
    ],
    "affectedRows": 0
  }
]
[
  {
    "rows": [
      {
        "name": "test1",
        "vec": "[1,2,3]",
        "distance": 2.449489742783178
      },
      {
        "name": "test2",
        "vec": "[4,5,6]",
        "distance": 5.744562646538029
      },
      {
        "name": "test3",
        "vec": "[7,8,9]",
        "distance": 10.677078252031311
      }
    ],
    "fields": [
      {
        "name": "name",
        "dataTypeID": 25
      },
      {
        "name": "vec",
        "dataTypeID": 16385
      },
      {
        "name": "distance",
        "dataTypeID": 701
      }
    ],
    "affectedRows": 0
  }
]

PGlite 还支持许多高级功能,例如实时查询(live 插件)、持久化文件系统、框架集成(React、Vue)、嵌入式命令行(REPL)、实时远程数据同步(pglite-sync)等,相关示例建议参考官方文档:

https://pglite.dev/docs/