WebAssembly

创建webasm字符串模板

my-module.wat:

(module
  (func $add (param $a i32) (param $b i32) (result i32)
    (i32.add 
      (local.get $a) 
      (local.get $b)
    )
  )

  (export "add" (func $add))
)

将wat转化为wasm二进制文件

$ wat2wasm.exe my-module.wat

上面的命令将使用my-module.wat文件生成my-module.wasm文件

js调用

const resp = await fetch("my-module.wasm");
const buf = await resp.arrayBuffer();
const { instance } = await WebAssembly.instantiate(buf);
const r = instance.exports.add(1, 2);
console.assert(r === 3);

wasm 使用导入的模块

(module
  (import "JsModule" "alert" (func $alert (param i32)))

  (func $add (param $a i32) (param $b i32)
    (call $alert (i32.add 
      (local.get $a) 
      (local.get $b)
    ))
  )

  (export "add" (func $add))
)

const resp = await fetch("./my-module.wasm");
const buf = await resp.arrayBuffer();
const { instance } = await WebAssembly.instantiate(buf, {
  JsModule: { alert },
});
const r = instance.exports.add(1, 2);
console.assert(r === undefined);

wasm 使用导入的内存

(module
  (import "env" "memory" (memory 1)) 
  (func $add (result i32)
    (i32.add 
      (i32.load (i32.const 0)) 
      (i32.load (i32.const 4))
    )
  )

  (export "add" (func $add))
)

const mem = new WebAssembly.Memory({ initial: 1 });
const view = new DataView(mem.buffer);

// 你需要使用小端法来存数据
// view默认使用大端，但是在wasm中读取时使用小端
view.setInt32(0, 1, true);
view.setInt32(4, 2, true);

console.assert(view.getInt32(0, true) === 1);
console.assert(view.getInt32(4, true) === 2);

const resp = await fetch("./my-module.wasm");
const buf = await resp.arrayBuffer();
const { instance } = await WebAssembly.instantiate(buf, {
  env: { memory: mem },
});

const r = instance.exports.add(1, 2);
console.assert(r === 3);

在线程中共享内存，及挂起线程

main.js

const sab = new SharedArrayBuffer(4);
const view = new Int32Array(sab);
const worker = new Worker("w.js");
worker.postMessage(sab);

setTimeout(() => {
  view[0] = 100;
  Atomics.notify(view, 0); // 唤醒等待的线程
}, 3000);

w.js

onmessage = (e) => {
  const view = new Int32Array(e.data);

  // 如果数组中给定位置的值等于提供的值，则将当前代理置于睡眠状态，导致执行挂起，
  // 直到超时到期（返回“超时”）或直到代理被唤醒（返回“ ok”）为止。 “）; 否则，返回“不等于”。
  Atomics.wait(view, 0, 0); // view[0] === 0 挂起线程
  console.log(view[0]);
  console.assert(view[0] === 100);
};