go语言打包的网页wasm示例详解
更新时间：2022年09月02日 15:15:45 作者：飘逸者
这篇文章主要为大家介绍了go打包网页wasm示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪<BR>
基本环境
有时需要做一些前端的数据处理，但是又不想把数据出来的方式就这么简单的暴露在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>
然后刷新浏览器就能看到这么一个界面
以上就是go打包网页wasm示例详解的详细内容，更多关于go打包网页wasm的资料请关注脚本之家其它相关文章！
相关文章
gin自定义中间件解决requestBody不可重读(请求体取值)
这篇文章主要介绍了gin自定义中间件解决requestBody不可重读,确保控制器能够获取请求体值,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-10-10
这篇文章主要介绍了golang生成vcf通讯录格式文件详情，VCF是通讯录格式文件，一般需要用手机通讯录导入导出的文件格式都是vcf格式。下面详细内容介绍需要的小伙伴可以参考一下2022-03-03
这篇文章主要介绍了Go实现基于RSA加密算法的接口鉴权，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-06-06
这篇文章主要介绍了Go语言实现顺序存储的线性表的方法,实例分析了Go语言实现线性表的定义、插入、删除元素等的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-03-03
这篇文章主要介绍了Go语言计算指定年月天数的方法,实例分析了Go语言操作时间的技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-02-02
这篇文章主要介绍了Guam与golang recover()的使用方法，Recover 是一个Go语言的内建函数，可以让进入宕机流程中的 goroutine 恢复过来，下文更多相关资料需要的小伙伴可以参考一下2022-04-04
这篇文章主要介绍了golang的HTTP基本认证机制,结合实例形式较为详细的分析了HTTP请求响应的过程及认证机制实现技巧,需要的朋友可以参考下2016-07-07
这篇文章主要为大家介绍了go语言用八百行代码实现一个JSON解析器实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
这篇文章主要为大家介绍了Go中Gzip与json搭配使用压缩数据的实现demo，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-05-05
本文主要介绍了Golang动态调用方法小结，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-12-12
最新评论