WebAssembly 与 Rust 编程系列04 WebAssembly模块的加载和运行

WebAssembly 与 Rust 编程系列04 WebAssembly模块的加载和运行

About: 简介

前两篇文章中:
WebAssembly 与 Rust 编程系列02 WebAssembly 调试工具的安装及使用
WebAssembly 与 Rust 编程系列03 手撕 WebAssembly 文本格式
我们手写了简单的wat代码,以及生成对应的wasm 二进制模块;

本篇文章主要演示下:如何在js中加载和使用这些模块;

这里我们只是用最简单示例,并没有多大工程参考意义,仅仅是演示WebAssembly相关概念;

wasm模块

针对本篇文章,我们特地写了 wasm_load_usage.wat,
主要是定义和导出了一个add函数
导入了js的console.log函数,并调用log

(module
  (import "console" "log" (func $log (param i32)))
  
  (func $add (param $lhs i32) (param $rhs i32) (result i32)
    get_local $lhs
    get_local $rhs
    i32.add)
  (export "add" (func $add))

  (func (export "wasmLog")
    i32.const 13
    call $log)
)

同之前一样,生成wasm模块

wat2wasm wasm_load_usage.wat -o wasm_load_usage.wasm 

加载wasm模块

• 简单的index.html

  
  
  
  <


  
  

• 对应的 index.js

let jsObject = {
  console: {
    log: function(arg) {
      console.log(arg);
    }
  }
};

fetch('wasm_load_usage.wasm')
.then(res =>
  res.arrayBuffer()
).then(bytes =>
  WebAssembly.instantiate(bytes, jsObject)
).then(results => {
  results.instance.exports.wasmLog();
});

• 我们使用fetch,加载wasm模块,该函数返回一个Response对象
• 使用 arrayBuffer 把响应转换为带类型数组
• 使用 WebAssembly.instantiate()函数一步实现编译和实例化带类型数组

获取wasm 示例化的函数

上面的代码中,我们使用 WebAssembly.instantiate()函数一步实现编译和实例化带类型数组,
我们可以根据 instance.exports 获取示例导出的函数

results.instance.exports.wasmLog();