大神玩花：借助 WASM 在浏览器中运行数据库

不得不说，大神们玩的就是花！把 PostgreSQL 代码编译成 WASM，在浏览器中运行，先不说有用没用，光看效果就挺炸裂。

下图是直接运行在浏览器中的 PostgreSQL 数据库，由于需要在浏览器中运行一个小型的前端虚拟机，需要下载大约 30M 的资源，因此第一次打开需要等几秒，感兴趣的可以自己玩一下。

上面这个是两年前的东东了，具体有啥用呢？目前看到老外已经用该技术构建了一个 PostgreSQL 教程网站，说实话，对于体验过在线学习 HTML、JavaScript 的同学来说，还是非常实用的，随时可以学习 SQL：

这是开源版本的源代码地址：https://github.com/snaplet/postgres-wasm

还有更花的

瞄了一眼上面的的开源项目使用的技术，里面有一个 v86 项目，可以说没有最花只有更花：

基于 v86 这个模拟器，可以在浏览器中玩很多花样，比如模拟一些 PC 上的游戏：

甚至直接在浏览器里面跑 windows 操作系统：

在线演示的链接：https://copy.sh/v86/?profile=windows2000

上面的搞法都有一个比较明显的缺点，前端代码体积挺大的，打开的时候需要等一会儿，不过足够酷炫。

新玩法

最近又有大神在折腾了，上周才开源的一个前端库，没几天已经 2.8K 的星星了。

https://github.com/electric-sql/pglite

仍旧是在前端运行 PostgreSQL，相同的目标，不同的思路。

PGlite is a WASM Postgres build packaged into a TypeScript client library that enables you to run Postgres in the browser, Node.js and Bun, with no need to install any other dependencies. It is only 3.7mb gzipped.

依旧是 WASM 路线，不过体积已经优化到只有 3.7mb 了，对于一个数据库系统来说，已经足够小了。更为重要的是，前端代码可以操控数据库了：

import { PGlite } from "@electric-sql/pglite"
const db = new PGlite()
await db.query("select 'Hello world' as message;")
// -> [ { message: "Hello world" } ]

并且可以使用浏览器的 indexedDB 来持久化存储数据，一个真正可用的运行在前端的数据库：

const db = new PGlite('idb://my-pgdata')

Supabase

除了上面这种硬花，还有一些比较成熟的花样，可以在前端直接使用数据库。

Supabase 是开源的 BaaS 解决方案，直接将数据库转换成 API 使用，算是另一种前端直接使用数据库的路子，小程序、APP、web 开发都可以直接使用。

下面是 Supabase 在前端直接读写数据库的接口，比较直观：

const { data, error } = await supabase  .from('posts')  .insert([    {      title: "Hello World",      content: "My first post",      user_id: "some-user-id",      user_email: "myemail@gmail.com"    }  ])

MemFire Cloud 可以免费创建数据库使用 Supabase，感兴趣的同学可以尝试一下。