wong2.me

Emscripten的文件系统

Thu, 21 Oct 2021 19:58:11 +0800

Intro

我们知道Emscripten可以将C/C++代码编译到WebAssembly，从而在浏览器中运行。为了实现这个目标，除了代码层面的编译外，Emscripten还需要在Web环境下提供大量对native runtime的模拟，如文件系统、底层图形库、网络等。今天重点看一下文件系统部分。

Overview

由于浏览器中的JavaScript无法直接访问操作系统的文件系统，Emscripten提供了一套虚拟文件系统来模拟一个POSIX FS。

如上面的架构图所示，原生代码编写的应用使用libc/libxx中API进行文件系统操作，经Emscripten编译后，调用JavaScript编写的虚拟文件系统API。

默认的虚拟文件系统实现为MEMFS，顾名思义它是在内存里实现的，页面刷新后数据就会丢失。如果需要持久化，在浏览器里可以使用基于IndexedDB的IDBFS。

使用示例

下面我们通过一个例子来展示文件系统的使用，并为后续实验提供一个基础。

C程序

首先我们编写一个如下含有文件操作的C程序：

#include <stdio.h>

void append_line(char *filename, char *line) {
 FILE *fp = fopen(filename, "a");
 fprintf(fp, "%s\n", line);
 fclose(fp);
}

int main() {
 return 0;
}

这段程序中定义了 append_line 函数，它的作用就是往一个文件里添加一行新内容。我们在main中并没有调用它，而是准备暴露给JS代码调用。

编译

接下来我们用下面的命令编译这段C代码到WebAssembly，在选项中指定export append_line 函数。

emcc fs.c \
 -o fs.js \
	-s EXPORTED_RUNTIME_METHODS="[cwrap, FS]" \
	-s EXPORTED_FUNCTIONS="[_append_line]"

编译后会得到 fs.js 和 fs.wasm 两个文件，其中 fs.js 是 Emscripten提供的 wrapper 文件，它会自动处理 wasm 文件的加载等等。我们写一段极其简单的HTML来使用它：

<body>
	<script src="fs.js"></script>
	<script>
		const appendLine = Module.cwrap('append_line', null, ['string', 'string'])
	</script>
</body>

除了引入 fs.js 外，我们还通过 cwrap 把 append_line 转成了可以在JS中调用的函数。（C和JS代码如何互操作不是本文的重点，想了解更多可以阅读相关文档。

Mon, 01 Jan 0001 00:00:00 +0000

我去过的地方

中国

北京
上海
香港
台北
重庆
天津
四川（成都，都江堰，乐山）
江苏（南京，苏州，扬州，无锡，徐州，高邮）
浙江（杭州，宁波，绍兴，湖州，台州，金华，衢州，嘉兴，嵊泗）
山东（济南，济宁，曲阜，青岛，日照，菏泽）
安徽（黄山，芜湖）
陕西（西安）
山西（平遥）
湖北（武汉，荆州，襄阳）
湖南（长沙）
广东（广州，顺德，深圳）
广西（南宁，柳州）
福建（福州，厦门，泉州，武夷山，平潭）
贵州（贵阳，黄果树，凯里，千户苗寨）
云南（昆明，西双版纳，丽江，泸沽湖）
海南（三亚）
待补充

日本

东京，大阪，京都，神户，姬路，横滨，镰仓，奈良，冲绳，札幌，小樽，箱根，名古屋，下吕，白川乡，金泽，富山，福冈，佐贺，熊本，松山，今治，高松，直岛，仓敷，冈山，广岛

韩国

济州岛

越南

胡志明市，美奈，芽庄

Mon, 01 Jan 0001 00:00:00 +0000

Things I use

Devices

iPhone 15 Pro
Macbook Pro M4 (2024)
AirPods Pro
HHKB Professional HYBRID Type-S 雪
微信读书墨水屏

Mac Apps

Arc: daily browser
Cursor: IDE
Raycast: best Mac launcher
Readwise Reader: best Read-it-later and RSS reader
Ghostty: terminal
Shottr: screenshot tool
Proxyman: HTTP requests debugging tool
MonitorControl: controls external display brightness and volume
Itsycal: tiny menubar calendar
Screen Studio: screen recording
Lemon: clean your mac
Rectangle: window manager
Hidden Bar: hide menubar items
Postico 2: postgresql client
Tadama: relax timer

Browser Extensions

SaaS

Supabase
Railway