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

相关推荐
NC 王炸1 分钟前
AI 做的便签,换个浏览器就没了?加一个导出按钮,把数据带走
javascript·ai编程·数据备份·localstorage·txt导出
todoitbo2 分钟前
本来只想给内网开个口子,Natapp 却多给了一道防护
前端·javascript·vue.js·内网穿透·网络防护·natapp
IvorySQL4 分钟前
PostgreSQL 日报| PostgreSQL 19 RC1 正式发布(10 月 16 日)
数据库·人工智能·postgresql·开源
Chloe.Zz13 分钟前
一篇入门Agent
开发语言·前端·javascript
silvamux_30 分钟前
4款新模型商务邮件翻译横评:0.98到0.46
android·java·javascript
定栓1 小时前
Webpack迁到Vite第六节:构建配置详解(vite.config.js)
前端·javascript·webpack
远离UE410 小时前
UE5 Substrate Thin Film 源码拆析
开发语言·javascript·ue5
keyipatience10 小时前
JavaScript学习(1)书写位置,变量、数据类型、运算符
开发语言·前端·javascript·css·学习
IvorySQL11 小时前
PostgreSQL 日报| PgBouncer 修复三个 CVE 漏洞(10 月 15 日)
数据库·postgresql·区块链
饺子大魔王的男人11 小时前
后台表格、查询、流程总在重复写?我用ToolJet把PostgreSQL直接做成可远程访问的业务系统
数据库·postgresql