Allocate Dynamic Memory in WebAssembly with Malloc
We demonstrate how to build a WebAssembly module that depends on malloc, linking in a pre-built malloc implementation at runtime, using a JS binding trick to handle the circular reference between the two WebAssembly modules. We then optimize the load process to ensure we are fetching these modules in parallel.
Malloc implementation: https://github.com/guybedford/wasm-stdlib-hack/blob/master/dist/memory.wasm
WASM Fiddle: https://wasdk.github.io/WasmFiddle/?1feerp
Demo Repo: https://github.com/guybedford/wasm-intro
When I try this example, the browser complains following error:
loader.js:7 Uncaught (in promise) CompileError: WasmCompile: Wasm decoding failed: expected magic word 00 61 73 6d, found 0a 0a 0a 0a @+0
at fetch.then.then.bytes (http://127.0.0.1:8080/lesson%206/loader.js:7:32)
at <anonymous>
fetch.then.then.bytes @ loader.js:7
Browser compiles memory.wasm and fail
loader.js:
function fetchAndInstantiate(url, imports) {
return fetch(url)
.then(res => {
if(res.ok) return res.arrayBuffer()
throw new Error(`Unable to fetch Web Assembly files url.`)
})
.then(bytes => WebAssembly.compile(bytes))
.then(modules => WebAssembly.instantiate(modules, imports || {}))
.then(instance => instance.exports)
}
let wasmMalloc, wasmFree
fetchAndInstantiate('./program.wasm', {
env: {
malloc: len => wasmMalloc(len),
free: addr => wasmFree(addr)
}
})
.then(m => {
fetchAndInstantiate('./memory.wasm', {
env: {
memory: m.memory
}
})
})Browser: chrome, version 59.0.3071.86 OS: Ubuntu 16.04.2 LTS
To me it was unclear where the memory.wasm file came from, and there seems to be no source code for it.