Простой пример Rust + WASM

  1. Установить ржавчину
$ brew install rustup
$ rustup-init
  1. Установите набор инструментов по умолчанию как nightly
$ rustup default nightly
  1. Жопа wasm цель
$ rustup target add wasm32-unknown-unknown
  1. Установить wasm-gc инструмент для удаления всего ненужного экспорта, импорта, функций и т. д. из сгенерированного модуля WebAssembly.
$ cargo install wasm-gc
  1. Установить https для запуска веб-сервера, обслуживающего статические файлы из текущего каталога
$ cargo install https
  1. Создайте приложение на ржавчине и откройте его файлы с помощью вашей IDE (я использую идею)
$ cargo new --lib utils
$ cd utils
$ idea .

7. Определите тип CDI-библиотеки Rust в cargo.toml:

[package]
name = "utils"
version = "0.1.0"
authors = ["Hasan Yousef <hasan.ajsf@gmail.com>"]
edition = "2018"

[dependencies]

[lib]
crate-type =["cdylib"]
  1. Определите extern функция:
pub extern fn add_one(x: u32) -> u32 { x + 1
}

extern ключевое слово необходимо для создания интерфейса, чтобы эту функцию можно было вызывать из других языков. no-mangle аннотация, указывающая компилятору Rust не изменять имя этой функции.
2. Соберите wasm-файл:

$ cargo build --target wasm32-unknown-unknown --release
  1. Запустите wasm-gc для оптимизации файла wasm:
$ wasm-gc target/wasm32-unknown-unknown/release/utils.wasm -o utils.gc.wasm
  1. Создайте index.html файл и вызовите wasm модуль через javascript:
<html>
<head>
<script> WebAssembly.instantiateStreaming(fetch("utils.gc.wasm")) .then(wasmModule => { const result = wasmModeult.instance.exports.add_one(3); const text = document.createTextNode(result); document.body.appendChild(text); });
</script>
<head>
<body></body>
<html>

Вместо этого, используя instanceiateStreaming, мы можем передавать, компилировать и создавать экземпляр модуля WebAssembly за один раз.
5. Запустите статический файловый сервер:

$ http
  1. Откройте браузер по адресу: localhost:8000

ПРОДВИГАТЬ

Если вы хотите взаимодействовать с JavaScript функции, вам необходимо:

  1. Определите сигнатуру этих функций в файле ржавчины
  2. Определите мост/оболочку в файле javascript между этими функциями.

Итак, если вы хотите вызвать javascript alert и еще одна функция, скажем, addOne, то указанная выше main.rs а также index.html файлы будут такими, как показано ниже:

main.rs:

extern { fn addOne(x: u32); fn alert(x: u32);
} pub extern fn add_one(x: u32) { unsafe { addOne(x); alert(x); }
}

index.html

<html> <head> <script> const addOne = (number) => { const text = document.createTextNode(number + 1); document.body.appendChild(text); } const importObject = { env: { addOne: addOne, alert: alert, } }; WebAssembly.instantiateStreaming(fetch("utils.gc.wasm"), importObject) .then(wasmModule => { const result = wasmModule.instance.exports.add_one(5); }) </script> <head> <body></body>
<html>

Для использования bindgenпожалуйста, посмотрите мой другой почта

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *