go-to-wasm

前言

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版本),由于wasmbinary,因此它拥有比原生js更快的执行速度!并且,各个大型浏览器这两年的新版本都均以支持wasm.

最早支持的语言为 C/C++/Rust,但是现在各家大佬都发现其使用意义,基本上开始逐渐 all to wasm 了,本身想用tsruby来写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

如图: 输出1

顺利完成!

然后继续试试htmldocument操作 首先,给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>")
}

重新编译,执行!结果如图! 输出2

评论