欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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è)界面

以上就是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)求體取值)

    這篇文章主要介紹了gin自定義中間件解決requestBody不可重讀,確??刂破髂軌颢@取請(qǐng)求體值,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-10-10
  • golang生成vcf通訊錄格式文件詳情

    golang生成vcf通訊錄格式文件詳情

    這篇文章主要介紹了golang生成vcf通訊錄格式文件詳情,?VCF是通訊錄格式文件,一般需要用手機(jī)通訊錄導(dǎo)入導(dǎo)出的文件格式都是vcf格式。?下面詳細(xì)內(nèi)容介紹需要的小伙伴可以參考一下
    2022-03-03
  • Go實(shí)現(xiàn)基于RSA加密算法的接口鑒權(quán)

    Go實(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-06
  • Go語(yǔ)言實(shí)現(xiàn)順序存儲(chǔ)的線(xiàn)性表實(shí)例

    Go語(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-03
  • Go語(yǔ)言計(jì)算指定年月天數(shù)的方法

    Go語(yǔ)言計(jì)算指定年月天數(shù)的方法

    這篇文章主要介紹了Go語(yǔ)言計(jì)算指定年月天數(shù)的方法,實(shí)例分析了Go語(yǔ)言操作時(shí)間的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
    2015-02-02
  • golang?中?recover()的使用方法

    golang?中?recover()的使用方法

    這篇文章主要介紹了Guam與golang??recover()的使用方法,Recover?是一個(gè)Go語(yǔ)言的內(nèi)建函數(shù),可以讓進(jìn)入宕機(jī)流程中的?goroutine?恢復(fù)過(guò)來(lái),下文更多相關(guān)資料需要的小伙伴可以參考一下
    2022-04-04
  • golang的HTTP基本認(rèn)證機(jī)制實(shí)例詳解

    golang的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-07
  • go語(yǔ)言用八百行代碼實(shí)現(xiàn)一個(gè)JSON解析器

    go語(yǔ)言用八百行代碼實(shí)現(xiàn)一個(gè)JSON解析器

    這篇文章主要為大家介紹了go語(yǔ)言用八百行代碼實(shí)現(xiàn)一個(gè)JSON解析器實(shí)例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-07-07
  • Go中Gzip與json搭配實(shí)現(xiàn)數(shù)據(jù)壓縮demo

    Go中Gzip與json搭配實(shí)現(xiàn)數(shù)據(jù)壓縮demo

    這篇文章主要為大家介紹了Go中Gzip與json搭配使用壓縮數(shù)據(jù)的實(shí)現(xiàn)demo,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-05-05
  • Golang動(dòng)態(tài)調(diào)用方法小結(jié)

    Golang動(dòng)態(tài)調(diào)用方法小結(jié)

    本文主要介紹了Golang動(dòng)態(tài)調(diào)用方法小結(jié),文中通過(guò)示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2021-12-12

最新評(píng)論