3

How can I use a C++ library after converting it to wasm inside a Node or Vue project? If I understand the concept, wasm can convert native code from C/C++ to Javascript. This means a C++ library can be easily ported and used in an ES6 Javascript file using require() or import, right?

Asker
  • 1,299
  • 2
  • 14
  • 31
newbiedev
  • 2,607
  • 3
  • 17
  • 65
  • 1
    c++ TO js often uses emscriptem . you could read up on it. https://emscripten.org/docs/compiling/Building-Projects.html and then go to git to find a project built w emscriptem https://stackoverflow.com/questions/20548629/how-can-i-use-opus-codec-from-javascript – Robert Rowntree Jan 03 '21 at 03:41
  • I've installed emscripten and tried to compile an hello world file. It will output a wasm file and a js one. I'm looking on github for some library to test with – newbiedev Jan 03 '21 at 10:54
  • re git projs : https://github.com/chris-rudmin/opus-recorder scroll it to bottom & "building from sources" this walks thru somewhat getting started with emscriptem js proj but it will take significant time to master emscriptem details – Robert Rowntree Jan 03 '21 at 14:52

2 Answers2

4

you cannot import but if you get the byte format of .wasm file, you can use it inside any javascript file. I will show 2 ways that you can handle:

  • Place the wasm file in public folder and fetch it:

    async function getByte() {

    try {
      const res = await fetch("test.wasm");
      // bytes from memory
      const buffer = await res.arrayBuffer();
      // this will create an object
      const wasm = await WebAssembly.instantiate(buffer);
      console.log(wasm);
      // addTwo function is exported in wasm code, otherwise I would not be able to use it. 
      const addNumbers = wasm.instance.exports.addTwo;
      // console.log(addNumbers);
      const result = addNumbers(10, 50);
      console.log(result);
    } catch (e) {
      console.log(e);
    }
  }

  • In linux, xxd command creates a hex dump of a given file or standard input. For example xxd -g1 test.wasm will create the hex format of the wasm.

enter image description here

Now you can use them in javascript file like this:

async function byteCode() {
        const byteArray = new Int8Array([
          0x00, 0x61, 0x73, 0x6d, 0x01, 0x00, 0x00, 0x00, 0x01, 0x07, 0x01,
          0x60, 0x02, 0x7f, 0x7f, 0x01, 0x7f, 0x03, 0x02, 0x01, 0x00, 0x07,
          0x07, 0x01, 0x03, 0x73, 0x75, 0x6d, 0x00, 0x00, 0x0a, 0x09, 0x01,
          0x07, 0x00, 0x20, 0x00, 0x20, 0x01, 0x6a, 0x0b, 0x00, 0x18, 0x04,
          0x6e, 0x61, 0x6d, 0x65, 0x01, 0x06, 0x01, 0x00, 0x03, 0x73, 0x75,
          0x6d, 0x02, 0x09, 0x01, 0x00, 0x02, 0x00, 0x01, 0x61, 0x01, 0x01,
          0x62,
        ]);
        // WebAssembly is globally available
        // this will create a javascript object
        const wasm = await WebAssembly.instantiate(byteArray.buffer);
        // you need to know methods in original code
        // in test.wasm I wrote a function and exported as "sum"
        const addNumbers = wasm.instance.exports.sum;
        const result = addNumbers(10, 50);
        console.log(result);
      }
Yilmaz
  • 35,338
  • 10
  • 157
  • 202
0

Explanation

It doesn't work like that. Wasm is a bytecode that runs on a stack virtual machine. It has its own text format (wat) wich you can write on a text/code editor. After that you compile it using wabt (WebAssembly Binary Tools, search wabt git or wabt npm on google). It is not recomended to write it in its own text format, since it is too difficuilt. The c++ code is a higher level interface for writing WebAssembly. You can also compile typescript into webassembly (search for assemblyscript). Check online about "loading webassembly modules", or "understanding webassembly" for better explanation

faBri_CI-o
  • 53
  • 1
  • 6