go语言打包的网页wasm示例详解

2024-04-02 19:04:59 351人浏览独家记忆

摘要

目录基本环境wasm部分基本环境有时需要做一些前端的数据处理，但是又不想把数据出来的方式就这么简单的暴露在js里，然后就用了wasm来包装这个处理函数，当然，这样也能提高性能。新

基本环境

有时需要做一些前端的数据处理，但是又不想把数据出来的方式就这么简单的暴露在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的资料请关注编程网其它相关文章！

您可能感兴趣的文档:

Go语言（Golang）教程

--结束END--

本文标题: go语言打包的网页wasm示例详解

本文链接: https://lsjlt.com/news/121168.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

猜你喜欢

go语言打包的网页wasm示例详解

目录基本环境wasm部分基本环境有时需要做一些前端的数据处理，但是又不想把数据出来的方式就这么简单的暴露在js里，然后就用了wasm来包装这个处理函数，当然，这样也能提高性能。新...

99+

2024-04-02
Go语言中io包核心接口示例详解

目录前言ReaderWriterCloserSeeker组合接口总结前言 IO 操作是我们在编程中不可避免会遇到的，例如读写文件，Go语言的 io 包中提供了相关的接口，定义了...

99+

2022-06-07

io GO 示例 go语言接口
Go语言func匿名函数闭包示例详解

目录前言定义函数也可以作为函数的参数函数作为函数的返回值匿名函数闭包总结前言今天继续为大家更新Go语言学习记录的文章。函数是任何一门编程语言最重要的组成部分之一。函数简单理解是一...

99+

2024-04-02
Go语言基础闭包的原理分析示例详解

目录一. 闭包概述二. 代码演示运行结果代码说明一. 闭包概述闭包就是解决局部变量不能被外部访问的一种解决方案闭包是把函数当作返回值的一种应用二. 代码演示...

99+

2024-04-02
Go语言单例模式示例详解

目录简单单例模式加锁的单例模式双check 的单例模式sync.Once 的单例模式简单单例模式单例模式是创建类型的模式，它是为了保证执行期间内只有一个实例。使用 Golang 指...

99+

2024-04-02
GO语言中打包HTTP文件的步骤详解！

GO语言是一种快速的编程语言，适用于构建高性能的网络应用程序。在网络应用程序中，HTTP文件是一个必不可少的组成部分。在本文中，我们将深入探讨如何使用GO语言打包HTTP文件的步骤。导入必要的包在GO语言中，我们需要导入以下的包来...

99+

2023-06-24

http 打包文件
Go语言题解LeetCode1260二维网格迁移示例详解

目录题目描述示例 1：示例 2：示例 3：思路分析AC 代码题目描述 1260. 二维网格迁移 - 力扣（LeetCode）给你一个 m 行 n 列的二维网格&nbs...

99+

2023-01-05

Go语言二维网格迁移 Go LeetCode
go语言的变量定义示例详解

目录前言定义单个变量定义多个变量定义相同类型的多个变量变量的初始化变量类型的省略var关键字的省略（简短声明）全局变量与局部变量特别的变量名未使用变量的限制常量前言特别说明: 本文...

99+

2022-12-20

go语言变量定义 go 变量
Go语言中的闭包详解

一、函数的变量作用域和可见性 1.全局变量在main函数执行之前初始化，全局可见 2.局部变量在函数内部或者if、for等语句块有效，使用之后外部不可见 3.全局变量和局部变量同名的...

99+

2024-04-02
Go语言中的包Package详解

问题一、Go使用Package组织源码的好处是什么？ 1.任何源码属于一个包 2.用包组织便于代码的易读和复用问题二、Go语言中Package的种类 Go语言中存在两种包、一种是可...

99+

2024-04-02
go语言http模型reactor示例详解

目录示例initListenerserveactivateEventLoops前面说了go自带的原生netpoll模型，大致的流程就是每一个新的连接都会开启一个goroutine去处...

99+

2023-01-04

go http模型reactor go reactor模型 go reactor
Go语言基础反射示例详解

目录概述语法一、基本操作二、修改目标对象三、动态调用方法总结示例概述在程序运行期对程序动态的进行访问和修改 reflect godoc: https://golang.org/p...

99+

2024-04-02
go语言题解LeetCode66加一示例详解

目录题目描述思路分析AC 代码小结JavaScript 66题代码python3 循环判断分析：JAVA解决进位问题解题思路代码题目描述原题链接 : 66. 加一给定一个由整数...

99+

2022-12-30

go题解LeetCode66加一 go LeetCode66
Go语言包和包管理详解

目录1 包简介1.1 工作空间1.2 源文件1.3 包命名1.4 main 包2导包2.1 两种方式2.2 包的别名2.3 简洁模式2.4非导入模式(匿名导入)2.5 导包的路径2....

99+

2024-04-02
Go语言中循环语句使用的示例详解

目录一、概述1. 循环控制语句2. 无限循环二、Go 语言 for 循环1. 语法2. for语句执行过程3. 示例4. For-each range 循环三、循环嵌套1. 语法2....

99+

2024-04-02
Go语言基础go接口用法示例详解

目录概述语法定义接口实现接口空接口接口的组合总结概述 Go 语言中的接口就是方法签名的集合，接口只有声明，没有实现，不包含变量。语法定义接口 type [接口名] inte...

99+

2024-04-02
Go语言LeetCode500键盘行题解示例详解

目录题目描述思路分析AC 代码哈希表判断字符是否出现在某一行中解题思路代码题目描述原题链接 : 500. 键盘行 - 力扣（LeetCode） (leetcode-cn.com...

99+

2022-12-30

Go语言题解键盘行 Go LeetCode
go语言reflect.Type 和 reflect.Value 应用示例详解

目录一、使用 reflect.Type 创建实例二、使用 reflect.Value 调用函数一、使用 reflect.Type 创建实例在通过 reflect.TypeOf 函数...

99+

2024-04-02
Go语言字符串基础示例详解

目录包含Contains(s,substr string) boolContainsAny(s, chars string) bool统计Count(s, substr string...

99+

2024-04-02
Go语言sort包函数使用示例

目录sort包简介sort包内置函数sort.Ints(x []int)sort.Slice(x any, less func(i, j int) bool)sort.Sort...

99+

2022-06-07

GO 示例函数 sort