How do you efficiently sent data from JavaScript to Rust continuesly?

help
1

In JS I am constantly updating values which Rust will use. Right now I need to sent the values through a Rust function converted from WASM in JS, so that Rust itself can acces and use it. This doesn't sound very optimal to me.

In this video: [iJS 2021: WebAssembly, Rust, and TypeScript – a Match Made in Heaven - YouTube](https://WASM shared memory) Rust and JS both have easy acces to the shared data through a pointer.

How can I set this up with wasm-pack build --target web? Since this pre-builds a JS file where the Rust/JS-connection happens.

2

  1. Disclaimer, I'm not using this; but I recall reading this, and if you are worried about JS/Rust interop, this might be useful.

  2. Have you looked at how Implementing Life - Rust and WebAssembly shares memory beween Rust / JS ?

3

sadly they're using npm, and it converts a bit differently.

4

I am building with:

	cargo build --target=wasm32-unknown-unknown --release
	~/.cargo/bin/wasm-bindgen --target web
5

Not sure what that does.

But why not use wasm-pack build --target web? How do you get your exported Rust funcs etc with this?

6

wasm-pack uses wasm-bindgen internally. wasm-pack does some extra work for compatibility with other web tooling

7

The point is that I was able to play with parts of that tutorial without using npm, and you might learn something too about Rust/JS interop by working through that section.

8

You have any more information about it?

And I wasnt sure about the second line. Does the first line compile, and the second executes?

9

If you can't get Implementing Life - Rust and WebAssembly to work, you lack the proper foundation for the two of us to have a productive conversation on Rust/JS interop.

10

Hence the question for more information lol

11

If you are trying to get Implementing Life - Rust and WebAssembly to work you should be posting compiler / linker errors you run into.

Instead, you are complaining that it uses npm and finding reasons to not put effort into getting Implementing Life - Rust and WebAssembly to work.

12

The only question I sadly need an answer to is my actual question.

13

You define the struct in Rust with:

#[wasm_bindgen]
pub struct Universe {
    width: u32,
    height: u32,
    cells: Vec<Cell>,
}

You read it in JS with:

const drawCells = () => {
  const cellsPtr = universe.cells();
  const cells = new Uint8Array(memory.buffer, cellsPtr, width * height);

  ctx.beginPath();

  for (let row = 0; row < height; row++) {
    for (let col = 0; col < width; col++) {
      const idx = getIndex(row, col);

      ctx.fillStyle = cells[idx] === Cell.Dead
        ? DEAD_COLOR
        : ALIVE_COLOR;

      ctx.fillRect(
        col * (CELL_SIZE + 1) + 1,
        row * (CELL_SIZE + 1) + 1,
        CELL_SIZE,
        CELL_SIZE
      );
    }
  }

  ctx.stroke();
};
1 Like
14

Do you have more links and/or examples for using cargo build --target=wasm32-unknown-unknown --release. I see you'd need to use some different stuff like no mangler etc. I can't seem to find a lot of examples. Maybe with this I'll get some more control and will be able to understand the flow better as well. Since wasm-pack still does it for me.

Also I thought --target web means no bundler. But I don;t really follow what a bundler is than, since wasm-pack is a bundler I thought, but you combine those two. And when I'm compiling it does actually seem to bundle stuff as well.

15

I do not understand why you refuse to just work through Implementing Life - Rust and WebAssembly after I have repeatedly shown that that particular section does the Rust / JS interop you are describing.

Therefore, I am going to walk away and let someone more patient than me help you.

16

You're not making any sense. I'm specifically asking how to run stuff with --target=wasm32-unknown-unknown. And the game of life is also still using npm, as you know. So I don't care to learn to use npm. Since it's not going to work with wasm-pack or --target=wasm32-unknown-unknown.

I've already worked through the example with wasm-pack, but as my actual question still stands, I just want to know how to setup the data stream and the toturial does not show you how to do this with wasm-pack..

17

Are you looking for something like this, i.e. for the way to use the .wasm file generated by cargo build?

18

Besides (1) publishing to npm and (2) using npm to install the wasm-bindgen tools, can you please point out where in that tutorial is npm required to build the Rust / game of life ?

19

The files are configureted quite differently starting here: Hello, World! - Rust and WebAssembly.

20

Is there any part of the Rust -> wasm or JS / wasm interop part that depends on npm ?