Blazor WebAssemblyアプリ上に展開されているFileSystemを触る

.NET 6 RC2でのお話です。 触ってみたやつをメモっておく。

Blazor WebAssemblyを支える技術であるEmscripten。 Emscriptenは仮想のファイルシステムをサポートしており、JSやwasmから読み書きが行えるようになっています。

emscripten.org

さて、このBlazor WebAssemblyもこのEmscriptenを使っているのだし、C#から読み書きできるの？と気になったので試してみました。

結論としては出来たので、使ったコード片を残しておきます。

@using System.IO

<button onclick="@LS">lsするぞ</button>
<input type="text" @bind-value="dir" @bind-value:event="oninput" />

...

@code
{
    string dir = "";

    void LS()
    {
        LSImpl(dir);
    }

    void LSImpl(string rootDir)
    {
        try
        {
            foreach (var f in Directory.GetFiles(rootDir))
            {
                Console.WriteLine(f);
            }
            foreach (string d in Directory.GetDirectories(rootDir))
            {
                Console.WriteLine(d);
                LSImpl(d);
            }
        }
        catch (Exception e)
        {
            // System.UnauthorizedAccessException: Access to the path '/proc/self/fd' is denied.
            Console.Error.WriteLine(e);
        }
    }
}

こんな感じのコードを流し込むと

/
/tmp
/home
/home/web_user
/dev
/dev/null
/dev/tty
/dev/tty1
/dev/random
/dev/urandom
/dev/stdin
/dev/stdout
/dev/stderr
/dev/shm
/dev/shm/tmp
/proc
/proc/self
/usr
/usr/share
...

こんな感じで仮想ファイルシステムの中身が列挙されます。

BlazorWebassembly（.NET6 rc2）のFileSystemを眺めたやつ · GitHub

この中身はemscriptenのコードに書いてあるものと同じですね。

emscripten/library_fs.js at 2.0.23 · emscripten-core/emscripten · GitHub

これでC#上からFileSystemにアクセスできることがわかりました。 さて気になるのは、ASP.NET Core updates in .NET 6 Release Candidate 2のアナウンスで出てきた「Native dependencies support for Blazor WebAssembly apps」で突っ込んだwasmから読み書きは？というところだと思います。

ASP.NET Core updates in .NET 6 Release Candidate 2 - .NET Blog

結論から言うと同様のFileSystemに読み書きできるので、ほんと何でも動かせるなみたいな状況になっています。

次の記事ではOpenJTalkをBlazor WebAssembly + Native dependenciesで動作させたことについてメモを書こうかと思います。