WebAssembly (WASM) suorituskykyisiin sovelluksiin · Oppitunti

Mukautetut JavaScript-takaisinkutsut

Suunnittele ja toteuta mukautettuja JavaScript-funktioita, joita voidaan kutsua WebAssembly-moduuliesi sisältä

Oppitunti 2/412 vaihetta

Mukautetut JavaScript-takaisinkutsut on ilmainen WebAssembly (WASM) suorituskykyisiin sovelluksiin-oppitunti CoddyKitissä. Tämä on oppitunti 2/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu WebAssembly (WASM) suorituskykyisiin sovelluksiin-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. WebAssembly (WASM) suorituskykyisiin sovelluksiin-kurssilla on yhteensä 4 oppituntia.

JavaScriptin kutsuminen WASMista

Joskus WebAssembly-moduulisi (WASM) tarvitsee viestiä ympäristön kanssa, jossa se suoritetaan eli JavaScriptin kanssa. Tällöin mukautetut JavaScript-callbackit ovat välttämättömiä!

Niiden avulla WASM-koodi voi käynnistää toimintoja tai välittää tietoja takaisin verkkosivulle, mikä tekee sovelluksista vuorovaikutteisempia.

Miksi WASM tarvitsee callbackeja

Kuvitellaan, että WASM-moduulisi suorittaa monimutkaisia laskutoimituksia tai käsittelee tietoja. Kun työ on valmis, sen täytyy usein:

Päivittää käyttöliittymä: Ilmoittaa JavaScriptille, että kaavio tai tulos on päivitettävä.
Käyttää selaimen rajapintoja: Pyytää JavaScriptiä käyttämään rajapintoja, joita WASM ei voi käyttää suoraan, kuten `localStorage`- tai `fetch`-rajapintaa.
Kirjata tietoja: Lähettää virheenkorjausviestejä tai tilapäivityksiä selaimen konsoliin.
Käsitellä tapahtumia: Reagoida käyttäjän toimintoihin tai JavaScriptin hallinnoimiin järjestelmätapahtumiin.

JavaScript tarjoaa funktion

JavaScript-puolella callbackin määrittäminen on suoraviivaista. Määrität tavallisen JavaScript-funktion, joka asetetaan WebAssembly-moduulisi käyttöön sen alustuksen aikana.

Voit ajatella tätä suorana yhteytenä, jonka avulla WASM-moduulisi voi tarvittaessa kutsua JavaScript-sovellustasi takaisin.

WASM määrittää importin

WebAssembly-puolella (esimerkiksi Rustissa tai C/C++:ssa) sinun on ilmoitettava, että moduulisi odottaa tuovansa funktion isäntäympäristöstään eli JavaScriptistä.

Rustissa käytät #[wasm_bindgen]-attribuuttia yhdessä extern "C"-lohkon kanssa.
Tässä määrityksessä ilmoitetaan funktion nimi ja sen odotettu allekirjoitus (parametrit ja palautustyyppi).
Se kertoo WASM-kääntäjälle, että JavaScript ratkaisee tämän funktiokutsun ulkoisesti.

Rust-koodi: JavaScriptin tuominen

Tarkastellaan Rust-esimerkkiä. Tuomme JavaScript-funktion nimeltä logMessageFromWasm. Kun Rust kutsuu tätä funktiota, vastaava JS-funktio suoritetaan.

/* lib.rs */
use wasm_bindgen::prelude::*;

#[wasm_bindgen]
extern "C" {
    // Imports a JS function named 'logMessageFromWasm'
    // It takes a string and returns nothing.
    #[wasm_bindgen(js_name = logMessageFromWasm)]
    fn log_message_from_wasm(s: &str);
}

#[wasm_bindgen]
pub fn call_js_log() {
    log_message_from_wasm("Hello from Rust!");
}

Callbackin suorittaminen (JS + Rust)

Edellisen kohtauksen Rust-koodi suoritetaan kääntämällä se .wasm-moduuliksi ja käyttämällä wasm-bindgen-kirjaston liimakoodia. Sen jälkeen määritämme JavaScript-callbackin ja lataamme WASMin.

Tarkista selaimen kehittäjäkonsoli suorittamisen jälkeen!

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
    <title>WASM Callback Demo</title>
</head>
<body>
    <h1>Check console for WASM message!</h1>
    <script type="module">
        // Assuming 'pkg/rust_wasm_module.js' is generated by wasm-pack
        import init, { call_js_log } from './pkg/rust_wasm_module.js';

        // Define the JavaScript function that WASM will call
        window.logMessageFromWasm = (message) => {
            console.log("JS received:", message);
        };

        async function run() {
            await init(); // Initialize the WASM module
            call_js_log(); // Call the Rust function, which calls JS
        }

        run();
    </script>
</body>
</html>

Tietojen välittäminen callbackeille

Callbackit eivät ole tarkoitettu vain yksinkertaisiin ilmoituksiin, vaan niiden avulla WebAssembly-moduuli voi välittää tietoja takaisin JavaScriptille. Tämä on olennaista tulosten palauttamisessa ja asiayhteyden välittämisessä.

