go語言打包的網(wǎng)頁wasm示例詳解
基本環(huán)境
有時需要做一些前端的數(shù)據(jù)處理,但是又不想把數(shù)據(jù)出來的方式就這么簡單的暴露在js里,然后就用了wasm來包裝這個處理函數(shù),當然,這樣也能提高性能。
新建文件 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
需要配置環(huán)境變量為 win 下設置 cmd運行 set GOOS=js
set GOARCH=wasm
生成必要文件(cmd會報錯 powershell可以執(zhí)行) 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>
然后刷新瀏覽器就能看到這么一個界面
以上就是go打包網(wǎng)頁wasm示例詳解的詳細內容,更多關于go打包網(wǎng)頁wasm的資料請關注腳本之家其它相關文章!
相關文章
gin自定義中間件解決requestBody不可重讀(請求體取值)
這篇文章主要介紹了gin自定義中間件解決requestBody不可重讀,確保控制器能夠獲取請求體值,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-10-10Go中Gzip與json搭配實現(xiàn)數(shù)據(jù)壓縮demo
這篇文章主要為大家介紹了Go中Gzip與json搭配使用壓縮數(shù)據(jù)的實現(xiàn)demo,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-05-05