如何使用golang生成wasm文件并在瀏覽器上執(zhí)行

這篇文章主要講解了“如何使用golang生成wasm文件并在瀏覽器上執(zhí)行”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“如何使用golang生成wasm文件并在瀏覽器上執(zhí)行”吧！

webassembly是什么？

webassembly是可以支持在web瀏覽器或者v8等環(huán)境下的二進制格式，想具體了解可以查看這個回答

開始

需要先升級go到1.11版本

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

// main.go

package main

func main() {

println("Hello, WebAssembly!")

}

執(zhí)行build命令

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

注意這個是在mac或者linux操作系統(tǒng)下執(zhí)行的命令，在windows下應(yīng)該設(shè)置環(huán)境變量再執(zhí)行編譯命令

$env:GOARCH="wasm";$env:GOOS="js";

go build -o test.wasm main.go

命令執(zhí)行完后，后生成test.wasm文件，這個就是可以在瀏覽器上運行的二進制文件

添加其他依賴

復(fù)制$(go env GOROOT)/misc/wasm/下的wasm_exec.html和wasm_exec.js兩個文件到當(dāng)前目錄

搭建web服務(wù)器

// 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服務(wù)

go run test.go

測試

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

這樣我們就已經(jīng)可以使用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函數(shù)，在控制臺可以調(diào)用

操作dom

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

感謝各位的閱讀，以上就是“如何使用golang生成wasm文件并在瀏覽器上執(zhí)行”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對如何使用golang生成wasm文件并在瀏覽器上執(zhí)行這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！