Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

WebAssembly pre-fetch external resources and then use fopen on it

I have a C++ project that uses EMSDK to compile to WebAssembly. I have an asset that my project loads, a bundle.zip that I currently use the '--embed-file' flag from the SDK at compile time, and this works.

However, I would like to know if there is a way, in HTML or JavaScript, to pre-load this asset. So, instead of having to rebuild my project every time I change something in 'bundle.zip', I would just upload it and keep the same '.wasm'.

Is this option available? When searching online, I only found questions and answers related to C#'s Blazor, which is not related to what I want.

A crucial detail is that my application needs to read this file from the file system, as if it were on the native platform, not on the web (it does a fopen).

like image 700
Rodrigo Avatar asked Dec 21 '25 14:12

Rodrigo


1 Answers

After the response of @VonC, this is my final HTML

<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <link rel="preload" href="/bundle.zip" as="fetch" type="application/octet-stream" crossorigin="anonymous" />
  <style>
    *,
    *::before,
    *::after {
      box-sizing: border-box;
    }

    * {
      margin: 0;
    }

    body {
      line-height: 1.5;
      -webkit-font-smoothing: antialiased;
    }

    canvas {
      display: block;
      max-width: 100%;
    }

    .container {
      display: flex;
      align-items: center;
      justify-content: center;
    }
  </style>
</head>

<body>
  <div class="container">
    <canvas id="canvas" oncontextmenu="event.preventDefault()"></canvas>
    <script>
      const canvas = document.getElementById("canvas");

      var Module = {
        canvas,
        noInitialRun: true,
        onRuntimeInitialized: () => {
          fetch("/bundle.zip")
            .then((response) => response.arrayBuffer())
            .then((data) => {
              const uint8View = new Uint8Array(data);
              FS.writeFile("/bundle.zip", uint8View);
              Module.callMain();
            });
        },
      };
    </script>
    <script src="carimbo.js"></script>
  </div>
</body>

</html>
like image 168
Rodrigo Avatar answered Dec 23 '25 02:12

Rodrigo