Mengirimkan Struktur Data Kompleks
Pelajari strategi untuk memindahkan string, larik, dan objek khusus secara efisien antara WASM dan JavaScript.
Mengirimkan Struktur Data Kompleks adalah pelajaran WebAssembly (WASM) for High Performance Apps gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar WebAssembly (WASM) for High Performance Apps, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus WebAssembly (WASM) for High Performance Apps mencakup 4 pelajaran total.
Bagian dari pelajaran ini belum diterjemahkan dan ditampilkan dalam bahasa Inggris.
Complex Data in WASM
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.
WASM's Linear Memory
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: Pointer & Length
Strings are sequences of characters. To pass a string from WASM to JavaScript, the WASM module will:
- Write the string's bytes into its linear memory.
- 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.
C String to JS Example
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.
#include <emscripten/emscripten.h>
#include <string.h>
// A static string for demonstration
const char* myString = "Hello WASM!";
EMSCRIPTEN_KEEPALIVE
const char* getGreetingPtr() {
return myString;
}
EMSCRIPTEN_KEEPALIVE
int getGreetingLength() {
return strlen(myString);
}
int main() {
// Required for a complete C program
return 0;
}Arrays: Contiguous Data
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).
C Array to JS Example
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.
#include <emscripten/emscripten.h>
#include <stdlib.h> // For malloc
int* dynamicArray = NULL;
int currentArrayLength = 0;
EMSCRIPTEN_KEEPALIVE
int* createAndGetArray(int size) {
if (dynamicArray) {
free(dynamicArray);
}
dynamicArray = (int*)malloc(size * sizeof(int));
currentArrayLength = size;
for (int i = 0; i < size; ++i) {
dynamicArray[i] = i * 10 + 5;
}
return dynamicArray;
}
EMSCRIPTEN_KEEPALIVE
int getArrayLength() {
return currentArrayLength;
}
int main() {
// Required for a complete C program
return 0;
}Custom Objects (Structs)
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.
C Struct to JS Example
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 0age(int) at offset 4height(float) at offset 8
#include <emscripten/emscripten.h>
#include <stdlib.h> // For malloc
#include <string.h> // For strcpy
typedef struct {
int id;
int age;
float height; // assuming 4 bytes after age
char name[16]; // Fixed-size string buffer
} Person;
EMSCRIPTEN_KEEPALIVE
Person* createPerson(int id, int age, float height, const char* name) {
Person* p = (Person*)malloc(sizeof(Person));
p->id = id;
p->age = age;
p->height = height;
strncpy(p->name, name, sizeof(p->name) - 1);
p->name[sizeof(p->name) - 1] = '\0'; // Ensure null termination
return p;
}
int main() {
// Required for a complete C program
return 0;
}JS Allocates WASM Memory
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.
Quick Check
You've learned how WASM handles complex data. Let's test your understanding!
Recap: Complex Data
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!
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Mengirimkan Struktur Data Kompleks” gratis?
Ya — teks lengkap “Mengirimkan Struktur Data Kompleks” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus WebAssembly (WASM) for High Performance Apps, upgrade ke CoddyKit PRO. Kursus WebAssembly (WASM) for High Performance Apps mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Mengirimkan Struktur Data Kompleks”?
Pelajari strategi untuk memindahkan string, larik, dan objek khusus secara efisien antara WASM dan JavaScript. Kamu berlatih WebAssembly (WASM) for High Performance Apps dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai WebAssembly (WASM) for High Performance Apps?
Tidak diperlukan pengalaman sebelumnya. WebAssembly (WASM) for High Performance Apps di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.
Berapa lama pelajaran “Mengirimkan Struktur Data Kompleks” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran WebAssembly (WASM) for High Performance Apps ini?
Ya. Setiap pelajaran WebAssembly (WASM) for High Performance Apps menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Mengirimkan Struktur Data Kompleks
- Model & Pengelolaan Memori WASM
- Memori Bersama & Operasi Atomik
- Mengembangkan dan Mengelola Memori Linear