golang WebAssembly入门

go从1.11版本开始，实验性的加入了WebAssembly的支持。

`hellow world`程序

package main

import "fmt"

func main() {
	fmt.Println("Hello, WebAssembly!")
}

设置go编译WebAssembly环境变量值，GOOS=js和GOARCH=wasm。

设置方法有两种：

修改默认变量值，执行命令：go env -w GOOS=js GOARCH=wasm
编译的时候指定值：cd到项目根目录，执行命令：GOOS=js GOARCH=wasm go build -o main.wasm

这时将生成一个main.wasm文件，.wasm后缀的文件可以通过http设置合适的Content-Typehttp头来使用。

需要注意的一点是，只能编译main包，否则是不能在WebAssembly里面使用的。

在浏览器里面运行main.wasm

用nginx准备一个http服务器，创建一个index.html的测试文件，内容如下：

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

复制main.wasm到根目录，从go程序的安装目录里面的/misc/wasm/wasm_exec.js复制wasm_exec.js文件。

为了能够正确响应wasm文件的Content_type头，还需要在nginx的MIME配置里面增加application/wasm wasm;，这样nginx才能返回适当的头，浏览器才能识别出wasm文件。

一切做好之后，我们可以通过浏览器访问index.html文件，正常的话就能够在浏览器的console面板看到Hello, WebAssembly的输出了。

测试

安装wasmbrowsertest。

go get github.com/agnivade/wasmbrowsertest

然后运行GOOS=js GOARCH=wasm go test -exec="$GOPATH/bin/wasmbrowsertest"。

与DOM交互

可以使用包syscall/js，https://godoc.org/syscall/js

这个包还是实验性的，所以随时都有可能会有变更。

我们这里用获取和设置div内容来测试一下。

在上面hello world的html文件body里面加几个div：

<div id="id1">test web assembly</div>
<div id="id2"></div>
<div id="id3"></div>

main.go：

package main

import (
	"fmt"
	"syscall/js"
)

func main() {
	fmt.Println("Hello, WebAssembly")
	s := js.Global().Get("document").Call("getElementById", "id1").Get("innerHTML").String()
	fmt.Println(s);
	js.Global().Get("document").Call("getElementById", "id2").Set("innerHTML", "这里是go写入的文本")
	js.Global().Get("document").Call("getElementById", "id3").Set("innerHTML", js.ValueOf("这里是go写入的文本2222"))
}

用get和set方法可以分别设置js对象的属性。

还有一些第三方的ui库，可以查看：https://github.com/golang/go/wiki/WebAssembly#interacting-with-the-dom

调试

目前WebAssembly还不支持任何调试器，所以可以通过println()函数把信息打印到浏览器console方式了达成。

更多go关于WebAssembly的示例，可以参考：https://github.com/golang/go/wiki/WebAssembly#further-examples

本文链接：https://360us.net/article/69.html