WebAssembly - JavaScript API

В этой главе мы поймем, как загрузить код wasm и выполнить его в браузере с помощью API веб-сборки javascript.

Вот некоторые важные API, которые мы собираемся использовать на протяжении всего руководства для выполнения кода wasm.

fetch () API браузера
WebAssembly.compile
WebAssembly.instance
WebAssembly.instantiate
WebAssembly.instantiateStreaming

Прежде чем мы обсудим API-интерфейс javascript WebAssembly, для тестирования API и вывода мы будем использовать следующую программу на C и код .wasm, сгенерированный из программы c с помощью проводника wasm.

Пример для программы C выглядит следующим образом -

#include<stdio.h>
int square(int n) { 
   return n*n; 
}

Мы воспользуемся WASM explorer, чтобы получить код wasm -

Загрузите код WASM и используйте его для тестирования API.

fetch () API браузера

API fetch () предназначен для загрузки сетевого ресурса .wasm.

<script>
   var result = fetch("findsquare.wasm");
   console.log(result);
</script>

Он возвращает обещание, как показано ниже -

Вы также можете использовать метод XMLHttpRequest для получения сетевого ресурса wasm.

WebAssembly.compile ()

Ответственность за api заключается в компиляции деталей модуля, полученных из .wasm.

Синтаксис

Синтаксис приведен ниже -

WebAssembly.compile(buffer);

Параметры

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

Возвращаемое значение

Он вернет обещание, в котором будет скомпилированный модуль.

пример

Давайте посмотрим на один пример, который дает вывод в виде скомпилированного модуля с использованием webAssembly.compile ().

<script> 
   fetch("findsquare.wasm") .then(bytes => bytes.arrayBuffer()) 
   .then(mod => {
      var compiledmod = WebAssembly.compile(mod);
      compiledmod.then(test=> {
         console.log(test); 
      })
   })
</script>

Вывод

При проверке в браузере console.log предоставит вам сведения о скомпилированном модуле -

В модуле есть объект-конструктор с импортом, экспортом и customSections. Давайте посмотрим на следующий API, чтобы получить более подробную информацию о скомпилированном модуле.

WebAssembly.instance

Используя WebAssembly.instance, API предоставит вам исполняемый экземпляр скомпилированного модуля, который можно в дальнейшем выполнить для получения вывода.

Синтаксис

Синтаксис приведен ниже -

new WebAssembly.Instance(compiled module)

Возвращаемое значение

Возвращаемое значение будет объектом с массивом функций экспорта, которые могут быть выполнены.

пример

<script> 
   fetch("findsquare.wasm") 
      .then(bytes => bytes.arrayBuffer())
      .then(mod => WebAssembly.compile(mod)).then(module => {
         let instance = new WebAssembly.Instance(module); 
         console.log(instance); 
      })
</script>

Вывод

Результат даст нам массив функций экспорта, как показано ниже -

Вы можете видеть квадратную функцию, которую мы получили из скомпилированного кода C.

Чтобы выполнить квадратную функцию, вы можете сделать следующее:

<script>
   fetch("findsquare.wasm") 
   .then(bytes => bytes.arrayBuffer()) 
   .then(mod => WebAssembly.compile(mod)) 
   .then(module => { 
      let instance = new WebAssembly.Instance(module);
      console.log(instance.exports.square(15));
   })
</script>

Выход будет -

WebAssembly.instantiate

Этот API обеспечивает совместную компиляцию и создание экземпляра модуля.

Синтаксис

Синтаксис следующий -

WebAssembly.instantiate(arraybuffer, importObject)

Параметры

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

importObject- Объект импорта должен иметь подробную информацию о памяти, импортированные функции, которые будут использоваться внутри модуля. Это может быть пустой объект модуля, если нечего делить.

Возвращаемое значение

Он вернет обещание, в котором будут детали модуля и экземпляра.

пример

<script type="text/javascript">
   const importObj = {
      module: {}
   };
   fetch("findsquare.wasm")
      .then(bytes => bytes.arrayBuffer())
      .then(module => WebAssembly.instantiate(module, importObj)) 
      .then(finalcode => { 
         console.log(finalcode); console.log(finalcode.instance.exports.square(25)); 
      }); 
</script>

Вывод

Когда вы выполните код, вы получите результат, указанный ниже.

WebAssembly.instantiateStreaming

Этот API заботится о компиляции, а также о создании экземпляра модуля WebAssembly из предоставленного кода .wasm.

Синтаксис

Синтаксис приведен ниже -

WebAssembly.instantiateStreaming(wasmcode, importObject);

Параметры

wasmcode - Ответ от fetch или любого другого API, который дает код wasm и возвращает обещание.

Возвращаемое значение

Он вернет обещание, в котором будут детали модуля и экземпляра.

пример

Пример обсуждается ниже -

<script type="text/javascript">     
   const importObj = { 
      module: {} 
   };
   WebAssembly.instantiateStreaming(fetch("findsquare.wasm"), importObj).then(obj => {
      console.log(obj); 
   }); 
</script>

При тестировании в браузере вы увидите ошибку -

Чтобы заставить его работать на вашем сервере, вам нужно будет добавить mime-тип application / wasm или использовать WebAssembly.instantiate (arraybuffer, importObject).