Как работать с WebAssembly

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

Что такое WebAssembly?

WebAssembly — это относительно новый формат кода, который разработан для ускорения выполнения программ на веб-страницах. Он обеспечивает возможность компиляции кода, написанного на языках, таких как C, C++, Rust, и т.д., в бинарный формат, который можно запустить в веб-браузере наряду с JavaScript.

Как использовать WebAssembly в проекте

Для начала работы с WebAssembly вам потребуется компилятор, который преобразует код на вашем языке программирования в wasm-формат. Самыми популярными компиляторами являются Emscripten для C и C++ и wasm-pack для Rust.

Подключение WebAssembly к проекту

После того как вы скомпилировали свой код в wasm-формат, его можно подключить к вашему проекту. Для этого используйте функцию WebAssembly.instantiateStreaming(), которая загружает и инициализирует модуль WebAssembly.

(async () => {

  const response = await fetch('your_compiled_code.wasm');

  const wasmModule = await WebAssembly.instantiateStreaming(response);

  // Использование экспортированных функций из модуля

  console.log(wasmModule.instance.exports.your_function());

})();

Взаимодействие с JavaScript

WebAssembly позволяет импортировать и экспортировать функции, которые могут вызываться из JavaScript и обратно.

// JavaScript

const importObject = {

  js: {

    log: (message) => console.log(message),

  },

};

(async () => {

  const response = await fetch('your_compiled_code.wasm');

  const wasmModule = await WebAssembly.instantiateStreaming(response, importObject);

  // Вызов функции из WebAssembly, которая использует импортированную функцию log

  wasmModule.instance.exports.log_from_wasm();

})();

// WebAssembly (C++)

#include <emscripten.h>

extern "C" {

  EMSCRIPTEN_KEEPALIVE

  void log_from_wasm() {

    int message = 42;

    EM_ASM({js.log($0)}, message);

  }

}