使用go編寫webassembly

blank

使用go編寫webassembly

使用go編寫webassembly

原文鏈接

webassembly是什麼?

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是可以支持在web瀏覽器或者v8等環境下的二進制格式,想具體了解可以查看這個回答
本文只介紹如何使用golang生成wasm文件,並在瀏覽器上執行。

開始

需要先升級go到1.11版本

編寫需要編譯成wasm文件的go文件

// main.go package main func main() { println("Hello, WebAssembly!") }

執行build命令

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

注意這個是在mac或者linux操作系統下執行的命令,在windows下應該設置環境變量再執行編譯命令

$env:GOARCH="wasm";$env:GOOS="js"; go build -o test.wasm main.go

命令執行完後,後生成test.wasm文件,這個就是可以在瀏覽器上運行的二進製文件

添加其他依賴

複製$(go env GOROOT)/misc/wasm/下的wasm_exec.htmlwasm_exec.js兩個文件到當前目錄

搭建web服務器

// test.go package main import ( "flag" "log" "net/http" "strings" ) var ( listen = flag.String("listen", ":8080", "listen address") dir = flag.String("dir", ".", "directory to serve") ) func main() { flag.Parse() log.Printf("listening on %q...", *listen) log.Fatal(http.ListenAndServe(*listen, http.HandlerFunc(func(resp http.ResponseWriter, req *http.Request) { if strings.HasSuffix(req.URL.Path, ".wasm") { resp.Header().Set("content-type", "application/wasm") } http.FileServer(http.Dir(*dir)).ServeHTTP(resp, req) }))) }

運行web服務

go run test.go

測試

在瀏覽器中打開http://localhost:8080/wasm_exec.html ,點擊頁面中的run按鈕,即可看到控制台打印Hello, WebAssembly!

這樣我們就已經可以使用go編寫一個可以運行在瀏覽器的程序了

如何使用js

使用go的js庫syscall/js

// main.go package main import "syscall/js" func sum(args []js.Value) { var sum int for _, val := range args { sum += val.Int() } println(sum) } func registerCallbacks() { js.Global().Set("sum", js.NewCallback(sum)) } func main() { c := make(chan struct{}, 0) println("Hello, WebAssembly!") registerCallbacks() <-c }

重新編譯後,刷新頁面,點擊run按鈕,就會為window對象掛載一個sum函數,在控制台可以調用

blank

操作dom

在go中可以獲取window對象來達到操作dom的效果,做一個計算器

此範例可以在wasm js範例中參考

具體代碼可以參考

參考鏈接

What do you think?

Written by marketer

blank

從渲染原理到性能優化(一)– 首次渲染

blank

程序員職業生涯的6個階段(視頻+文字版)