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

相关推荐
吃西瓜的年年25 分钟前
TypeScript
javascript·ubuntu·typescript
熊猫_豆豆3 小时前
一个模拟四轴飞行器在随机气流扰动下悬停飞行的交互式3D仿真网页,包含飞行器建模与PID控制算法
javascript·3d·html·四轴无人机模拟飞行
来恩10034 小时前
jQuery选择器
前端·javascript·jquery
前端繁华如梦4 小时前
树上挂苹果还是挂玻璃球?Three.js 程序化果实的完整实现指南
前端·javascript
CDwenhuohuo5 小时前
优惠券组件直接用 uview plus
前端·javascript·vue.js
川冰ICE5 小时前
TypeScript装饰器与元编程实战
前端·javascript·typescript
AI砖家6 小时前
Vue3组件传参大全,各种传参方式的对比
前端·javascript·vue.js
希望永不加班6 小时前
var局部变量类型推断的利弊
java·服务器·前端·javascript·html
threelab6 小时前
Three.js 3D 地图可视化 | 三维可视化 / AI 提示词
前端·javascript·人工智能·3d·着色器
失眠的咕噜7 小时前
PDA 安卓设备上传多张图片
android·前端·javascript