I am currently working on a basic website that showcases the outcome of a function call from a javascript file that interacts with a WASM file. Here are the files I have set up:
Makefile
FILES = add.c
OUTPUT = MyWasmLib
CC = emcc
EMCC_VERSION := $(shell command -v $(CC) 2> /dev/null)
EMCC_FLAGS = -s EXPORT_ALL=1 -s EXPORTED_RUNTIME_METHODS='["cwrap"]' -s ALLOW_MEMORY_GROWTH=1 -s EXPORT_ES6=1 -sMODULARIZE
all: check_emcc $(OUTPUT)
check_emcc:
ifndef EMCC_VERSION
$(error "emcc is not installed. please install emscripten.")
endif
$(OUTPUT): $(FILES)
$(CC) $(EMCC_FLAGS) -o <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8fabcfa1e5fc">[email protected]</a> $(filter %.c, $(FILES))
clean:
rm -i $(OUTPUT).js $(OUTPUT).wasm
.PHONY: all check_emcc clean
add.c
#include <emscripten.h>
EMSCRIPTEN_KEEPALIVE
int add(int a, int b) {
return a + b;
}
wasm_mjs_interface.js
import { default as MyWasmLib } from "./MyWasmLib.js";
let addWasmFunction;
let WASM_initialized;
const initializeWASM = () => {
WASM_initialized = new Promise((resolve, reject) => {
MyWasmLib.onRuntimeInitialized = () => {
try {
addWasmFunction = MyWasmLib.cwrap(
"add", "number", ["number", "number"]
);
resolve();
}
catch (error) {
reject(error);
}
};
});
};
initializeWASM();
export const WASM_add = async (a, b) => {
await WASM_initialized;
try {
return addWasmFunction(a, b);
}
catch (error) {
console.error("Error calling add function in WASM: ", error);
throw error;
}
};
index.js
import { WASM_add } from "./wasm_mjs_interface.mjs";
async function loadWasmAdd() {
try {
const result = await WASM_add(5, 3);
console.log("WASM addition result: ", result);
document.getElementById("result").textContent = `${result}`;
}
catch (error) {
console.error("Error performing WASM addition: ", error);
}
}
if (document.readyState === "loading") {
window.addEventListener("DOMContentLoaded", loadWasmAdd);
} else {
loadWasmAdd();
}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>WASM Module Example</title>
<script type="module" src="./index.js"></script>
</head>
<body>
<p id="result"></p>
</body>
</html>
I have set up a basic python server using
python3 -m http.server 8000
To view the server, I am using
firefox 0.0.0.0:8000/index.html
The issue I am encountering is that nothing seems to be happening in the actual console or on the page. While I can see a GET request for index.html, MyWasmLib.js, and wasm_mjs_interface.mjs in the console, there are no errors displayed and no content appearing in the browser where the p tag is located.