张的博客1. 什么是WebAssembly
WebAssembly 或者 wasm 是一个可移植、体积小、加载快并且兼容 Web 的全新格式。即像Java的一样的类虚拟机，任何语言都可以编译为wasm，并运行在浏览器或者web环境中。
2. 入门Demo
2.1. 本机环境
- windows11
- golang1.20.1
- goland2023.3.2
2.2. 工程目录结构
html/
-- index.html
-- wasm.js
server/
-- main.go
main.go
README.md2.3. golang demo
工程根目录新建文件main.go，填入如下内容：
package main
import "fmt"
func main() {
fmt.Println("Hello, WebAssembly!")
}2.4. 编译代码
go env -w GOOS=js
go env -w GOARCH=wasm
go build -o main.wasm注：windows在设置环境变量出现如下错误：
PS E:\2project\golang\001\wasmg-go> go env -w GOOS=js
go: unsupported GOOS/GOARCH pair js/amd64请将终端编辑器更换成：cmd， 执行如下切换编译环境
set GOOS=js
set GOARCH=wasm3. 新建Web服务器
3.1. 复制wasm.js
注意：测试时请从golang安装目录复制JS
从 golang安装目录/misc/wasm/wasm_exec.js 复制到 工程目录/html中
3.2. 新建index.html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>WebAssembly学习</title>
<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>
测试golang的WebAssembly
</body>
</html>3.3. 新建server/main.go服务
package main
import (
"fmt"
"log"
"net/http"
)
const dir = "./html"
func main() {
fs := http.FileServer(http.Dir(dir))
log.Print("Serving " + dir + " on http://localhost:8082")
err := http.ListenAndServe(":8082", fs)
if err != nil {
fmt.Println("Failed to start server", err)
return
}
}3.4. 启动Web服务
浏览器访问：http://localhost:8082 F12打开调试模式，控制台输出： Hello, WebAssembly! 就成功了
4. 建立一个带方法的wasm
4.1. 改写main.go带方法
package main
import (
"fmt"
"syscall/js")
func add(this js.Value, args []js.Value) interface{} {
fmt.Println("接收的参数", args)
a := args[0].Int()
b := args[1].Int()
return js.ValueOf(a + b)
}
func main() {
fmt.Println("func add初始化成功......")
js.Global().Set("add", js.FuncOf(add))
select {}
}编译为add.wasm
go build -o html/add.wasm main.go4.2. 建立add.html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>WebAssembly学习</title>
<script src="./wasm_exec.js"></script>
<script> const main = async () => {
const go = new Go()
const importObject = go.importObject
const { instance } = await WebAssembly.instantiateStreaming(
fetch('add.wasm'),
importObject
)
go.run(instance)
const add = new Function('a', 'b', 'return add(a, b);')
let add1 = add(3, 3)
console.log("加结果", add1)
}
main()
</script>
</head>
<body>
测试golang的WebAssembly
</body>
</html>4.3. 运行测试
成功。。。
可以通过Wasm做很多事了哦，比如获取本机唯一ID， 适用于企业强客户端场景等。