CabloyJS 提供了一个内置模块a-wasmgo，将 go wasm 模块的异步加载运行机制进行了封装，使我们可以非常方便的在 CabloyJS 项目中引入 go wasm ，从而支持更多的业务场景开发
下面，我们以测试模块test-party为例，演示引入 go wasm 模块并运行需要哪几个步骤
效果演示
1. 准备工作
[ol]
安装 go 环境：参见 https://go.dev/doc/install
创建 CabloyJS 项目：参见 https://cabloy.com/zh-cn/articles/guide-quick-start.html
安装 test-party 演示套件：参见 https://store.cabloy.com/zh-cn/articles/test-party.html
[/ol]
2. 开发一个 go wasm 模块
2.1 go 源码
src/suite-vendor/test-party/modules/test-party/front/src/assets/wasm/demo.go
package main
import (
"fmt"
"syscall/js"
)
func main() {
fmt.Println("Hello, World!")
alert := js.Global().Get("alert")
alert.Invoke("alert!")
}
[ol]
fmt.Println：在控制台输出一个字符串
js.Global().Get(“alert”)：获取网页中的 window.alert 方法
alert.Invoke：执行 alert 方法
[/ol]
2.2 编译 wasm
进入源码所在目录，将demo.go编译为demo.wasm
$ cd src/suite-vendor/test-party/modules/test-party/front/src/assets/wasm/
$ 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/test-party/modules/test-party/front/src/pages/wasm_go.jsx
import wasmDemo from '../assets/wasm/demo.wasm';
...
async onPerformRun1() {
// go
let action = {
actionModule: 'a-wasmgo',
actionComponent: 'sdk',
name: 'go',
};
const go = await this.$meta.util.performAction({ ctx: this, action });
// load wasm
action = {
actionModule: 'a-wasmgo',
actionComponent: 'sdk',
name: 'loadWasm',
};
const item = { source: wasmDemo };
const wasmResult = await this.$meta.util.performAction({ ctx: this, action, item });
// run
await go.run(wasmResult.instance);
},
[ol]
内置模块a-wasmgo是异步模块，提供了一个sdk组件，用于封装异步加载并运行 wasm 的逻辑。因此需要通过调用performAction方法异步加载a-wasmgo模块，并调用其中的方法
第一步，调用performAction取得go实例
第二步，调用performAction异步加载demo.wasm模块
调用go.run执行 wasm 模块的实例
[/ol]
3.2 一步执行
src/suite/test-party/modules/test-party/front/src/pages/wasm_go.jsx
import wasmDemo from '../assets/wasm/demo.wasm';
...
async onPerformRun2() {
// load&run wasm
const action = {
actionModule: 'a-wasmgo',
actionComponent: 'sdk',
name: 'run',
};
const item = { source: wasmDemo };
await this.$meta.util.performAction({ ctx: this, action, item });
},
[ol]
[/ol]
附：performAction 说明
[td]名称[/td]
[td]说明[/td]
actionModule
模块名称，此处为a-wasmgo
actionComponent
模块提供的组件，此处为sdk
name
需要调用的方法名称，此处有以下可选值：go/loadWasm/run
[td]名称[/td]
[td]说明[/td]
source
wasm 模块的 url 地址，此处为wasmDemo，指向'../assets/wasm/demo.wasm'
相关链接
文档：https://cabloy.com/
演示：https://test.cabloy.com/
GitHub 源码仓库: https://github.com/zhennann/cabloy
wasm, test-party, 模块, Demo
