Здравствуйте, народ! Эта статья является продолжением моей предыдущей работы по введению в WebAssembly. Если вы новичок в этой области, я настоятельно рекомендую сначала прочитать эту статью, чтобы получить общее представление о задействованных концепциях. Как только вы это сделаете, вернитесь сюда, чтобы испытать новую магию 🪄.

Теперь, когда мы хорошо понимаем, что такое WebAssembly и его важность, давайте углубимся в технические аспекты его использования, в частности, как запустить файл wasm.

Цель этой статьи — продемонстрировать, как запустить файл веб-сборки в веб-браузере, а также представить среду выполнения под названием WasmEdge, которая одна из самых быстрых сред выполнения WebAssembly, предоставляющая огромный набор функций, выходящих за рамки простой веб-разработки. Для начала мы напишем простую программу на rust, чтобы добавить два числа, предоставленные пользователем, скомпилировать ее в wasm и запустить файл wasm. (Вам не нужно быть экспертом в Rust, чтобы понять эту статью)

Причина использования Rust для кодирования

В сфере WebAssembly всегда утверждалось, что комбинация Rust и WebAssembly является мощным инструментом. В первую очередь это связано с тем, что он позволяет разработчикам создавать высокопроизводительные веб-приложения, обладающие гарантиями безопасности и надежности Rust, а также скоростью и эффективностью WebAssembly😮.

Например, веб-приложение может использовать Rust и WebAssembly для рендеринга 3D-объектов или задач машинного обучения, полагаясь при этом на JavaScript для управления пользовательским вводом и обновления пользовательского интерфейса. В результате приложение может предложить быстрое и отзывчивое взаимодействие с пользователем, а также воспользоваться преимуществами производительности Rust и WebAssembly.

Если вам еще предстоит оценить этот динамичный дуэт, я предлагаю взглянуть на эту информативную страницу с официального сайта Rust, в которой подробно рассказывается о преимуществах использования Rust и WebAssembly.

Раздел кода

Для всех новичков, которые на самом деле не знакомы с Rust, не беспокойтесь! Я проведу вас через написание вашей первой программы на Rust.

  1. Установите языковые инструменты Rust. Для начала вам следует установить языковые инструменты Rust. В настоящее время я использую систему Windows (🤫), и я следовал официальной документации веб-сайта Rust для установки.
  2. Затем установите цепочку инструментов Wasm с помощью следующей команды. Это позволяет компилировать программу Rust в WebAssembly.

rustup target add wasm32-unknown-unknown

3. Создайте проект Rust, выполнив команду:

cargo new hello — lib

//folder structure for a Rust project
▾ src/           # directory containing source files
  lib.rs         # the main entry point for libraries and packages
  main.rs        # the main entry point for projects producing executables

4. Обновите файл cargo.toml.

Файл Cargo.toml — это файл манифеста, который используется для указания зависимостей проекта и других метаданных.

Добавьте в файл следующие строки:

[lib]
crate-type = [“cdylib”]

Раздел [lib] в файле Cargo.toml используется для настройки того, как контейнер компилируется в динамическую библиотеку. В Rust крейт — это единица компиляции, которая объединяет связанные модули, структуры, функции и другие элементы. Поле crate-type определяет тип выходного файла, который должен быть сгенерирован при сборке контейнера. Когда crate-type установлено на ["cdylib"], Cargo создаст ящик как динамическую библиотеку. Результат должен выглядеть примерно так:

[package]
name = "hello"
version = "0.1.0"
edition = "2021"

# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html

[dependencies]

[lib]
crate-type = ["cdylib"]

5. Запишите программу в файл src/lib.rs. Я написал простую функцию, которая принимает два 32-битных целых числа и возвращает сумму в виде 32-битного целого числа.

#[no_mangle]
pub extern "C" fn add(x: i32, y: i32) -> i32 {
x + y
}

Добавление волшебства — компиляция в WebAssembly

6. Скомпилируйте проект в wasm с помощью следующей команды:

cargo build — target wasm32-unknown-unknown — release

Вдохните в него жизнь — запустите WASM

7(и). Запустите файл wasm в браузере: создайте веб-страницу (файл index.html) в корневом каталоге. Добавьте какой-нибудь скрипт, который может вызывать программу Rust и записывать вывод в консоль.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
<script>
(async () => {
let response = await fetch('target/wasm32-unknown-unknown/release/hello.wasm');
let bytes = await response.arrayBuffer();
let { instance } = await WebAssembly.instantiate(bytes, { });
console.log('The answer is: ', instance.exports.add(13, 4));
})();
</script>
</head>
<body>
</body>
</html>

Вы можете запустить встроенный сервер Python, чтобы загрузить указанный выше HTML-файл. В Python3 для запуска сервера используйте следующее:

python -m http.server [<portNo>]

7(ii) Выполнить с помощью WasmEdge:

WasmEdge — это легкая, высокопроизводительная и расширяемая среда выполнения WebAssembly для облачных, пограничных и децентрализованных приложений. Среда выполнения WasmEdge предоставляет четко определенную песочницу выполнения для содержащейся в ней программы байт-кода WebAssembly. Наиболее важным вариантом использования WasmEdge является безопасное выполнение пользовательского кода или кода, созданного сообществом, в виде плагинов в программном продукте. Вот как вы можете начать с этого.

  • Установите WasmEdge: поскольку я работаю в системе Windows, я запустил winget install wasmedge . Вы можете обратиться к официальной документации по установке WasmEdge.
  • После успешной установки WasmEdge запустите эту команду, чтобы выполнить файл wasm:

wasmedge — reactor target/wasm32-unknown-unknown/release/hello.wasm add 13 4

Таким образом, WasmEdge выполняет файл wasm в режиме интерпретатора. Мы также можем выполнить файл wasm в режиме AOT для повышения производительности.

Следующий..?

Получив основную информацию, вы можете начать свое путешествие с WebAssembly и WasmEdge. По мере продвижения вы сможете решать более сложные задачи с помощью Wasm, такие как обработка изображений, задачи машинного обучения, смарт-контракты и многое другое. Вы также можете использовать широкий набор расширений WasmEdge для выполнения файла wasm.

В следующих статьях я расскажу о некоторых из этих вариантов использования и функциях WasmEdge, особенно о его поддержке нестандартных расширений. А пока продолжайте исследовать! 🚀