Node.js WebAssembly

What is WebAssembly?

is a binary instruction format designed as a portable compilation target for high - level languages like C, C ++, and Rust.

Key characteristics of WebAssembly include:

Binary format

Near-native performance

Platform independent

Safety

Unlike JavaScript, WebAssembly is a low - level binary format that isn't meant to be written by hand.

Node.js provides built-in support for WebAssembly through the global
WebAssembly object (just like in browsers).

console.log(WebAssembly);

Note:

Method

Description

Compiles and instantiates WebAssembly code

Validates a WebAssembly binary format

Represents a compiled WebAssembly module

Represents an instantiated WebAssembly module

Represents WebAssembly memory

// Read the WebAssembly binary file const wasmBuffer = fs.readFileSync('./simple.wasm');

WebAssembly.instantiate(wasmBuffer).then(result => {
const instance = result.instance;
// Call the exported 'add' function const sum = instance.exports.add(2, 3);
console.log('2 + 3 =', sum); // Output: 2 + 3 = 5
});

Note:

Working with Different Languages

C/C++ with Emscripten

Emscripten is a compiler toolchain for C/C ++ that outputs WebAssembly.

#include < emscripten.h >

int add(int a, int b) {
return a + b;
}

Compile to WebAssembly:

emcc add.c - s WASM = 1 - s EXPORTED_FUNCTIONS ='["_add"]' - o add.js
Rust with wasm - pack wasm - pack is a tool for building Rust - generated WebAssembly.

use wasm_bindgen::prelude::*;
#[wasm_bindgen]
pub fn add(a: i32, b: i32) -> i32 {

a + b

}

Build with wasm-pack:

wasm - pack build -- target nodejs

Advanced WebAssembly Usage

Example: Passing Arrays to WebAssembly

// JavaScript code const wasmModule = await WebAssembly.instantiate(wasmBuffer, {
env: {
memory: new WebAssembly.Memory({ initial: 1 })
}
});
// Allocate memory for an array of 10 integers (4 bytes each)
const arraySize = 10;
const ptr = wasmModule.exports.alloc(arraySize * 4);
const intArray = new Int32Array(wasmModule.exports.memory.buffer, ptr, arraySize);
// Fill array with values for (let i = 0; i < arraySize; i++) {
intArray[i] = i * 2;
}
// Call WebAssembly function to process the array const sum = wasmModule.exports.processArray(ptr, arraySize);
console.log('Sum of array:', sum);
// Don't forget to free the memory wasmModule.exports.dealloc(ptr, arraySize * 4);
Corresponding C Code (compiled to WebAssembly):

#include < stdlib.h >

int* alloc(int size) {
return (int*)malloc(size);
}
void dealloc(int* ptr, int size) {
free(ptr);
}
int processArray(int* array, int length) {
int sum = 0;
for (int i = 0; i < length; i++) {
sum += array[i];
}
return sum;
}

Example: Parallel Processing with WebAssembly

// main.js const workerCode = `
const wasmModule = await WebAssembly.instantiate(wasmBuffer, {
env: { memory: new WebAssembly.Memory({ initial: 1, shared: true }) }
});
self.onmessage = (e) => {
const { data, start, end } = e.data;
const result = wasmModule.exports.processChunk(data, start, end);
self.postMessage({ result });
};
`;
// Create worker pool const workerCount = navigator.hardwareConcurrency || 4;
const workers = Array(workerCount).fill().map(() => {
const blob = new Blob([workerCode], { type: 'application/javascript' });
return new Worker(URL.createObjectURL(blob));
});
// Process data in parallel async function processInParallel(data, chunkSize) {
const results = [];
let completed = 0;
return new Promise((resolve) => {
workers.forEach((worker, i) => {
const start = i * chunkSize;
const end = Math.min(start + chunkSize, data.length);
worker.onmessage = (e) => {
results[i] = e.data.result;
completed++;
if (completed === workerCount) {
resolve(results);
}
};
worker.postMessage({ data, start, end });
});
});
}

Using Source Maps with Emscripten

Debugging in Chrome DevTools