การส่งโครงสร้างข้อมูลซับซ้อน

When building high-performance applications with WebAssembly (WASM), you often need to exchange more than just simple numbers between your WASM module and JavaScript.

• How do you pass a string?
• What about an array of numbers?
• Or even a custom object structure?

This lesson explores strategies for efficiently handling these complex data types.

The key to passing complex data lies in understanding WASM's linear memory. This is a contiguous block of memory (like a large array of bytes) that is shared between your WASM module and the JavaScript environment.

WASM functions can only return numbers. So, instead of passing the entire data, we pass a pointer (a memory address, which is just a number!) to where the data resides in this shared memory.

Strings are sequences of characters. To pass a string from WASM to JavaScript, the WASM module will:

1. Write the string's bytes into its linear memory.
2. Return two pieces of information to JavaScript:
   • The starting memory address (pointer) of the string.
   • The length of the string (how many bytes it occupies).

JavaScript then uses these to read the bytes from the shared memory and decode them into a JavaScript string.

Here's a C function that returns a pointer to a string. When compiled with Emscripten, JavaScript can call this function and then read the string from the WASM memory.

EMSCRIPTEN_KEEPALIVE makes the function callable from JavaScript.

Numeric arrays (like int[] or float[]) are similar to strings. They are stored as a contiguous block of values in WASM's linear memory.

To pass an array, WASM returns:

• A pointer to the first element of the array.
• The number of elements in the array.

JavaScript then reads the raw bytes from the shared memory, knowing the type and size of each element (e.g., 4 bytes for an integer).

This C code creates an array, populates it, and provides functions to get its pointer and length. JavaScript would then use Module.HEAP32 (for 32-bit integers) to access the elements.

Passing custom objects (like structs in C/C++) is more involved. These objects are collections of different data types (e.g., an integer, a float, and a string).

The strategy is to manually lay out the object's fields in WASM's linear memory. WASM then returns a pointer to the start of this memory block. JavaScript must then know the exact memory layout (offsets and types of each field) to correctly read the data.

This C example defines a Person struct and a function to create one. JavaScript would receive a pointer and then read values from specific offsets in the WASM memory buffer, knowing the struct's layout.

• id (int) at offset 0
• age (int) at offset 4
• height (float) at offset 8

What if JavaScript needs to pass complex data *into* WASM? For example, a large image array for WASM to process.

JavaScript can call WASM's exposed memory allocation functions (like Emscripten's _malloc) to reserve space within WASM's linear memory. Then, JavaScript writes the data into that allocated space and passes the pointer to a WASM function for processing.

You've learned how WASM handles complex data. Let's test your understanding!

Congratulations! You've learned the fundamental techniques for passing complex data between WebAssembly and JavaScript.

• WASM and JavaScript communicate via a shared linear memory.
• Complex data (strings, arrays, structs) are passed by their pointer (memory address) and often their length or size.
• JavaScript then reads the raw bytes from the shared memory, interpreting them based on the known data structure.
• For custom objects, understanding the exact memory layout is crucial.

These techniques allow for efficient, high-performance data exchange!