Stream: general

Topic: WASI modules in the browser

Nuno Lima (Apr 25 2024 at 14:31):

Hi! What is currently the best way to run WASI modules in the browser? WASM modules are easy to run, but modules that use WASI, I need some help.

Lann Martin (Apr 25 2024 at 14:34):

Take a look at JCO's "transpile" feature

Nuno Lima (Apr 25 2024 at 14:45):

I may not undestand, but it looks like it is focused on WebAssembly Components and I don't know if it is what I'm looking for.

Maybe an example will help me explain:

I compiled a C function to a WASI Module. The function simply calls "printf('Hello')" to print something. Now that I have a .wasm file, how can I instantiate the module and run the function in the browser? As it uses WASI capabilities, the native WebAssembly API doesn't work because I need the WASI imports.

As I'm not currently working with the WebAssembly component Model, i'm not sure if the jco helps me with my goals.

Lann Martin (Apr 25 2024 at 15:04):

Components are the basis of WASI 0.2. If you don't want to use components you will need to stick to WASI 0.1 (aka preview1). I'm not sure what the state of the art for running WASI 0.1 in browsers is; possibly this: https://github.com/bjorn3/browser_wasi_shim

Nuno Lima (Apr 25 2024 at 15:11):

I need some more insight on Components. Is it possible to take a C script and turn it into a component so I can use jco to run it? Also, would love to know where can i obtain some more information on the component model.

Lann Martin (Apr 25 2024 at 15:16):

This is the best high-level landing page for component model documentation: https://component-model.bytecodealliance.org/

Lann Martin (Apr 25 2024 at 15:18):

Is it possible to take a C script and turn it into a component so I can use jco to run it?

Yep! https://github.com/bytecodealliance/wit-bindgen?tab=readme-ov-file#guest-cc

Nuno Lima (Apr 25 2024 at 15:20):

Thank you very much!
One more question: is it possible, at this time, to build a WASI module that publishes messages to a MQTT bus? I imagine it would have to tackle problems like networking, but i don't know if WASI is yet capable of such a thing. Sorry to bother, is just that i'm a little lost on the state of the technology. Thanks again!

Lann Martin (Apr 25 2024 at 16:25):

Yes, though unless I'm mistaken about the current state of socket support in wasi-sdk I think you would have to implement it directly against the WASI sockets APIs: https://github.com/WebAssembly/WASI/tree/main/preview2/sockets

Lann Martin (Apr 25 2024 at 16:26):

My knowledge of WASI sockets is pretty limited at this point; someone else might be able to provide more info.

Lann Martin (Apr 25 2024 at 16:32):

Though: considering all of your questions, you may have a more fundamental problem: afaik there is no way to implement mqtt in a browser, with or without wasm.

Nuno Lima (Apr 25 2024 at 16:34):

The plan was to create a library in python that would publish messages and have it run in the browser with WASI. The bus itself would not be in the browser, just the publishing of the messages.

But i'm currently in a more basic state-of-mind now, just learning about the topic and creating simple examples first.

Lann Martin (Apr 25 2024 at 16:39):

Right, but unless you have an HTTP (or other browser-supported protocol) proxy for MQTT, there is no way for a browser to publish to an mqtt broker

Nuno Lima (Apr 25 2024 at 16:46):

I'm having some trouble understanding the process and steps to build a component (from Python).

1. So first I need to develop the Python script.
2. Create the WIT file (using the wit-bindgen???)
3. Use JCO to run the component in the browser

Are these the right steps?

Joel Dice (Apr 25 2024 at 16:54):

The easiest way to build a component from Python is probably componentize-py.

Joel Dice (Apr 25 2024 at 16:55):

I know people have used componentize-py to build components and then run them using JCO, although I haven't tried the latter yet, myself.

Nuno Lima (Apr 25 2024 at 17:03):

@Joel Dice Thank you. I understand that componentize-py takes a WIT file as an argument. Is it common to write the files manually or is there a tool that is used to generate the WIT file based on the code?

Joel Dice (Apr 25 2024 at 17:05):

There's no tool to generate a WIT file from Python code yet, AFAIK, so you'll either need to write it manually or use one someone else has already written.

Nuno Lima (Apr 25 2024 at 17:06):

@Joel Dice Ok so I'm afraid i have not understood the purpose of the WIT file. How can I use someone else's WIT file for my own Python script?

Joel Dice (Apr 25 2024 at 17:15):

The WIT file determines two important things: the API that the component will present to the host (i.e. to JS code in the browser in this case) and the API the the host will present to the component. WASI defines some standard ones that cover both (e.g. wasi-cli, which has a run export analogous to main in native CLI apps, plus various imports for accessing the filesystem, doing socket networking, getting environment variables, etc.). If your app can be modeled in terms of one of those standard collections of interfaces (which we call "worlds"), then you can use those WIT files. If you need a custom API in either direction, you'll want to write your own.

Nuno Lima (Apr 25 2024 at 17:49):

Thank you @Joel Dice for your patience and help.
So, let me check if my thoughts are ok:

1. I wrote a simple Python script that prints the fibonacci sequence every 2 seconds.

import time

def fibonacci(n):
    fib_sequence = []
    a, b = 0, 1
    while len(fib_sequence) < n:
        fib_sequence.append(a)
        a, b = b, a + b
    return fib_sequence


def print_fibonacci(n):
    for num in fibonacci(n):
        print(num)
        time.sleep(2)


terms = 15
print_fibonacci(terms)

2. Now to turn this into a component, I will need to use componentize-py with a WIT file that specifies an export called "fibonacci", right?

3. And to run the component in the browser, I could use jco.
   Am I missing something?

Joel Dice (Apr 25 2024 at 18:01):

I'd recommend looking at a few of the examples. componentize-py does not (yet) have special support for the wasm-cli world, which is what would be needed to support the script you shared unchanged. However, if you were to move the terms = 15; print_fibonacci(terms) part into the body of the run function here, then yes, that should work just fine.

Last updated: Dec 23 2024 at 12:05 UTC