【大神玩花】借助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?...

相关推荐
FRing0324 分钟前
JavaScript入门到精通二十八(forEach遍历、创建对象的三种方式、构造函数、new实例化执行过程、实例成员和静态成员)
开发语言·前端·javascript
进击的丸子1 小时前
代理网络环境下 Linux Pro 在线激活实操指南
javascript·后端·安全
小大宇1 小时前
vue知识点9-标签上的ref
前端·javascript·vue.js
2601_949575861 小时前
JSON5 跨端三方库仓颉适配全流程
前端·javascript·flutter
jaysee-sjc2 小时前
【苍穹外卖】Day10:定时任务与 WebSocket 实时提醒实战
java·开发语言·javascript·数据库·vue.js·websocket·网络协议
瑞克-桑切斯2 小时前
PostgreSQL 14.4 源码部署 & 运维手册(CentOS7)
数据库·学习·postgresql
尤水就下3 小时前
🔥说一说在线文档的 Block 架构是如何实现的
前端·javascript·架构
晓得迷路了4 小时前
栗子前端技术周刊第 151 期 - ViteConf 2026、React Router 8.5、React Native 0.88...
前端·javascript·vue.js
Ai-_Man4 小时前
Microsoft Copilot对话数据怎么导入到另外一个Microsoft Copilot账号里去?AI导出鸭
开发语言·javascript·人工智能·microsoft·chatgpt·ecmascript·copilot
小大宇4 小时前
Vue知识点8-Watch
前端·javascript·vue.js