在 Lobechat 中使用 IndexedDB 包装器 Dexie

在本文中，我们分析了 Lobechat 中 Dexie 的使用情况。

如果你检查lobechat中的[数据库文件夹，它有2个文件夹：

1. 客户

2. 服务器

在这个 Lobechat 的自托管文档中，提到了 LobeChat

默认使用客户端数据库（IndexedDB）。这就是为什么你有两个文件夹，一个用于客户端，一个用于服务器。

database/client/core/db.ts 导入 Dexie。

Dexie 是 indexedDB 的简约包装器。让我们看一下入门教程中提供的一个简单的 dexie 示例。

// db.ts
import Dexie, { type EntityTable } from 'dexie';
interface Friend {
 id: number;
 name: string;
 age: number;
}
const db = new Dexie('FriendsDatabase') as Dexie & {
 friends: EntityTable;
};
// Schema declaration:
db.version(1).stores({
 friends: '++id, name, age' // primary key "id" (for the runtime!)
});
export type { Friend };
export { db };

重要提示：

应用程序通常有一个 Dexie 实例声明为其自己的模块。您可以在此处声明所需的表以及每个表的索引方式。 Dexie 实例是整个

中的单例 应用程序 - 您不需要按需创建它。从模块中导出生成的数据库实例，以便组件或其他模块可以使用它来查询或写入数据库。

使用如下所示的这一行，Lobechat 创建 BrowserDB 的单例实例。

export class BrowserDB extends Dexie {
 public files: BrowserDBTable;
 public sessions: BrowserDBTable;
 public messages: BrowserDBTable;
 public topics: BrowserDBTable;
 public plugins: BrowserDBTable;
 public sessionGroups: BrowserDBTable;
 public users: BrowserDBTable;
constructor() {
 this.version(1).stores(dbSchemaV1);
 this.version(2).stores(dbSchemaV2);
 this.version(3).stores(dbSchemaV3);
 this.version(4)
 .stores(dbSchemaV4)
 .upgrade((trans) => this.upgradeToV4(trans));
 // … more code
export const browserDB = new BrowserDB();

构造函数中编写的版本显示了客户端数据库架构如何随时间演变，阅读有关 Dexie.version() 的更多信息以了解版本。

关于我们：

在 Thinkthroo，我们研究大型开源项目并提供架构指南。我们开发了使用 tailwind 构建的 resubale 组件，您可以在您的项目中使用它们。我们提供 Next.js、React 和 Node 开发服务。

与我们预约会面讨论您的项目。

参考资料：

1. https://github.com/lobehub/lobe-chat/blob/main/src/database/client/core/db.ts

2. https://dexie.org/

3. https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB

4. https://web.dev/articles/indexeddb

5. https://lobehub.com/docs/self-hosting/server-database

6. https://dexie.org/docs/Tutorial/React

以上是在 Lobechat 中使用 IndexedDB 包装器 Dexie的详细内容。更多信息请关注PHP中文网其他相关文章！