← Cloudflare Workers / workers / runtime-apis / webassembly

Wasm v JavaScriptu

Wasm lze v rámci Workeru napsaného v JavaScriptu nebo TypeScriptu použít importováním modulu Wasm, a vytvořením instance tohoto modulu pomocí WebAssembly.instantiate() ↗. Lze to použít ke zrychlení výpočetně náročných operací, které nezahrnují významné I/O.

Tento průvodce ukazuje základy vzájemné spolupráce Wasm a JavaScriptu.

V tomto průvodci použijete WebAssembly Text Format k vytvoření jednoduchého modulu Wasm, abyste pochopili, jak fungují importy a exporty. V praxi byste kód v tomto formátu nepsali. Místo toho byste použili programovací jazyk podle vlastního výběru a zkompilovali jej přímo do formátu WebAssembly Binary Format (.wasm).

Prohlédněte si následující ukázkový modul (;; označuje komentář):

;; src/simple.wat
(module
  ;; Import a function from JavaScript named `imported_func`
  ;; which takes a single i32 argument and assign to
  ;; variable $i
  (func $i (import "imports" "imported_func") (param i32))
  ;; Export a function named `exported_func` which takes a
  ;; single i32 argument and returns an i32
  (func (export "exported_func") (param $input i32) (result i32)
    ;; Invoke `imported_func` with $input as argument
    local.get $input
    call $i
    ;; Return $input
    local.get $input
    return
  )
)

Použití wat2wasm ↗, převeďte formát WAT na formát WebAssembly Binary Format:

wat2wasm src/simple.wat -o src/simple.wasm

Wrangler sbalí do balíčku každý modul Wasm, který končí na .wasm nebo .wasm?module, aby bylo dostupné za běhu ve vašem Workeru. Toto se provádí pomocí výchozího pravidla pro bundling, které lze upravit v Konfigurační soubor Wrangler. Viz Bundling ve Wrangleru s dalšími informacemi.

Jakmile převedete formát WAT do formátu WebAssembly Binary Format, naimportujte a použijte modul Wasm ve svém stávajícím Workeru v JavaScriptu nebo TypeScriptu:

import mod from "./simple.wasm";

// Define imports available to Wasm instance.
const importObject = {
	imports: {
		imported_func: (arg: number) => {
			console.log(`Hello from JavaScript: ${arg}`);
		},
	},
};

// Create instance of WebAssembly Module `mod`, supplying
// the expected imports in `importObject`. This should be
// done at the top level of the script to avoid instantiation on every request.
const instance = await WebAssembly.instantiate(mod, importObject);

export default {
	async fetch() {
		// Invoke the `exported_func` from our Wasm Instance with
		// an argument.
		const retval = instance.exports.exported_func(42);
		// Return the return value!
		return new Response(`Success: ${retval}`);
	},
};

Po vyvolání by tento Worker měl zapsat do logu Hello from JavaScript: 42 a vrátí Success: 42, což ukazuje schopnost volat metody Wasm s argumenty z JavaScriptu a naopak.

V praxi budete pravděpodobně kompilovat jazyk podle svého výběru (například Rust) do binárních souborů WebAssembly. Mnoho jazyků poskytuje bindgen pro zjednodušení interakce mezi JavaScriptem a Wasm. Tyto nástroje se mohou integrovat s vaším JavaScript bundlerem a poskytovat jiné API než WebAssembly API pro inicializaci a volání vašeho modulu Wasm. Jako příklad se podívejte na Rust wasm-bindgen dokumentace ↗.

Alternativně, pokud chcete celý Worker napsat v Rustu, Workers nabízí mnoho stejných Runtime API a vazby při použití workers-rs crate. Další informace najdete v Průvodce Workers pro Rust.