WebAssembly (WASM) for applikasjoner med høy ytelse · leksjon

Laste inn og kjøre WASM i JavaScript

Lær hvordan du laster inn den kompilerte WASM-modulen i en nettleser med JavaScript, og kaller de eksporterte funksjonene.

Leksjon 2 av 411 trinn

Laste inn og kjøre WASM i JavaScript er en gratis leksjon i WebAssembly (WASM) for applikasjoner med høy ytelse på CoddyKit. Dette er leksjon 2 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i WebAssembly (WASM) for applikasjoner med høy ytelse, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i WebAssembly (WASM) for applikasjoner med høy ytelse inneholder totalt 4 leksjoner.

Få WASM inn i nettleseren

Velkommen! De har lært å kompilere C/C++-kode til en .wasm-fil. Nå er det på tide å ta den kraftige WebAssembly-modulen i bruk i nettleseren.

Denne leksjonen veileder Dem gjennom hvordan De laster inn .wasm-modulen ved hjelp av JavaScript og kaller funksjonene i den.

Nettleserens WASM-port

Moderne nettlesere tilbyr et globalt WebAssembly-objekt. Dette objektet er hovedgrensesnittet Deres for samhandling med WebAssembly-moduler.

Det lar Dem kompilere, instansiere og administrere WASM-kode.
Vi bruker metodene til å hente og laste inn .wasm-filen i nettleserens kjøremiljø.

Effektiv innlasting av WASM

Den mest effektive måten å laste inn en WASM-modul fra en nettverksforespørsel på er å bruke WebAssembly.instantiateStreaming().

Den strømmer råbyte direkte fra nettverkssvaret.
Den kompilerer og instansierer modulen i én operasjon, noe som sparer tid og ressurser.
Metoden forventer et Response-objekt, som vanligvis hentes fra fetch()-API-et.

Den enkle C-funksjonen vår

La oss anta at vi har en svært enkel C-funksjon som legger sammen to tall, slik som denne. Denne funksjonen blir kompilert til add.wasm (som omtalt i forrige leksjon) og deretter eksportert fra WASM-modulen.

Denne eksporteringen gjør at funksjonen kan kalles direkte fra JavaScript.

/* add.c */
int add(int a, int b) {
    return a + b;
}

Hente .wasm-filen

Før vi kan instansiere WASM-modulen, må vi hente selve .wasm-filen. Det standardiserte fetch()-API-et passer perfekt til denne oppgaven.

Det returnerer en Promise som løses til et Response-objekt, som vi deretter sender videre til 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;
}

Instansiere WASM-modulen

Funksjonen WebAssembly.instantiateStreaming() tar imot Response og returnerer en Promise. Denne Promise-en løses til et objekt som inneholder to viktige egenskaper:

module: Selve den kompilerte WebAssembly-modulen.
instance: Et objekt som representerer den kjørende instansen av modulen, og som inneholder modulens eksporter.

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;
}

Få tilgang til eksporterte funksjoner

Når du har instance-objektet, kan du få tilgang til alle funksjoner eller globale variabler som ble eksportert fra WASM-modulen. De er tilgjengelige via egenskapen exports.

For C-funksjonen add vår vil den, når den er kompilert til WASM og eksportert, være tilgjengelig i JavaScript som instance.exports.add.

Fullstendig eksempel: Last inn og kall WASM

Her er et komplett JavaScript-kodeeksempel. Det henter add.wasm, instansierer modulen og kaller deretter den eksporterte add-funksjonen med to tall, før resultatet logges.

Denne koden kjøres inne i en <script>-tagg i en HTML-fil.

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();

Inne i instance-objektet

instance-objektet er hovedgrensesnittet ditt mot den kjørende WebAssembly-modulen. Det inneholder mer enn bare eksporterte funksjoner:

instance.exports: Et objekt som inneholder alle funksjoner, globale variabler og alt minne som eksporteres av WASM-modulen.
instance.module: En referanse til det kompilerte WebAssembly.Module-objektet.
instance.memory: Hvis WASM-modulen bruker minne, gir dette tilgang til det lineære minnet (en ArrayBuffer).

Kort kontroll: Laste inn WASM

Du har sett hvordan en WASM-modul lastes inn og instansieres på en effektiv måte. Hvilken JavaScript-funksjon brukes hovedsakelig til dette når modulen strømmes fra en nettverksforespørsel?

Besvar den i den interaktive leksjonen

Oppsummering: WASM i nettleseren

Utmerket arbeid! Du har lært hvordan du kan ta kompilerte WebAssembly-moduler i bruk i nettleseren. Dette gikk vi gjennom:

Bruk av det globale WebAssembly-objektet.
Effektiv lasting med WebAssembly.instantiateStreaming().
Tilgang til eksporterte funksjoner via instance.exports-objektet.
Kalling av WASM-funksjoner direkte fra JavaScript.

Nå kan du kjøre kode med høy ytelse direkte i webapplikasjonene dine!

Gratis å komme i gang

Lær deg WebAssembly (WASM) for applikasjoner med høy ytelse med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 12
Leksjoner: 48

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Laste inn og kjøre WASM i JavaScript» gratis?

Ja – hele teksten i «Laste inn og kjøre WASM i JavaScript» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av WebAssembly (WASM) for applikasjoner med høy ytelse-kurset, kan du oppgradere til CoddyKit PRO. Kurset i WebAssembly (WASM) for applikasjoner med høy ytelse inneholder totalt 4 leksjoner.

Hva lærer jeg i «Laste inn og kjøre WASM i JavaScript»?

Lær hvordan du laster inn den kompilerte WASM-modulen i en nettleser med JavaScript, og kaller de eksporterte funksjonene. Du øver på WebAssembly (WASM) for applikasjoner med høy ytelse med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med WebAssembly (WASM) for applikasjoner med høy ytelse?

Ingen tidligere erfaring er nødvendig. WebAssembly (WASM) for applikasjoner med høy ytelse på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 2 av 4.

Hvor lang tid tar leksjonen «Laste inn og kjøre WASM i JavaScript»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne WebAssembly (WASM) for applikasjoner med høy ytelse-leksjonen?

Ja. Alle WebAssembly (WASM) for applikasjoner med høy ytelse-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

Kompilering av C/C++ til WASM med Emscripten
Laste inn og kjøre WASM i JavaScript
Grunnleggende datautveksling: primitive datatyper
Kalle JavaScript-funksjoner fra C/C++

← Tilbake til WebAssembly (WASM) for applikasjoner med høy ytelse