go語(yǔ)言打包的網(wǎng)頁(yè)wasm示例詳解
基本環(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è)界面
以上就是go打包網(wǎng)頁(yè)wasm示例詳解的詳細(xì)內(nèi)容,更多關(guān)于go打包網(wǎng)頁(yè)wasm的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
gin自定義中間件解決requestBody不可重讀(請(qǐng)求體取值)
這篇文章主要介紹了gin自定義中間件解決requestBody不可重讀,確??刂破髂軌颢@取請(qǐng)求體值,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-10-10Go實(shí)現(xiàn)基于RSA加密算法的接口鑒權(quán)
這篇文章主要介紹了Go實(shí)現(xiàn)基于RSA加密算法的接口鑒權(quán),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-06-06Go語(yǔ)言實(shí)現(xiàn)順序存儲(chǔ)的線(xiàn)性表實(shí)例
這篇文章主要介紹了Go語(yǔ)言實(shí)現(xiàn)順序存儲(chǔ)的線(xiàn)性表的方法,實(shí)例分析了Go語(yǔ)言實(shí)現(xiàn)線(xiàn)性表的定義、插入、刪除元素等的使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03golang的HTTP基本認(rèn)證機(jī)制實(shí)例詳解
這篇文章主要介紹了golang的HTTP基本認(rèn)證機(jī)制,結(jié)合實(shí)例形式較為詳細(xì)的分析了HTTP請(qǐng)求響應(yīng)的過(guò)程及認(rèn)證機(jī)制實(shí)現(xiàn)技巧,需要的朋友可以參考下2016-07-07go語(yǔ)言用八百行代碼實(shí)現(xiàn)一個(gè)JSON解析器
這篇文章主要為大家介紹了go語(yǔ)言用八百行代碼實(shí)現(xiàn)一個(gè)JSON解析器實(shí)例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-07-07Go中Gzip與json搭配實(shí)現(xiàn)數(shù)據(jù)壓縮demo
這篇文章主要為大家介紹了Go中Gzip與json搭配使用壓縮數(shù)據(jù)的實(shí)現(xiàn)demo,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-05-05Golang動(dòng)態(tài)調(diào)用方法小結(jié)
本文主要介紹了Golang動(dòng)態(tài)調(diào)用方法小結(jié),文中通過(guò)示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-12-12