I am wondering if, using C (or C++ or Rust) and javascript, I am able to do CRUD operations to a shared data structure. Using the most basic example, here would be an example or each of the operations:

#include <stdio.h>
typedef struct Person {
    int age;
    char* name;
} Person;

int main(void) {

    // init
    Person* sharedPersons[100];
    int idx=0;

    // create
    sharedPersons[idx] = (Person*) {12, "Tom"};

    // read
    printf("{name: %s, age: %d}", sharedPersons[idx]->name, sharedPersons[idx]->age);

    // update
    sharedPersons[idx]->age = 11;

    // delete
    sharedPersons[idx] = NULL;

}

Then, I would like to be able to do the exact same thing in Javascript, and both be able to write to the same shared sharedPersons object. How could this be done? Or does the setup need to be something like a 'master-slave' where one just needs to pass back information to the other and the master does all the relevant actions? I'm hoping that there's a way do CRUD on a shared data object in webassembly, and any help would be greatly appreciated.

As a reference: .html

I am wondering if, using C (or C++ or Rust) and javascript, I am able to do CRUD operations to a shared data structure. Using the most basic example, here would be an example or each of the operations:

#include <stdio.h>
typedef struct Person {
    int age;
    char* name;
} Person;

int main(void) {

    // init
    Person* sharedPersons[100];
    int idx=0;

    // create
    sharedPersons[idx] = (Person*) {12, "Tom"};

    // read
    printf("{name: %s, age: %d}", sharedPersons[idx]->name, sharedPersons[idx]->age);

    // update
    sharedPersons[idx]->age = 11;

    // delete
    sharedPersons[idx] = NULL;

}

Then, I would like to be able to do the exact same thing in Javascript, and both be able to write to the same shared sharedPersons object. How could this be done? Or does the setup need to be something like a 'master-slave' where one just needs to pass back information to the other and the master does all the relevant actions? I'm hoping that there's a way do CRUD on a shared data object in webassembly, and any help would be greatly appreciated.

As a reference: https://rustwasm.github.io/wasm-bindgen/contributing/design/js-objects-in-rust.html

• javascript
• c++
• c
• rust
• webassembly

• 2 I can only speak for Rust+wasmbindgen flow, but since webassembly uses different memory spaces, any objects created stay on their respective memories. Across that boundary, only primitives (integers, strings) are copied over, and anything else just uses proxies. – kmdreko Commented May 23, 2021 at 2:55
• 1 @kmdreko I see: so there's no way for the rust side to write to the js side and vice-versa, and there's no such thing as a shared memory space? What do you mean by "proxies" ? – David542 Commented May 23, 2021 at 3:53
• 1 what's the usecase for this? if you export your CRUD functions you can call them from javascript; why would you ever need the javascript to personally mess with the memory? (I'm sure there is a usecase, I'm just finding it difficult to think of one.) – neofelis Commented May 27, 2021 at 14:32

3 Answers 3

Creating the object

Let's create the object in C and return it:

typedef struct Person {
    int age;
    char* name;
} Person;

Person *get_persons(void) {
    Person* sharedPersons[100];
    return sharedPersons;
}

You could also create the object in JS, but it's harder. I'll e back to this later.

In order for JS to get the object, we've defined a function (get_persons) that returns (a pointer to) it. In this case it's an array, but of course it could have been a single object. The thing is, there must be a function that will be called from JS and that provides the object.

Compiling the program

emcc \
    -s "SINGLE_FILE=1" \
    -s "MODULARIZE=1" \
    -s "ALLOW_MEMORY_GROWTH=1" \
    -s "EXPORT_NAME=createModule" \
    -s "EXPORTED_FUNCTIONS=['_get_persons', '_malloc', '_free']" \
    -s "EXPORTED_RUNTIME_METHODS=['cwrap', 'setValue', 'getValue', 'AsciiToString', 'writeStringToMemory']" \
    -o myclib.js
    person.c

