WASM laden en uitvoeren in JavaScript
Leer hoe u uw gecompileerde WASM-module in een webbrowser laadt met JavaScript en de geëxporteerde functies aanroept.
WASM laden en uitvoeren in JavaScript is een gratis WebAssembly (WASM) voor performante toepassingen-les op CoddyKit. Dit is les 2 van 4. Je kunt de volledige les hieronder gratis lezen en daarna in de browser praktisch oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject WebAssembly (WASM) voor performante toepassingen. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus WebAssembly (WASM) voor performante toepassingen bevat in totaal 4 lessen.
WASM naar de browser brengen
Welkom! Je hebt geleerd hoe je C/C++-code compileert naar een .wasm-bestand. Nu is het tijd om die krachtige WebAssembly-module tot leven te brengen in je webbrowser.
In deze les leer je hoe je je .wasm-module met JavaScript laadt en de functies ervan aanroept.
De WASM-toegangspoort van de browser
Moderne webbrowsers bieden een globaal WebAssembly-object. Dit object is je belangrijkste interface voor het werken met WebAssembly-modules.
- Je kunt ermee WASM-code compileren, instantiëren en beheren.
- We gebruiken de methoden ervan om ons
.wasm-bestand op te halen en in de runtime van de browser te laden.
Gestroomlijnd WASM laden
De efficiëntste manier om een WASM-module uit een netwerkverzoek te laden is met WebAssembly.instantiateStreaming().
- De methode streamt de onbewerkte bytes rechtstreeks uit het netwerkantwoord.
- De methode compileert en instantieert de module in één keer, waardoor tijd en middelen worden bespaard.
- Deze methode verwacht een
Response-object, dat je meestal via defetch()-API krijgt.
Onze eenvoudige C-functie
Laten we aannemen dat we een heel eenvoudige C-functie hebben die twee getallen optelt, zoals deze. Deze functie wordt gecompileerd naar add.wasm (zoals behandeld in de vorige les) en vervolgens geëxporteerd vanuit de WASM-module.
Dankzij deze export kan de functie rechtstreeks vanuit JavaScript worden aangeroepen.
/* add.c */
int add(int a, int b) {
return a + b;
}Het .wasm-bestand ophalen
Voordat we onze WASM-module kunnen instantiëren, moeten we het .wasm-bestand zelf ophalen. De standaard-API fetch() is hiervoor perfect geschikt.
Deze retourneert een Promise die wordt opgelost naar een Response-object. Dat geven we vervolgens door aan 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;
}De WASM-module instantiëren
De functie WebAssembly.instantiateStreaming() neemt de Response aan en retourneert een Promise. Deze Promise wordt opgelost naar een object met twee belangrijke eigenschappen:
module: de gecompileerde WebAssembly-module zelf.instance: een object dat de actieve instantie van de module vertegenwoordigt en de exports bevat.
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;
}Geëxporteerde functies gebruiken
Zodra je het object instance hebt, kun je alle functies of globale variabelen gebruiken die vanuit je WASM-module zijn geëxporteerd. Deze zijn beschikbaar via de eigenschap exports.
Voor onze C-functie add geldt dat deze, wanneer ze naar WASM is gecompileerd en geëxporteerd, in JavaScript beschikbaar is als instance.exports.add.
Volledig voorbeeld: WASM laden en aanroepen
Hier is een volledig JavaScript-codefragment. Het haalt add.wasm op, instantieert de module en roept vervolgens de geëxporteerde functie add aan met twee getallen. Het resultaat wordt daarbij gelogd.
Deze code zou binnen een <script>-tag in een HTML-bestand worden uitgevoerd.
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();In het instance-object
Het object instance is je belangrijkste interface naar de actieve WebAssembly-module. Het bevat meer dan alleen geëxporteerde functies:
instance.exports: een object met alle functies, globale variabelen en het geheugen die door de WASM-module zijn geëxporteerd.instance.module: een verwijzing naar het gecompileerde objectWebAssembly.Module.instance.memory: als de WASM-module geheugen gebruikt, biedt dit toegang tot het lineaire geheugen ervan (eenArrayBuffer).
Korte controle: WASM laden
Je hebt gezien hoe je een WASM-module efficiënt laadt en instantieert. Welke belangrijke JavaScript-functie wordt hiervoor gebruikt bij het streamen vanuit een netwerkverzoek?
Samenvatting: WASM in de browser
Uitstekend gedaan! Je hebt geleerd hoe je je gecompileerde WebAssembly-modules in de browser tot leven brengt. Dit hebben we behandeld:
- Het globale object
WebAssemblygebruiken. - Efficiënt laden met
WebAssembly.instantiateStreaming(). - Geëxporteerde functies gebruiken via het object
instance.exports. - WASM-functies rechtstreeks vanuit JavaScript aanroepen.
Je kunt nu krachtige code rechtstreeks in je webtoepassingen uitvoeren!
Leer WebAssembly (WASM) voor performante toepassingen met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 12
- Lessen
- 48
Veelgestelde vragen
Is de les “WASM laden en uitvoeren in JavaScript” gratis?
Ja — de volledige tekst van “WASM laden en uitvoeren in JavaScript” kun je hier gratis op het web lezen. Als je interactief wilt oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is, en de rest van de cursus WebAssembly (WASM) voor performante toepassingen wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus WebAssembly (WASM) voor performante toepassingen bevat in totaal 4 lessen.
Wat leer ik in “WASM laden en uitvoeren in JavaScript”?
Leer hoe u uw gecompileerde WASM-module in een webbrowser laadt met JavaScript en de geëxporteerde functies aanroept. Je oefent met WebAssembly (WASM) voor performante toepassingen door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met WebAssembly (WASM) voor performante toepassingen te beginnen?
Ervaring vooraf is niet nodig. WebAssembly (WASM) voor performante toepassingen op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 2 van 4.
Hoe lang duurt de les “WASM laden en uitvoeren in JavaScript”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over WebAssembly (WASM) voor performante toepassingen?
Ja. Elke les over WebAssembly (WASM) voor performante toepassingen bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- C/C++ compileren naar WASM met Emscripten
- WASM laden en uitvoeren in JavaScript
- Eenvoudige gegevensuitwisseling: primitieve typen
- JavaScript-functies vanuit C/C++ aanroepen