Emscripten で C++ から fetch など非同期 JS 呼びは面倒なことがわかりました
C++(WASM) の同期コードから, JavaScript の非同期コード(async)を呼びたい.
特に C++ 側から fetch を呼びたい.
そのままだと emscripten のバグとかで無理ゲーでした.
とりあえずのまとめ
C++ 側から JS の async 関数, たとえば外部 URI のファイル(https://~)を fetch で読みたいなどの場合, JS 側で非同期関連の処理が完結するように C++ 側を書き換えられるのであればそのように書き換えを検討してほしい.
他者のライブラリコードなど, どうしても C++ 側から JS 非同期を呼ぶ仕組みを変えられない場合,
- ASYNCIFY する. ASYNCIFY_ONLY で必要な関数だけ非同期化. ただし JS で非同期から呼び, C++ 側でも async な関数を呼ぶと Cannot have multiple async operations エラーになるなど制約は多い
- Cross-Site Origin Isolation 有効にし, SharedArrayBuffer/Atomic でメッセージパッシングベースで対応(C++ 側は pthread 有効でコンパイル)
背景
まず, 以下のコードはうまくうごかない
static bool done = false;
void main_loop() {
while (!done) {
// なんか busy loop とか
}
}
while は dead-code elimination が働くのか, WASM assembly や VM が無限ループは対応していないのか, 実行がすり抜けしてしまう.
あといずれにしても busy loop ができたとしても, CPU usage が 100% になってしまい効率は悪くなってしまうのでやはり実務では利用できない.
sleep_for で待つようにしても, 今度はブラウザがハングする
while (!done) {
std::this_thread::sleep_for(100);
}
Asyncify
一応非同期対応できるが...
- コードサイズが大きくなる. tinyusdz では 1.6 MB -> 7MB に.
- コンパイルめちゃ遅くなる
- 結構制限がある
- 致命的（？）なのは, JS で非同期から C++ を呼んで C++ で非同期を呼ぶ, よくありがちなケース. Cannot have multiple async operations エラー
同期 JS コードを呼んでそこで await はダメなの?
toplevel await 的な?...
EM_JS(int, do_fetch, (), {
out("waiting for a fetch");
const response = await fetch("./demo/UsdCookie.usdz");
out("got the fetch response");
// (normally you would do something with the fetch here)
return 42;
});
少なくとも現状(2025/06), acorn optimizer で syntax error
SyntaxError: Cannot use keyword 'await' outside an async function
まあいずれにしても JavaScript の VM 構造から言って toplevel await がサポートされたとしても Emscripten(WASM)の場合は無理そう.
あとは, 基本パフォーマンスとかほしいので C++(WASM)化しているので, JS で同期で呼んじゃうとメインスレッドが止まっちゃってユーザーエクスペリエンス台無しになるし
fetch API
まず, 同期 fetch EMSCRIPTEN_FETCH_SYNCHRONOUS はバグかなにかで,
長らく動かない.
2025/06 時点(4.0.10)でも動かなかった(async として動作する).
したがって, ASYNCIFY して,
struct FetchData
{
bool done{false};
std::string data;
};
static void downloadSucceeded(emscripten_fetch_t *fetch) {
printf("Finished downloading %llu bytes from URL %s.\n", fetch->numBytes, fetch->url);
FetchData *p = reinterpret_cast<FetchData *>(fetch->userData);
// The data is now available at fetch->data[0] through fetch->data[fetch->numBytes-1];
p->data = std::string(fetch->data, fetch->numBytes);
p->done = true;
emscripten_fetch_close(fetch); // Free data associated with the fetch.
}
static void downloadFailed(emscripten_fetch_t *fetch) {
printf("Downloading %s failed, HTTP failure status code: %d.\n", fetch->url, fetch->status);
FetchData *p = reinterpret_cast<FetchData *>(fetch->userData);
p->data = std::string();
p->done = true;
emscripten_fetch_close(fetch); // Also free data on failure.
}
static std::string readFileSync(const std::string &uri) {
FetchData data;
data.done = false;
emscripten_fetch_attr_t attr;
emscripten_fetch_attr_init(&attr);
std::string buf;
attr.userData = reinterpret_cast<void *>(&data);
strcpy(attr.requestMethod, "GET");
attr.attributes = EMSCRIPTEN_FETCH_LOAD_TO_MEMORY | EMSCRIPTEN_FETCH_REPLACE;
attr.onsuccess = downloadSucceeded;
attr.onerror = downloadFailed;
emscripten_fetch_t *fetch = emscripten_fetch(&attr, uri.c_str()); // Blocks here until the operation is complete.
while (!data.done) {
// Need ASYNCIFY
emscripten_sleep(1000);
}
printf("fs.size %d\n", data.data.size());
return data.data;
}
こんな感じで emscripten_sleep 入れて対応しようとしても, asyncify の ES_ASYNC_JS 呼びのときと同様に
Cannot have multiple async operations in flight at once
というエラーが出やすい.
どうも C++ 関数を JS 側で async 関数内で呼んでいたりすると多重に async が発生してエラーになる模様.
FS API
仮想ファイルシステム的なのを提供する.
同期 API であるので async の問題からは解放される(ハズ).
ただし fetch と違い, 基本 index.html のあるフォルダのファイルだけ扱える感じで, 任意の URI のファイルを取得はできない.
また, JS 側でのセットアップもいろいろ必要.
JSPI?
ASYNCIFY しなくても, JavaScript Promise API, C++ の同期コードから JS の非同期コード(e.g. fetch)をいい感じにさばくようにできるっぽい
ただし 2025/06 時点ではブラウザのサポートはまだ一部で experimental 対応というレベルで, 実務で使うことはまだできない. あと 4 年くらいはかかりそ
たぶん現状実務的に使えるので唯一の解
pthread 有効(SharedArrayBuffer 有効)
message passing 形式(or JS 側で Atomics.await で同期をとる)で対応.
詳しくは ChatGPT くんなり Claude 4 くんにきいて.
Atomics のために SharedArrayBuffer 有効化が必要.
SharedArrayBuffer 有効にするには Cross-Site Origin Isolation 設定(web サーバー側でヘッダ付与)が必要.
Github Pages みたいに web サーバーに手を入れられない場合は
coi-serviceworker でとりあえずしのげそ?
さらなる高みへ
C++20 では JavaScript async のようなものの機能として coroutine がサポートされはじめました.
そのうちいい感じになるのでしょうか?
Discussion