go写webasmbly

环境

golang
javascript
tinygo

上代码

golang

package main

import (
	"crypto/md5"
	"encoding/hex"
	"fmt"
	"strings"
	"syscall/js"
)

//go:export add
func add(x, y int) int {
	return x + y
}

const salt = "ftmsabcd@1234!"

// 对字符串做签名
func sign(this js.Value, args []js.Value) interface{} {
	fmt.Println("============== begin")
	fmt.Println(args[0].String()) // 入参
	b := []byte(args[0].String())
	s := []byte(salt)
	h := md5.New()
	h.Write(s) // 先写盐值
	h.Write(b)
	result := hex.EncodeToString(h.Sum(nil))
	fmt.Println(result)
	fmt.Println("============== end")
	return result
}

func main() {
	fmt.Println("hello wasm ...")
	
	// 注册到全局
	js.Global().Set("sign", js.FuncOf(sign))

	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)
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

编译go代码->wasm

tinygo build -o main-tiny.wasm
1

拷贝到wasm桥到当前目录

cp "$(tinygo env TINYGOROOT)/targets/wasm_exec.js" ./wasm_exec_tiny.js
1

html

DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Wasm Demotitle>
  <script src="./wasm_exec_tiny.js">script>
head>

<body>

  <script>
    // polyfill
    if (!WebAssembly.instantiateStreaming) {
      WebAssembly.instantiateStreaming = async (resp, importObject) => {
        const source = await (await resp).arrayBuffer()
        return await WebAssembly.instantiate(source, importObject)
      }
    }

    function loadWasm (path) {
      const go = new Go()
		
	  // 解决浏览器控制台报错
      go.importObject.env["syscall/js.finalizeRef"] = () => { }

      return new Promise((resolve, reject) => {
        WebAssembly.instantiateStreaming(fetch(path), go.importObject)
          .then(result => {
            go.run(result.instance)
            resolve(result.instance)
          })
          .catch(error => {
            reject(error)
          })
      })
    }

    loadWasm("main-tiny.wasm").then(wasm => {
      const o = {
        name: 'adley',
        age: 18,
        data: [12, 32, 'dasd']
      }

      console.log(sign(JSON.stringify(o)))
    }).catch(error => {
      console.log("ouch", error)
    }) 
  script>
body>

html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

【参考链接】

相关阅读:
redis数据库的下载安装/免安装版
Java 枚举(enum)学习笔记
栈的OJ一小道--＞Leetcode有效的括号
continue和break的区别与用法
【Java实现】链表中倒数第k个结点
ECharts数据可视化项目【6】
【b站咸虾米】chapter5_uniapp-API_新课uniapp零基础入门到项目打包（微信小程序/H5/vue/安卓apk）全掌握
java计算机毕业设计学生勤工助学管理系统源程序+mysql+系统+lw文档+远程调试
【无标题】
C/C++空格分开输出 2019年12月电子学会青少年软件编程（C/C++）等级考试一级真题答案解析

原文地址：https://blog.csdn.net/adley_app/article/details/125893793