go-to-wasm
2020年01月07日 标签: Golang Html前言
WASM已经出来有一段时间了,但是限于加载速度,应用并不广范;但是随着全球网速提升已经5G网络到来,WASM已经开始被各种大型公司开始应用,为了不落后…记录一次简易的Demo 表示我用过
WASM介绍
WebAssembly (abbreviated Wasm) is a binary instruction format for a stack-based virtual machine. Wasm is designed as a portable target for compilation of high-level languages like C/C++/Rust, enabling deployment on the web for client and server applications.
简单说,WebAssembly/wasm WebAssembly 或者 wasm 是一个可移植、体积小、加载快并且兼容 Web 的全新格式.
这样的好处是可以将很多其他语言的库,编译成web可直接运行的asm,这样可以将一些本身只能在原始PC端运行的应用方便编译成web可运行的代码,大幅度减少重写成本(比如Auto CAD就使用wasm制作了web版本),由于wasm是binary,因此它拥有比原生js更快的执行速度!并且,各个大型浏览器这两年的新版本都均以支持wasm.
最早支持的语言为 C/C++/Rust,但是现在各家大佬都发现其使用意义,基本上开始逐渐 all to wasm 了,本身想用ts或ruby来写demo,但是最终发现,golang在编写demo更加方便,所以就这样了.
Demo正文
Warning: golang version >= 1.11
在项目目录执行:
cp "$(go env GOROOT)/misc/wasm/wasm_exec.js" .
拷贝一会必要的一个加载文件
// main.go
// Demo文件,在控制台输出Hello world
package main
import "fmt"
func main() {
fmt.Println("Hello world")
}
进行编译,得到文件lib.wasm.(注意文件编码和编译时的编码,建议UTF8)
GOOS=js GOARCH=wasm go build -o lib.wasm main.go
<!-- index.html -->
<html>
<head>
<meta charset="utf-8"/>
<script src="wasm_exec.js"></script>
<script>
const go = new Go();
WebAssembly.instantiateStreaming(fetch("lib.wasm"), go.importObject).then((result) => {
go.run(result.instance);
});
</script>
</head>
<body></body>
</html>
然后是需要一个执行的服务器来代理这两个文件,直接用go写个简易的
// server/main.go
package main
import "net/http"
func main(){
se := http.FileServer(http.Dir("."))
http.ListenAndServe(":8080", se)
}
完成后运行服务器:
go run server/main.go
打开浏览器 http://localhost:8080
这个时候正常情况下,在浏览器控制台的Console中可以看到打印的Hello world
如图:
顺利完成!
然后继续试试html的document操作
首先,给html增加一个div标签
<body>
<div id="demo"></div>
</body>
然后对main.go文件进行修改
// main.go
package main
import "fmt"
import "syscall/js"
func main() {
fmt.Println("Hello world")
doc := js.Global().Get("document")
d := doc.Call("getElementById", "demo")
d.Set("innerHTML", "Hello <b>Go!</b>")
}
重新编译,执行!结果如图!
评论