V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
zhennann
V2EX  ›  Node.js

我是这样异步加载并执行 go wasm 模块的,帮看好使不?

  •  
  •   zhennann · 2023-03-08 20:59:25 +08:00 · 1270 次点击
    这是一个创建于 385 天前的主题,其中的信息可能已经有所发展或是发生改变。

    介绍

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

    下面,我们以测试模块test-party为例,演示引入 go 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

    package main
    
    import (
    	"fmt"
    	"syscall/js"
    )
    
    func main() {
    	fmt.Println("Hello, World!")
    	alert := js.Global().Get("alert")
    	alert.Invoke("alert!")
    }
    
    1. fmt.Println:在控制台输出一个字符串

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

    3. alert.Invoke:执行 alert 方法

    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);
    },
    
    1. 内置模块a-wasmgo是异步模块,提供了一个sdk组件,用于封装异步加载并运行 wasm 的逻辑。因此需要通过调用performAction方法异步加载a-wasmgo模块,并调用其中的方法

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

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

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

    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 });
    },
    
    1. 调用performAction时,直接传入demo.wasm模块,从而一次完成加载与运行的逻辑

    附:performAction 说明

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

    相关链接

    2 条回复    2023-03-08 22:27:39 +08:00
    456vv
        1
    456vv  
       2023-03-08 21:25:35 +08:00
    主要是异步不是新玩意啊,来个多线程试试!!
    Kuari
        2
    Kuari  
       2023-03-08 22:27:39 +08:00
    @456vv 用过 web worker 加载 wasm ,感觉还不错
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   3499 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 36ms · UTC 10:52 · PVG 18:52 · LAX 03:52 · JFK 06:52
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.