I don't remember why we have a leading underscore in _get_persons, but that's how Emscripten works.

Getting the object in JS

const createModule = require('./myclib');

let myclib;
let Module;

export const myclibRuntime = createModule().then((module) => {
  get_persons: Module.cwrap('get_persons', 'number', []),
});

What this does is create a get_persons() JS function that is a wrapper of the C get_persons() function. The return value of the JS function is "number". Emscripten knows that the C get_persons() function returns a pointer, and the wrapper will convert that pointer to a JS number. (Pointers in WASM are 32-bit.)

Manipulating the object in JS

const persons = get_persons();
Module.getValue(persons, 'i32');  // Returns the age of the first person
Module.AsciiToString(Module.getValue(persons + 4, 'i32'));  // Name of first person

// Set the second person to be "Alice", age 18
const second_person = persons + 8;
Module.setValue(second_person, 18, 'i32');
const buffer = Module._malloc(6);  // Length of "Alice" plus the null terminator
Module.writeStringToMemory("Alice", buffer);
Module.setValue(second_person + 4, buffer, 'i32');

This is a fairly low level way of doing it, although there seems to be an even lower level way. As other people have suggested, there may be higher level tools to help in C++ and Rust.

Creating the object in JS

You can create objects in JS by using _malloc() (and free them with _free()) as we did with the string above, and then pass their pointers to C functions. But, as I said, creating them in C is probably easier. In any case, anything _malloc()ed must eventually be freed (so the string creation above is inplete). The FinalizationRegistry can help with this.

Yes, this is possible.

WebAssembly stores objects within linear memory, a contiguous array of bytes that the module can read and write to. The host environment (typically JavaScript within the web browser) can also read and write to linear memory, allowing it to access the objects that the WebAssembly modules stores there.

There are two challenges here:

1. How do you find where your WebAssembly module has stored an object?
2. How is the object encoded?

You need to ensure that you can read and write these objects from both the WebAssembly module and the JavaScript host.

I'd pick a known memory location, and a known serialisation format and use that to read/write from both sides.

I made this that can help with wasm-structs in js hosts:

import memhelpers from 'cmem_helpers'

const mod = (await WebAssembly.instantiate(wasmBytes, { env })).instance.exports

const { structClass, setString, getString } = memhelpers(mod.memory.buffer, mod.malloc)

const Color = structClass({
  r: 'Uint8',
  g: 'Uint8',
  b: 'Uint8',
  a: 'Uint8'
})

// now you can use it

// this will allocate a new one
const black=new Color({r: 0, g: 0, b:0, a: 255})

// you can also make an access-instance from an existing address
const color=new Color({}, myAddress)

This will create a js object that uses the memory you provided to hold the values, so you can mess with it like this, and it will change the wasm-memory:

color.a = 255

And you can pull the address out, for passing to a wasm function like this:

mod.clearScreen(color._address)

These objects also have _size so you can use them in arrays, or whatever:

const address = mod.malloc(Color._size * 5)
const fivecolors = [
  new Color({}, address),
  new Color({}, address + Color._size),
  new Color({}, address + (Color._size * 2)),
  new Color({}, address + (Color._size * 3)),
  new Color({}, address + (Color._size * 4))
]

This can help with js-libs that use wasm, as it feels very natural. I used this technique here to allow users to write raylib games in a browser, in js, that feels like a js port of the C code, like here is pong (that uses Rectangle structs.)

I may eventually add nested-structs & arrays, which should be pretty simple:

// arrays
const fivecolors = structArray(5, Color)
fivecolors[2].r = 255

// some-allocated-address, 160
console.log(fivecolors._address, fivecolors._size)

// nested structs
const ColoredSquare = structClass({
  color: Color,
  x: 'Int32',
  y: 'Int32',
  width: 'Uint32',
  height: 'Uint32'
})

which would translate to this:

typdef struct {
   Color* color;
   int x;
   int y;
   unsigned int width;
   unsigned int height;
} ColoredSquare;