Callback JavaScript personalizzate
Progetti e implementi funzioni JavaScript personalizzate richiamabili dall'interno dei moduli WebAssembly.
Callback JavaScript personalizzate è una lezione WebAssembly (WASM) for High Performance Apps gratuita su CoddyKit. Questa è la lezione 2 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento WebAssembly (WASM) for High Performance Apps, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso WebAssembly (WASM) for High Performance Apps include 4 lezioni in totale.
Parti di questa lezione non sono ancora state tradotte e vengono mostrate in inglese.
Calling JavaScript from WASM
Sometimes, your WebAssembly (WASM) module needs to communicate back to the JavaScript environment it's running in. This is where custom JavaScript callbacks become essential!
They allow your WASM code to trigger actions or pass data back to your web page, making your applications more interactive.
Why WASM Needs Callbacks
Imagine your WASM module performs complex calculations or processes data. Once it's done, it often needs to:
- Update the UI: Notify JavaScript to refresh a chart or display a result.
- Access Browser APIs: Request JavaScript to use APIs WASM can't directly access, like `localStorage` or `fetch`.
- Log Information: Send debugging messages or status updates to the browser console.
- Handle Events: Respond to user interactions or system events managed by JavaScript.
JavaScript Provides the Function
From the JavaScript side, setting up a callback is straightforward. You simply define a regular JavaScript function. This function will then be made available to your WebAssembly module during its initialization.
Think of it as giving your WASM module a direct line to call back into your JavaScript application when needed.
WASM Declares the Import
On the WebAssembly side (e.g., in Rust or C/C++), you need to declare that your module expects to import a function from its host environment (JavaScript).
- In Rust, you use the
#[wasm_bindgen]attribute with anextern "C"block. - This declaration specifies the function's name and its expected signature (parameters and return type).
- It tells the WASM compiler that this function call will be resolved externally by JavaScript.
Rust Code: Importing JavaScript
Let's look at a Rust example. We'll import a JavaScript function named logMessageFromWasm. When Rust calls this, the corresponding JS function will execute.
/* 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!");
}Running the Callback (JS + Rust)
To run the Rust code from the previous scene, we compile it to a .wasm module and use wasm-bindgen's glue code. Then, we define our JavaScript callback and load the WASM.
Check your browser's developer console after running!
<!-- 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>Passing Data to Callbacks
Callbacks are not just for simple notifications; they can also pass data from your WebAssembly module back to JavaScript. This is crucial for returning results or providing context.
- Primitive Types: Numbers (integers, floats) and booleans are passed directly.
- Strings: With
wasm-bindgen, Rust strings (`&str`) are efficiently converted to JavaScript strings. - Complex Objects: For more intricate data structures, `wasm-bindgen` provides mechanisms for seamless serialization and deserialization.
Callback with Arguments (Rust)
Let's enhance our Rust example to pass a number back to JavaScript. The `log_number_from_wasm` function is imported, expecting an integer argument.
Our Rust function `calculate_and_log` will perform a sum and then pass the result to this JS callback.
/* 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
}Running Callback with Arguments
Here's the JavaScript setup for the previous Rust example. Notice how the `window.logNumberFromWasm` function now accepts a numeric argument, which it then prints to the console.
<!-- 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>Common Callback Scenarios
Custom callbacks are incredibly versatile and enable WASM to integrate smoothly with the browser's environment. Some common use cases include:
- User Interface Updates: Notifying JS to update elements after a WASM computation is complete.
- Browser API Access: Requesting JS to use `localStorage`, `fetch`, or directly manipulate the DOM.
- Event Handling: Allowing WASM to react to user input or browser events processed by JS.
- Logging and Debugging: Sending detailed messages to the browser console from within WASM for monitoring.
Quick Check on Callbacks
Understanding how to declare and use imported functions is key to effective WASM-JS communication.
Recap: Custom JS Callbacks
You've learned how to enable your WebAssembly modules to call back into JavaScript!
- WASM modules can import and call JavaScript functions.
wasm-bindgensimplifies this process in Rust, allowing type-safe data exchange.- Callbacks are crucial for UI updates, accessing browser APIs, and logging from WASM.
This powerful pattern makes WASM applications more dynamic and integrated with the web environment. Keep experimenting!
Domande Frequenti
La lezione «Callback JavaScript personalizzate» è gratuita?
Sì — il testo completo di «Callback JavaScript personalizzate» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso WebAssembly (WASM) for High Performance Apps, passa a CoddyKit PRO. Il corso WebAssembly (WASM) for High Performance Apps include 4 lezioni in totale.
Cosa imparerò in «Callback JavaScript personalizzate»?
Progetti e implementi funzioni JavaScript personalizzate richiamabili dall'interno dei moduli WebAssembly. Eserciti WebAssembly (WASM) for High Performance Apps con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare WebAssembly (WASM) for High Performance Apps?
Non è richiesta alcuna esperienza precedente. WebAssembly (WASM) for High Performance Apps su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 4.
Quanto tempo richiede la lezione «Callback JavaScript personalizzate»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione WebAssembly (WASM) for High Performance Apps?
Sì. Ogni lezione WebAssembly (WASM) for High Performance Apps include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Operazioni asincrone con WASM
- Callback JavaScript personalizzate
- Gestione degli errori e delle eccezioni
- Condivisione della memoria e degli array tipizzati tra i confini JS/WASM