介绍
CabloyJS提供了一个内置模块a-wasmgo
,将wasm模块的异步加载运行机制进行了封装,使我们可以非常方便的在CabloyJS项目中引入wasm,从而支持更多的业务场景开发
下面,我们以测试模块test-party
为例,演示引入wasm模块并运行需要哪几个步骤
效果演示
1. 准备工作
-
安装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
2. 开发一个go wasm模块
2.1 go源码
src/suite-vendor/test-party/modules/test-party/front/src/assets/wasm/demo.go
- 1package main
- 2
- 3import (
- 4 "fmt"
- 5 "syscall/js"
- 6)
- 7
- 8func main() {
- 9 fmt.Println("Hello, World!")
- 10 alert := js.Global().Get("alert")
- 11 alert.Invoke("alert!")
- 12}
-
fmt.Println:在控制台输出一个字符串
-
js.Global().Get(“alert”):获取网页中的window.alert方法
-
alert.Invoke:执行alert方法
2.2 编译wasm
进入源码所在目录,将demo.go
编译为demo.wasm
- 1$ cd src/suite-vendor/test-party/modules/test-party/front/src/assets/wasm/
- 2$ GOOS=js GOARCH=wasm go build -o demo.wasm demo.go
- 更详细说明,请参见go官方文档:https://github.com/golang/go/wiki/WebAssembly
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
- 1import wasmDemo from '../assets/wasm/demo.wasm';
- 2...
- 3async onPerformRun1() {
- 4 // go
- 5 let action = {
- 6 actionModule: 'a-wasmgo',
- 7 actionComponent: 'sdk',
- 8 name: 'go',
- 9 };
- 10 const go = await this.$meta.util.performAction({ ctx: this, action });
- 11 // load wasm
- 12 action = {
- 13 actionModule: 'a-wasmgo',
- 14 actionComponent: 'sdk',
- 15 name: 'loadWasm',
- 16 };
- 17 const item = { source: wasmDemo };
- 18 const wasmResult = await this.$meta.util.performAction({ ctx: this, action, item });
- 19 // run
- 20 await go.run(wasmResult.instance);
- 21},
-
内置模块
a-wasmgo
是异步模块,提供了一个sdk
组件,用于封装异步加载并运行wasm的逻辑。因此需要通过调用performAction
方法异步加载a-wasmgo
模块,并调用其中的方法 -
第一步,调用
performAction
取得go
实例 -
第二步,调用
performAction
异步加载demo.wasm
模块 -
调用
go.run
执行wasm模块的实例
3.2 一步执行
src/suite-vendor/test-party/modules/test-party/front/src/pages/wasm_go.jsx
- 1import wasmDemo from '../assets/wasm/demo.wasm';
- 2...
- 3async onPerformRun2() {
- 4 // load&run wasm
- 5 const action = {
- 6 actionModule: 'a-wasmgo',
- 7 actionComponent: 'sdk',
- 8 name: 'run',
- 9 };
- 10 const item = { source: wasmDemo };
- 11 await this.$meta.util.performAction({ ctx: this, action, item });
- 12},
- 调用
performAction
时,直接传入demo.wasm
模块,从而一次完成加载与运行的逻辑
附:performAction说明
- action
名称 | 说明 |
---|---|
actionModule | 模块名称,此处为a-wasmgo |
actionComponent | 模块提供的组件,此处为sdk |
name | 需要调用的方法名称,此处有以下可选值:go/loadWasm/run |
- item
名称 | 说明 |
---|---|
source | wasm模块的url地址,此处为wasmDemo ,指向'../assets/wasm/demo.wasm' |
评论: