go run 使用其他函数_golang使用webAssembly的方式

最新推荐文章于 2024-03-19 10:29:16 发布

鬼冢喜之郎

最新推荐文章于 2024-03-19 10:29:16 发布

阅读量697

点赞数 1

文章标签： go run 使用其他函数

本文链接：https://blog.csdn.net/weixin_36051235/article/details/112092400

版权

WebAssembly (WASM) 是一种新的编码方式，可以在现代的网络浏览器中运行－它是一种低级的类汇编语言，具有紧凑的二进制格式，可以接近原生的性能. 可以将C/C++/Rust/GO代码编译成.wasm文件, 然后运行在web上面.

本文仅介绍Golang与WASM使用的相关基础知识.

环境

需要golang版本高于go1.11, 本文golang版本:

$ go version
> go version go1.11.1 darwin/amd64

js中调用golang函数案例

本案例基于goland IDE编写, 为了获取syscall/js库的自动提示, 需要对IDE进行如下设置:

设置好之后, 进行编辑go文件: main.go

package main

import (
    "fmt"
    "syscall/js"
)

func foo( args []js.Value) {
    fmt.Println("hellow wasm")
    fmt.Println(args)
}

func main() {
    // 将golang中foo函数注入到window.foo中
    js.Global().Set("foo", js.NewCallback(foo))
  // 将100注入到 window.value中
    js.Global().Set("value", 100)
    select {}
}

将此main.go文件, 编译成wasm文件:

GOARCH=wasm GOOS=js go build -o test.wasm main.go

接下来需要开启一个简单的web服务器并将上一步的wasm文件复制到案例目录中:

server.go:

package main

import "net/http"

func main() {
    http.ListenAndServe(":8080", http.FileServer(http.Dir("./test1"))) // 此为案例文件夹目录
}

将golang源码中的wasm_exec.js复制到本案例中:

cp $GOROOT/misc/wasm/wasm_exec.js .

index.html:

<html>
<head>
    <meta charset="utf-8">
    <script src="wasm_exec.js"></script>
    <script>
        const go = new Go();
        WebAssembly.instantiateStreaming(fetch("test.wasm"), go.importObject).then((result) => {
            go.run(result.instance);
        });
    </script>
</head>
<body></body>
</html>

整体案例文件:

$ tree test1
test1
├── index.html
├── server.go
├── test.wasm
└── wasm_exec.js

运行 go run server.go即可启动服务

浏览器中访问 http://127.0.0.1:8080/index.html, 右键->检查->console

即可对golang中的函数以及属性进行访问.

GO获取DOM元素, 操作标签属性

同样的方式, main.go中:

package main

import (
    "syscall/js"
)


func setDivRedColor(args []js.Value)  {
    // 获取DOM元素, 进行设置属性,  call方法为调用js方法
    js.Global().Get("document").Call("getElementById", "div").Set("style", "width: 300px; height: 300px; background-color: red")
    // 注意, 此处设置style的时候, 是会覆盖掉html中的style设置
}

func main() {
    js.Global().Set("setDivRedColor", js.NewCallback(setDivRedColor))
    select {}
}

进行编译, 得到wasm文件, 复制到案例项目中

项目中server.go不变, index.html改为:

<html>
<head>
    <meta charset="utf-8">
    <script src="wasm_exec.js"></script>
    <script>
        const go = new Go();
        WebAssembly.instantiateStreaming(fetch("test.wasm"), go.importObject).then((result) => {
            go.run(result.instance);
        });
    </script>
</head>
<body>
    <div style="width: 300px; height: 300px; background-color: yellow" id="div"></div>
</body>
</html>

启动服务, 浏览器访问http://127.0.0.1:8080/index.html

当console中调用对应的golang函数:

总结

以上就是Go中使用WASM的基本方式, golang对于WASM支持也在不断的加强. 此案例编译生成的wasm文件为1.4M, 后续也许会优化缩小.

鬼冢喜之郎

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
go run 使用其他函数_golang使用webAssembly的方式

WebAssembly (WASM) 是一种新的编码方式，可以在现代的网络浏览器中运行－它是一种低级的类汇编语言，具有紧凑的二进制格式，可以接近原生的性能. 可以将C/C++/Rust/GO代码编译成.wasm文件, 然后运行在web上面.本文仅介绍Golang与WASM使用的相关基础知识.环境需要golang版本高于go1.11, 本文golang版本:$ go version> go...
复制链接

扫一扫