Alkeistyypit: Luvut (kokonaisluvut ja liukuluvut) sekä totuusarvot välitetään suoraan.
Merkkijonot: wasm-bindgen muuntaa Rustin merkkijonot (`&str`) tehokkaasti JavaScript-merkkijonoiksi.
Monimutkaiset oliot: Monimutkaisempia tietorakenteita varten `wasm-bindgen` tarjoaa mekanismeja sujuvaan serialisointiin ja deserialisointiin.

Argumentteja käyttävä callback (Rust)

Laajennetaan Rust-esimerkkiämme välittämään luku takaisin JavaScriptille. `log_number_from_wasm`-funktio tuodaan käyttöön, ja se odottaa kokonaislukuargumenttia.

Rust-funktiomme `calculate_and_log` laskee summan ja välittää sitten tuloksen tälle JS-callbackille.

/* lib.rs */
use wasm_bindgen::prelude::*;

#[wasm_bindgen]
extern "C" {
    // Imports a JS function that takes an i32 number
    #[wasm_bindgen(js_name = logNumberFromWasm)]
    fn log_number_from_wasm(num: i32);
}

#[wasm_bindgen]
pub fn calculate_and_log(a: i32, b: i32) {
    let result = a + b;
    log_number_from_wasm(result); // Call JS with the calculated result
}

Argumentteja käyttävän callbackin suorittaminen

Tässä on edellisen Rust-esimerkin JavaScript-määritys. Huomaa, kuinka `window.logNumberFromWasm`-funktio ottaa nyt vastaan numeerisen argumentin ja tulostaa sen konsoliin.

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
    <title>WASM Callback Args Demo</title>
</head>
<body>
    <h1>Check console for calculated result!</h1>
    <script type="module">
        import init, { calculate_and_log } from './pkg/rust_wasm_module.js';

        // This JS function will receive a number from WASM
        window.logNumberFromWasm = (number) => {
            console.log("JS received result:", number);
        };

        async function run() {
            await init();
            calculate_and_log(10, 20); // Call Rust with arguments 10 and 20
        }

        run();
    </script>
</body>
</html>

Callbackien yleisiä käyttötapauksia

Mukautetut callbackit ovat erittäin monipuolisia ja mahdollistavat WASMin saumattoman integroitumisen selaimen ympäristöön. Yleisiä käyttötapauksia ovat esimerkiksi:

Käyttöliittymän päivitykset: Ilmoitetaan JS:lle elementtien päivittämisestä, kun WASM-laskenta on valmis.
Selaimen rajapintojen käyttö: Pyydetään JS:ää käyttämään `localStorage`- tai `fetch`-rajapintaa tai käsittelemään DOMia suoraan.
Tapahtumien käsittely: Annetaan WASMin reagoida käyttäjän syötteeseen tai JS:n käsittelemiin selaimen tapahtumiin.
Kirjaaminen ja virheenkorjaus: Lähetetään WASMista yksityiskohtaisia viestejä selaimen konsoliin seurantaa varten.

Callbackien pikatarkistus

Tuotujen funktioiden määrittämisen ja käyttämisen ymmärtäminen on keskeistä tehokkaassa WASM–JS-viestinnässä.

Vastaa interaktiivisessa oppitunnissa

Kertaus: mukautetut JS-callbackit

Olet oppinut, kuinka WebAssembly-moduulit voivat kutsua JavaScriptiä takaisin!

WASM-moduulit voivat tuoda JavaScript-funktioita ja kutsua niitä.
wasm-bindgen yksinkertaistaa tätä prosessia Rustissa ja mahdollistaa tyyppiturvallisen tietojenvaihdon.
Callbackit ovat välttämättömiä käyttöliittymän päivittämisessä, selaimen rajapintojen käytössä ja WASMista kirjaamisessa.

Tämä tehokas malli tekee WASM-sovelluksista dynaamisempia ja tiiviimmin verkkoympäristöön integroituneita. Jatka kokeilua!

Aloita maksutta

Opi WebAssembly (WASM) suorituskykyisiin sovelluksiin tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 12
Oppitunnit: 48

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Mukautetut JavaScript-takaisinkutsut” ilmainen?

Kyllä – oppitunnin ”Mukautetut JavaScript-takaisinkutsut” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko WebAssembly (WASM) suorituskykyisiin sovelluksiin-kurssin, päivitä CoddyKit PROhon. WebAssembly (WASM) suorituskykyisiin sovelluksiin-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Mukautetut JavaScript-takaisinkutsut”?

Suunnittele ja toteuta mukautettuja JavaScript-funktioita, joita voidaan kutsua WebAssembly-moduuliesi sisältä Harjoittelet WebAssembly (WASM) suorituskykyisiin sovelluksiin-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni WebAssembly (WASM) suorituskykyisiin sovelluksiin-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin WebAssembly (WASM) suorituskykyisiin sovelluksiin-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 2/4.

Kuinka kauan ”Mukautetut JavaScript-takaisinkutsut”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä WebAssembly (WASM) suorituskykyisiin sovelluksiin-oppitunnilla?

Kyllä. Jokainen WebAssembly (WASM) suorituskykyisiin sovelluksiin-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

Asynkroniset operaatiot WASMilla
Mukautetut JavaScript-takaisinkutsut
Virheiden ja poikkeusten käsittely
Muistin ja tyypitettyjen taulukoiden jakaminen JS/WASM-rajan yli

← Takaisin: WebAssembly (WASM) suorituskykyisiin sovelluksiin