介绍

CabloyJS提供了一个内置模块a-wasmgo,将wasm模块的异步加载运行机制进行了封装,使我们可以非常方便的在CabloyJS项目中引入wasm,从而支持更多的业务场景开发

下面,我们以测试模块test-party为例,演示引入wasm模块并运行需要哪几个步骤

效果演示

1. 准备工作

  1. 安装go环境:参见 https://go.dev/doc/install

  2. 创建CabloyJS项目:参见 https://cabloy.com/zh-cn/articles/guide-quick-start.html

  3. 安装test-party演示套件:参见 https://store.cabloy.com/zh-cn/articles/test-party.html

2. 开发一个go wasm模块

2.1 go源码

src/suite-vendor/test-party/modules/test-party/front/src/assets/wasm/demo.go

  1. 1package main
  2. 2
  3. 3import (
  4. 4 "fmt"
  5. 5 "syscall/js"
  6. 6)
  7. 7
  8. 8func main() {
  9. 9 fmt.Println("Hello, World!")
  10. 10 alert := js.Global().Get("alert")
  11. 11 alert.Invoke("alert!")
  12. 12}
  1. fmt.Println:在控制台输出一个字符串

  2. js.Global().Get(“alert”):获取网页中的window.alert方法

  3. alert.Invoke:执行alert方法

2.2 编译wasm

进入源码所在目录,将demo.go编译为demo.wasm

  1. 1$ cd src/suite-vendor/test-party/modules/test-party/front/src/assets/wasm/
  2. 2$ GOOS=js GOARCH=wasm go build -o demo.wasm demo.go

3. 加载并运行wasm

测试模块test-party提供了一个演示页面,页面路径为:http://localhost:9092/#!/test/party/wasm_go

该页面提供了两个加载并运行wasm的方法:

3.1 两步执行

src/suite-vendor/test-party/modules/test-party/front/src/pages/wasm_go.jsx

  1. 1import wasmDemo from '../assets/wasm/demo.wasm';
  2. 2...
  3. 3async onPerformRun1() {
  4. 4 // go
  5. 5 let action = {
  6. 6 actionModule: 'a-wasmgo',
  7. 7 actionComponent: 'sdk',
  8. 8 name: 'go',
  9. 9 };
  10. 10 const go = await this.$meta.util.performAction({ ctx: this, action });
  11. 11 // load wasm
  12. 12 action = {
  13. 13 actionModule: 'a-wasmgo',
  14. 14 actionComponent: 'sdk',
  15. 15 name: 'loadWasm',
  16. 16 };
  17. 17 const item = { source: wasmDemo };
  18. 18 const wasmResult = await this.$meta.util.performAction({ ctx: this, action, item });
  19. 19 // run
  20. 20 await go.run(wasmResult.instance);
  21. 21},
  1. 内置模块a-wasmgo是异步模块,提供了一个sdk组件,用于封装异步加载并运行wasm的逻辑。因此需要通过调用performAction方法异步加载a-wasmgo模块,并调用其中的方法

  2. 第一步,调用performAction取得go实例

  3. 第二步,调用performAction异步加载demo.wasm模块

  4. 调用go.run执行wasm模块的实例

3.2 一步执行

src/suite-vendor/test-party/modules/test-party/front/src/pages/wasm_go.jsx

  1. 1import wasmDemo from '../assets/wasm/demo.wasm';
  2. 2...
  3. 3async onPerformRun2() {
  4. 4 // load&run wasm
  5. 5 const action = {
  6. 6 actionModule: 'a-wasmgo',
  7. 7 actionComponent: 'sdk',
  8. 8 name: 'run',
  9. 9 };
  10. 10 const item = { source: wasmDemo };
  11. 11 await this.$meta.util.performAction({ ctx: this, action, item });
  12. 12},
  1. 调用performAction时,直接传入demo.wasm模块,从而一次完成加载与运行的逻辑

附:performAction说明

  • action
名称 说明
actionModule 模块名称,此处为a-wasmgo
actionComponent 模块提供的组件,此处为sdk
name 需要调用的方法名称,此处有以下可选值:go/loadWasm/run
  • item
名称 说明
source wasm模块的url地址,此处为wasmDemo,指向'../assets/wasm/demo.wasm'