Memuat & Menjalankan WASM dalam JavaScript
Pelajari cara memuat modul WASM yang telah dikompilasi di peramban web menggunakan JavaScript dan memanggil fungsi yang diekspornya.
Memuat & Menjalankan WASM dalam JavaScript adalah pelajaran WebAssembly (WASM) for High Performance Apps gratis di CoddyKit. Ini adalah pelajaran 2 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.
Getting WASM into the Browser
Welcome! You've learned how to compile C/C++ code into a .wasm file. Now, it's time to bring that powerful WebAssembly module to life in your web browser.
This lesson will guide you through loading your .wasm module using JavaScript and invoking its functions.
Browser's WASM Gateway
Modern web browsers provide a global WebAssembly object. This object is your primary interface for interacting with WebAssembly modules.
- It allows you to compile, instantiate, and manage WASM code.
- We'll use its methods to fetch and load our
.wasmfile into the browser's runtime.
Streamlined WASM Loading
The most efficient way to load a WASM module from a network request is using WebAssembly.instantiateStreaming().
- It directly streams the raw bytes from the network response.
- It compiles and instantiates the module in one go, saving time and resources.
- This method expects a
Responseobject, typically obtained from thefetch()API.
Our Simple C Function
Let's assume we have a very basic C function that adds two numbers, like this one. This function will be compiled into add.wasm (as covered in the previous lesson) and then exported from the WASM module.
This export makes it callable directly from JavaScript.
/* add.c */
int add(int a, int b) {
return a + b;
}Fetching the .wasm File
Before we can instantiate our WASM module, we need to fetch the .wasm file itself. The standard fetch() API is perfect for this task.
It returns a Promise that resolves to a Response object, which we'll then pass to instantiateStreaming().
async function fetchWasmModule() {
const response = await fetch('add.wasm');
// Check if the request was successful
if (!response.ok) {
throw new Error(`HTTP error! Status: ${response.status}`);
}
return response;
}Instantiating the WASM Module
The WebAssembly.instantiateStreaming() function takes the Response and returns a Promise. This Promise resolves to an object containing two important properties:
module: The compiled WebAssembly module itself.instance: An object representing the running instance of the module, which holds its exports.
async function loadAndInstantiate() {
const response = await fetch('add.wasm');
const wasmObject = await WebAssembly.instantiateStreaming(response);
console.log(wasmObject); // Shows { module: WebAssembly.Module, instance: WebAssembly.Instance }
return wasmObject.instance;
}Accessing Exported Functions
Once you have the instance object, you can access any functions or global variables that were exported from your WASM module. These are available through its exports property.
For our C add function, when compiled to WASM and exported, it will be accessible in JavaScript as instance.exports.add.
Full Example: Load & Call WASM
Here's a complete JavaScript code snippet. It fetches add.wasm, instantiates it, and then calls the exported add function with two numbers, logging the result.
This code would run inside a <script> tag in an HTML file.
async function runWasmAdder() {
try {
const response = await fetch('add.wasm');
if (!response.ok) {
throw new Error(`HTTP error! Status: ${response.status}`);
}
const { instance } = await WebAssembly.instantiateStreaming(response);
// Call the exported 'add' function
const num1 = 15;
const num2 = 25;
const sum = instance.exports.add(num1, num2);
console.log(`${num1} + ${num2} = ${sum}`);
// Expected output: "15 + 25 = 40"
} catch (error) {
console.error("Error loading or running WASM:", error);
}
}
runWasmAdder();Inside the Instance Object
The instance object is your primary interface to the running WebAssembly module. It contains more than just exported functions:
instance.exports: An object holding all functions, globals, and memory exported by the WASM module.instance.module: A reference to the compiledWebAssembly.Moduleobject.instance.memory: If the WASM module uses memory, this provides access to its linear memory (anArrayBuffer).
Quick Check: WASM Loading
You've seen how to efficiently load and instantiate a WASM module. What is the key JavaScript function used for this purpose when streaming from a network request?
Recap: WASM in the Browser
Fantastic work! You've successfully learned how to bring your compiled WebAssembly modules to life in the browser. Here's what we covered:
- Using the global
WebAssemblyobject. - Efficiently loading with
WebAssembly.instantiateStreaming(). - Accessing exported functions via the
instance.exportsobject. - Calling WASM functions directly from JavaScript.
Now you can execute high-performance code right in your web applications!
Belajar WebAssembly (WASM) for High Performance Apps dengan tutor AI — gratis
Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.
- Kursus
- 12
- Pelajaran
- 48
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Memuat & Menjalankan WASM dalam JavaScript” gratis?
Ya — teks lengkap “Memuat & Menjalankan WASM dalam JavaScript” 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 “Memuat & Menjalankan WASM dalam JavaScript”?
Pelajari cara memuat modul WASM yang telah dikompilasi di peramban web menggunakan JavaScript dan memanggil fungsi yang diekspornya. 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 2 dari 4.
Berapa lama pelajaran “Memuat & Menjalankan WASM dalam JavaScript” 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
- Mengompilasi C/C++ ke WASM dengan Emscripten
- Memuat & Menjalankan WASM dalam JavaScript
- Pertukaran Data Dasar: Primitif
- Memanggil Fungsi JavaScript dari C/C++