日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

go語言打包的網頁wasm示例詳解_Golang

作者：飄逸者 ? 更新時間： 2022-10-29 編程語言

基本環境

有時需要做一些前端的數據處理，但是又不想把數據出來的方式就這么簡單的暴露在js里，然后就用了wasm來包裝這個處理函數，當然，這樣也能提高性能。

新建文件 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>

運行 npm run dev 打開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)
}

運行 go env win下

GOOS=windows
GOARCH=amd64

需要配置環境變量為 win 下設置 cmd運行 set GOOS=js set GOARCH=wasm

生成必要文件(cmd會報錯 powershell可以執行) cp "$(go env GOROOT)/misc/wasm/wasm_exec.js" . 會多出一個wasm_exec.js的文件

go打包成wasm 運行go build -o main.wasm 運行結束后會生成一個名為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("加載出錯了", error)
    })
</script>
</body>
</html>

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

原文鏈接：https://juejin.cn/post/7133612627531399198

欄目分類
最近更新