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

玩的就是花

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

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

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

这是开源版本的源代码地址:github.com/snaplet/pos...

还有更花的

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

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

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

在线演示的链接:copy.sh/v86/?profil...

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

新玩法

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

github.com/electric-sq...

仍旧是在前端运行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')

PostgreSQL免费在线服务

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

MemFire Cloud提供免费的PostgreSQL数据库,还提供基于开源Supabase的应用托管服务,直接将数据库转换成API使用,算是另一种前端直接使用数据库的路子,小程序、APP、web开发都可以直接使用,感兴趣的同学可以尝试一下:cloud.memfiredb.com/auth/login?...

相关推荐
kyriewen2 小时前
我看完这篇安全论文——AI推荐的npm包,92%是编出来的
前端·javascript·ai编程
心中有国也有家3 小时前
AtomGit Flutter 鸿蒙客户端:Canvas 绘制进阶-路径、渐变与混合模式
android·javascript·flutter·华为·harmonyos
鹿目4 小时前
使用 Vant CLI 搭建 UI 组件库:从 H5 到小程序跨平台
前端·javascript
默_笙4 小时前
😭 我花了两小时找了一个数据结构 bug,才把"迷你 Cursor"跑起来,绝望(bushi)
前端·javascript
竹林8184 小时前
wagmi v2 监听合约事件踩坑记:从 `useContractEvent` 到 `watchContractEvent`,我重构了三版才搞定实时数据流
前端·javascript
xingcheng5 小时前
Vue 2 + JavaScript编码规范skill
javascript
Larcher5 小时前
从零实现一个可运行的 RAG - LangChain、内存向量库与检索增强生成
前端·javascript
mONESY5 小时前
Vue3流式调用大模型接口完整实践
javascript
qq_419854056 小时前
空间网格管理器
前端·javascript·html