Cloudflare Developers•6mo ago

hey guys! implementing a POC with

hey guys! implementing a POC with workerd by consuming a WASM file. I'm missing how to tell my .mjs entrypoint to basically proxy the request to the WASM binary (proxy request from one module to the other). Why? you may ask. Because this WASM binary is a Go webserver so it knows how to handle them. Can someone point me out in the right direction? I'll leave the files contents in a thread

6 Replies

niconiahi•6mo ago

config file

using Workerd = import "/workerd/workerd.capnp";

const config :Workerd.Config = (
  services = [ (name = "main", worker = .worker) ],
  sockets = [ ( name = "http", address = "*:8080", http = (), service = "main" ) ]
);

const worker :Workerd.Worker = (
  modules = [
    ( name = "entrypoint", esModule = embed "./build/entrypoint.mjs" ),
    ( name = "app", wasm = embed "./build/app.wasm" )
  ],
  compatibilityDate = "2023-03-14",
);

using Workerd = import "/workerd/workerd.capnp";

const config :Workerd.Config = (
  services = [ (name = "main", worker = .worker) ],
  sockets = [ ( name = "http", address = "*:8080", http = (), service = "main" ) ]
);

const worker :Workerd.Worker = (
  modules = [
    ( name = "entrypoint", esModule = embed "./build/entrypoint.mjs" ),
    ( name = "app", wasm = embed "./build/app.wasm" )
  ],
  compatibilityDate = "2023-03-14",
);

and the entrypoint.mjs content

addEventListener("fetch", event => {
        // i need to proxy here
    event.respondWith(new Response("Hello World"));
});

addEventListener("fetch", event => {
        // i need to proxy here
    event.respondWith(new Response("Hello World"));
});

the app.wasm is a Go webserver compiled with tinygo

niconiahi•6mo ago

I see this documentation on Github about WASM modules. How can I instanciate it?

GitHub

workerd/src/workerd/server/workerd.capnp at main · cloudflare/workerd

The JavaScript / Wasm runtime that powers Cloudflare Workers - cloudflare/workerd

MrBBot•6mo ago

Hey! 👋 In your entrypoint.mjs module...

import app from "./app.wasm";
const instance = new WebAssembly.Instance(app);
const response = instances.exports.myFunction(...);

import app from "./app.wasm";
const instance = new WebAssembly.Instance(app);
const response = instances.exports.myFunction(...);

MrBBot•6mo ago

app here is an instance of WebAssembly.Module: https://developer.mozilla.org/en-US/docs/WebAssembly/JavaScript_interface/Module

MDN Web Docs

WebAssembly.Module - WebAssembly | MDN

A WebAssembly.Module object contains stateless WebAssembly code that has already been compiled by the browser — this can be efficiently shared with Workers, and instantiated multiple times.

niconiahi•6mo ago

thank you very much Mr!! creator of miniflare wow, a validated voice to answer ahha hey. I've been looking for 2 days on the internet but I don't seem to find information to unblock myself from this step. Maybe you know it and can point me in the right direction (again)?

$ npx workerd serve config.capnp
service main: Uncaught TypeError: WebAssembly.Instance(): Import #0 module="gojs": module is not an object or function
  at entrypoint:3:18

$ npx workerd serve config.capnp
service main: Uncaught TypeError: WebAssembly.Instance(): Import #0 module="gojs": module is not an object or function
  at entrypoint:3:18

this is the current entrypoint.mjs

import app from "./app.wasm";
console.log("app", app)
console.log("exports", app.exports)

const instance = new WebAssembly.Instance(app, {
    main(arg) {
        console.log(arg);
    },

})
console.log("instance", instance)

async function handleFetch(request) {
    console.log("request", request.url)
    return new Response("Hello world")
}

addEventListener("fetch", event => {
    event.respondWith(handleFetch(event.request));
});

import app from "./app.wasm";
console.log("app", app)
console.log("exports", app.exports)

const instance = new WebAssembly.Instance(app, {
    main(arg) {
        console.log(arg);
    },

})
console.log("instance", instance)

async function handleFetch(request) {
    console.log("request", request.url)
    return new Response("Hello world")
}

addEventListener("fetch", event => {
    event.respondWith(handleFetch(event.request));
});

I've created the WASM binary using this command

$ tinygo build -o ./build/app.wasm -target wasm -no-debug ./main.go

$ tinygo build -o ./build/app.wasm -target wasm -no-debug ./main.go

I don't know if this is important but sharing (I've extensively check the MDN docs, I couldn't get unblocked) the console log at line 2 outputs this

app Module [WebAssembly.Module] {}

app Module [WebAssembly.Module] {}

so I would expect that it doesn't error out when instanciating it, but it does.. also the console log at line 3 outputs this

exports undefined

exports undefined

I would expect this to have at least one value being exposed but it doesn't. Normal?

MrBBot•6mo ago

Looking at the documentation here (https://tinygo.org/docs/guides/webassembly/wasm/#how-it-works), I think you'll need to import and construct a Go instance from the wasm_exec.js file, then pass this to your WebAssembly.Instance:

import "wasm_exec.js"; // or `import { Go } from "wasm_exec.js";`, not sure
import app from "./app.wasm";

const go = new Go();

const instance = new WebAssembly.Instance(app, go.importObject);

...

import "wasm_exec.js"; // or `import { Go } from "wasm_exec.js";`, not sure
import app from "./app.wasm";

const go = new Go();

const instance = new WebAssembly.Instance(app, go.importObject);

...

Using WASM

How to call WebAssembly from JavaScript in a browser.

Gaming

Programming

hey guys! implementing a POC with