go語(yǔ)言打包的網(wǎng)頁(yè)wasm示例詳解

更新時(shí)間：2022年09月02日 15:15:45 作者：飄逸者

這篇文章主要為大家介紹了go打包網(wǎng)頁(yè)wasm示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪<BR>

基本環(huán)境

有時(shí)需要做一些前端的數(shù)據(jù)處理，但是又不想把數(shù)據(jù)出來(lái)的方式就這么簡(jiǎn)單的暴露在js里，然后就用了wasm來(lái)包裝這個(gè)處理函數(shù)，當(dāng)然，這樣也能提高性能。

新建文件 index.js

const fastify = require('fastify')({ logger: true })
const path = require('path')
// Serve the static assets
fastify.register(require('fastify-static'), {
   root: path.join(__dirname, ''),
   prefix: '/'
})
const start = async () => {
   try {
       await fastify.listen(8080, "0.0.0.0")
       fastify.log.info(`server listening on ${fastify.server.address().port}`)
   } catch (error) {
       fastify.log.error(error)
   }
}
start()

package.json

{
  "scripts": {
    "dev": "node index.js"
  },
  "dependencies": {
    "fastify": "^3.6.0",
    "fastify-static": "^3.2.1"
  }
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello</title>
</head>
<body>
hello
</body>
</html>

運(yùn)行 npm run dev 打開(kāi)http://127.0.0.1:8080

wasm部分

新建 go.mod

module hello-world
go 1.18

main.go

package main
import (
	"syscall/js"
)
func main() {
	message := "?? Hello World ??"
	document := js.Global().Get("document")
	h2 := document.Call("createElement", "h2")
	h2.Set("innerHTML", message)
	document.Get("body").Call("appendChild", h2)
	<-make(chan bool)
}

運(yùn)行 go env win下

GOOS=windows
GOARCH=amd64

需要配置環(huán)境變量為 win 下設(shè)置 cmd運(yùn)行 set GOOS=js set GOARCH=wasm

生成必要文件(cmd會(huì)報(bào)錯(cuò) powershell可以執(zhí)行) cp "$(go env GOROOT)/misc/wasm/wasm_exec.js" . 會(huì)多出一個(gè)wasm_exec.js的文件

go打包成wasm 運(yùn)行go build -o main.wasm 運(yùn)行結(jié)束后會(huì)生成一個(gè)名為main.wasm的文件

然后修改之前的index.html文件

<html>
<head>
    <meta charset="utf-8"/>
    <script src="wasm_exec.js"></script>
</head>
<body>
<h1>WASM</h1>
<script>
	// 判斷是否支持instantiateStreaming加載
    if (!WebAssembly.instantiateStreaming) {
        WebAssembly.instantiateStreaming = async (resp, importObject) => {
            const source = await (await resp).arrayBuffer()
            return await WebAssembly.instantiate(source, importObject)
        }
    }
    // 異步加載wasm文件
    function loadWasm(path) {
        const go = new Go()
        return new Promise((resolve, reject) => {
            WebAssembly.instantiateStreaming(fetch(path), go.importObject)
                .then(result => {
                    go.run(result.instance)
                    resolve(result.instance)
                })
                .catch(error => {
                    reject(error)
                })
        })
    }
    //加載wasm文件
    loadWasm("main.wasm").then(wasm => {
        console.log("wasm已加載 ??")
    }).catch(error => {
        console.log("加載出錯(cuò)了", error)
    })
</script>
</body>
</html>

然后刷新瀏覽器就能看到這么一個(gè)界面