Utilizing C in WebAssembly to return string values

Question

Utilizing C in WebAssembly to return string values

Is it possible to retrieve a JavaScript string from a WebAssembly function?

https://dev.to/azure/passing-strings-from-c-to-javascript-in-web-assembly-1p01 - not functional

C

#include <stdio.h>
#include <string.h>

void jsPrintString(const char *s, uint16_t len);

void print() {
  const char* str = "Hello from C++!";
  jsPrintString(str, strlen(str));
}

Compiler:

emcc -Os start.c  -s STANDALONE_WASM -s EXPORTED_FUNCTIONS="['_hello']" -s ERROR_ON_UNDEFINED_SYMBOLS=0 -Wl,--no-entry -o "test.wasm"

Javascript:

const memory = new WebAssembly.Memory({ initial: 1 });

    function handlePrintString (offset, length) {
      console.log(offset, length);
      const bytes = new Uint8Array(memory.buffer, offset, length);
      const string = new TextDecoder('utf8').decode(bytes);
      console.log(string); //empty ???????????????????????????????????
    }

    const importObject = {
      env: {
        jsPrintString: handlePrintString,
        memory: memory
      },

      js: { mem: memory }
    };

    WebAssembly.instantiateStreaming(fetch('/js/test.wasm'), importObject)
      .then(obj => {
        console.log(obj.instance.exports);
        console.log(obj.instance.exports.print());
      });

memory ArrayBuffer [0,0,0,0,0,0,0,0,0,0,0.....] ???

javascript c webassembly

Answer 1

Answer №1

Is it possible to retrieve a JavaScript string from within a WebAssembly function?

No, this is not directly possible. The approach involves copying the string to memory that is shared with JavaScript.

void hello(char *array) {
    const my_string = "Hello from C++!";
    memcpy(array, my_string, strlen(my_string));
}

  (async () => {
    const response = await fetch('/js/test.wasm');
    const bytes = await response.arrayBuffer();
    const results = await WebAssembly.instantiate(bytes, {});
    const { instance: { exports: { memory, hello } }} = results;
    const array = new Uint8Array(memory.buffer, 0, 15);
    hello(array.byteOffset);
    console.log(new TextDecoder('utf8').decode(array)); // Hello from C++!
  })();

Answer 2

Is it possible to retrieve a JavaScript string from within a WebAssembly function?

No, this is not directly possible. The approach involves copying the string to memory that is shared with JavaScript.

void hello(char *array) {
    const my_string = "Hello from C++!";
    memcpy(array, my_string, strlen(my_string));
}

  (async () => {
    const response = await fetch('/js/test.wasm');
    const bytes = await response.arrayBuffer();
    const results = await WebAssembly.instantiate(bytes, {});
    const { instance: { exports: { memory, hello } }} = results;
    const array = new Uint8Array(memory.buffer, 0, 15);
    hello(array.byteOffset);
    console.log(new TextDecoder('utf8').decode(array)); // Hello from C++!
  })();

Answer 3

Answer №2

You're on the right track with your code, it's definitely possible to achieve what you're suggesting. Contrary to the top comment, you don't need to explicitly copy to shared memory. You can find a more detailed explanation in this blog post here.

Sample C code:

const char* getString() {
  return "Hello World!";
}

To compile, use:

clang --target=wasm32 -nostdlib -Wl,--no-entry -Wl,--export-all -o main.wasm main.c

And for JS code:

var importObject = { imports: { imported_func: arg => console.log(arg) } };

WebAssembly.instantiateStreaming(fetch('main.wasm'), importObject)
.then(obj => {

  var charArray = new Int8Array(
    obj.instance.exports.memory.buffer, // Accessing WASM memory
    obj.instance.exports.getString(), // Pointer to char
    12                                 // Length of string
  );

  // Convert ASCII code to char
  let string = String.fromCharCode.apply(null, charArray) 
  console.log(string);
});

Answer 4

You're on the right track with your code, it's definitely possible to achieve what you're suggesting. Contrary to the top comment, you don't need to explicitly copy to shared memory. You can find a more detailed explanation in this blog post here.

Sample C code:

const char* getString() {
  return "Hello World!";
}

To compile, use:

clang --target=wasm32 -nostdlib -Wl,--no-entry -Wl,--export-all -o main.wasm main.c

And for JS code:

var importObject = { imports: { imported_func: arg => console.log(arg) } };

WebAssembly.instantiateStreaming(fetch('main.wasm'), importObject)
.then(obj => {

  var charArray = new Int8Array(
    obj.instance.exports.memory.buffer, // Accessing WASM memory
    obj.instance.exports.getString(), // Pointer to char
    12                                 // Length of string
  );

  // Convert ASCII code to char
  let string = String.fromCharCode.apply(null, charArray) 
  console.log(string);
});

Answer 5

Answer №3

The most effective answer comes from Iron Toad as it directly addresses the original question. I am puzzled as to why no one has upvoted it yet.

In this scenario, transitioning to Typescript would be more efficient by replacing

String.fromCharCode.apply(null, charArray)

with

TextDecoder('utf8').decode(charArray)

to avoid any type warnings from the ts compiler.

Answer 6

The most effective answer comes from Iron Toad as it directly addresses the original question. I am puzzled as to why no one has upvoted it yet.

In this scenario, transitioning to Typescript would be more efficient by replacing

String.fromCharCode.apply(null, charArray)

with

TextDecoder('utf8').decode(charArray)

to avoid any type warnings from the ts compiler.

Utilizing C in WebAssembly to return string values

Answer №1

Answer №2

Answer №3

Similar questions

Adding markers to a Leaflet map using coordinates retrieved from a Supabase database - a step-by-step guide

Error in AngularJS ng-repeat syntax

Ways to populate a dropdown menu by choosing a value from a different dropdown menu

Is it possible to append an "index" to a database field using Express, Loopback, or NodeJS?

Problem with locating elements using Selenium xpath

Issue with npm during installation of REACT - not functioning as expected

Using ExpressJS to generate a page with inputs

generating a dynamic string array containing particular elements

VS code is showing the directory listing instead of serving the HTML file

In a JavaScript project, encountering an error when using FB.logout that states "The expression is undefined and not a function."

Differences in outcomes have been observed between the elementLocated and findElements functions

Is it possible to perform a legitimate POST request using AJAX XMLHttpRequest, rather than the traditional var=val URL type post?

Comparing throwing exceptions in Node.js and Gevent

jQuery function to automatically close any other opened divs when a new div is opened

Executing a search and replace function using a delay within a foreach loop - the ultimate guide

Exploring Wi-Fi functionalities with Android NDK

What is the best way to test a React component that includes a Router, Redux, and two Higher Order Components using Jest and Enzyme?

Make the child div images disappear gradually and at the same time, make an overlapping parent div image appear using Javascript

Leverage variables in JavaScript to establish a unique style

Trouble with controlling the speed of ajax requests while using vue-multiselect and lodash