Lei Wang

Go-WebAssembly-入门（二）

系列文章 Go WebAssembly 入门（一） Getting Started 编写 main.go package main import ( "strconv" "syscall/js" ) // 传入value1, value2, result三个元素的id，将value1+value2结果赋给result元素 func add(ids []js.Value) { // 根据id获取输入值 value1 := js.Global().Get("document").Call("getElementById", ids[0].String()).Get("value").String() value2 := js.Global().Get("document").Call("getElementById", ids[1].String()).Get("value").String() int1, _ := strconv.Atoi(value1) int2, _ := strconv.Atoi(value2) // 将相加结果set给result元素 js.Global().Get("document").Call("getElementById", ids[2].String()).Set("value", int1+int2) } // 添加监听事件 func registerCallbacks() { js.Global().Set("add", js.NewCallback(add)) } func main() { c := make(chan struct{}, 0) println("Go WebAssembly Initialized!") registerCallbacks() <-c } 将 main.go 编译成 lib.wasm GOOS=js GOARCH=wasm go build -o lib.wasm main.go 在 index.html 中调用 lib.wasm <html> <head> <meta charset="utf-8"> <script src="wasm_exec.js"></script> <script> if (!WebAssembly.instantiateStreaming) { // polyfill WebAssembly.instantiateStreaming = async (resp, importObject) => { const source = await (await resp).arrayBuffer(); return await WebAssembly.instantiate(source, importObject); }; } const go = new Go(); let mod, inst; WebAssembly.instantiateStreaming(fetch("lib.wasm"), go.importObject).then(async (result) => { mod = result.module; inst = result.instance; await go.run(inst) }); </script> </head> <body> <input type="text" id="value1"/> <input type="text" id="value2"/> <button type="button" id="add" onClick="add('value1', 'value2', 'result');">add</button> <input type="text" id="result"/> </body> </html> 打开 server，在浏览器打开即可调用 WebAssembly 二进制文件执行。 ...

Go-WebAssembly-入门（一）

有关 WebAssembly 的介绍可以参考几张图让你看懂 WebAssembly 简单来说 WebAssembly 就是将其他语言 C/Go/Rust 等语言编译成 wasm 可执行二进制文件，浏览器来执行 wasm。wasm 相比 JS,拥有体积更小，执行更快，因为最终编译成二进制文件，所以一些安全策略代码也更适合 wasm。经过尝试 C 和 Go 分别编写 WebAssembly，相较而言我认为 Go 无论从语言层面还是工具链，用起来都更加方便一些。本文使用原生 go build，生成的 wasm 文件大约在1.4M左右，在生产环境中这个体积是很大的，优化 go 的 wasm 体积可以使用 tinygo 来 build，同样的代码使用 tinygo 构建之后约为22K，甚至比 C 语言构建 wasm 的体积还要小（C 语言 build 后约为44K，不同版本不同环境可能略有差异）。参考https://tinygo.org/ 本文介绍 Go WebAssembly 入门，前提已经安装 Go 1.11 及以上版本。系列文章 Go WebAssembly 入门（二） Getting Started 编辑 main.go package main import "fmt" func main() { fmt.Println("Hello, Go WebAssembly!") } 把 main.go build 成 WebAssembly(简写为 wasm)二进制文件 ...

高性能React数据容器WatermelonDB

简介 WatermelonDB 是 React Native 和 React Web 一种新的数据状态容器，虽然称作 DB 但意义和传统 DB 还是有些区别的，它的作用更像 Redux，同 Redux 类似，WatermelonDB 也是单一数据源原则，并且数据流单向的形式，UI 会根据记录的变化而相应的改变。 WatermelonDB 比 Redux 的优势在于，对于数据记录较大的 React 应用，能提供更好的性能表现。同时 WatermelonDB 也能比 Redux 更友好的管理数据流。示例首先，定义 Models class Post extends Model { @field('name') name @field('body') body @children('comments') comments } class Comment extends Model { @field('body') body @field('author') author } 然后 connect 数据到 components（和 Redux connect 比较像） const Comment = ({ comment }) => ( <View style={styles.commentBox}> <Text>{comment.body} — by {comment.author}</Text> </View> ) // This is how you make your app reactive! ✨ const enhance = withObservables(['comment'], ({ comment }) => ({ comment: comment.observe() })) const EnhancedComment = enhance(Comment) render ...

Mac修改esc键位映射

MacBook Pro 的 touch bar 上的 esc 体验很差，尤其在频繁使用 vim 的时候，esc 不能给任何反馈，用着很不舒服。下面介绍两种方式用其它按键映射 esc(escape). 方法一通过 Mac 自带方式 System Preferences - Keyboard - Modifier Keys 通过上面操作可以修改其它按键为 escape 按键。此方法的缺点是不太灵活，例如选择将 option 改为 escape 时，不能选择左右，变更为 escape 后，则不能使用 option。方法二使用 Karabiner(KeyRemap4MacBook) 下载链接： https://pqrs.org/osx/karabiner/ 将“右 option”改为“escape”(如图)，这样使用 escape(右 option)的同时，还保留了 option(左)自身的功能。

RSA-SHA256-非对称签名与验证-sign-verify----JavaScript,-Ruby,-Golang

RSA 主要用法公钥加密(encrypt)，私钥解密(decrypt) 私钥签名(sign)，公钥验证(verify) 网上讲述 RSA 原理的文字很多，很少涉及签名验证的实现。第一种比较常见，本文主要是第二种方法的实现(JavaScript, Ruby, Golang)。本文的 signature 最终结果都为 hex。 JavaScript sign import { KJUR } from 'jsrsasign' const msg = "hello world" const privateKey = "-----BEGIN RSA PRIVATE KEY-----(your private key)" const sig = new KJUR.crypto.Signature({ "alg": "SHA256withRSA" }); sig.init(privateKey); sig.updateString(msg) const signatureHex = sig.sign() verify const publicKey = "-----BEGIN PUBLIC KEY-----(your public key)" const sig2 = new KJUR.crypto.Signature({"alg": "SHA256withRSA"}); sig2.init(publicKey); sig2.updateString(msg) const isValid = sig2.verify(signatureHex) Ruby sign ...

SSL双向验证-Nginx反向代理docker-sock

不做验证的代理（不安全、可内网使用） nginx 的用户 www-data 在组 www-data 中，而 docker.sock 的用户在 docker 组中，所以需要将 www-data 添加到 docker 组中 sudo usermod -a -G www-data,docker www-data 查看用户以及组 compgen -u compgen -g nginx 的配置 server { listen 23750; location / { proxy_pass http://unix:/var/run/docker.sock:/; } } 重启 nginx 即可。做验证的代理（外网暴露安全）按照https://docs.docker.com/engine/security/https/#create-a-ca-server-and-client-keys-with-openssl生成ca证书以及RSA证书 ca-key.pem ca.pem cert.pem key.pem server-cert.pem server-key.pem 配置 nginx 证书，ssl_verify_client 与 ssl_client_certificate 实现验证客户端，如客户端没有自签私钥则不能访问。 server { listen 23760; ssl on; ssl_certificate /home/deployer/docker-ca/server-cert.pem; ssl_certificate_key /home/deployer/docker-ca/server-key.pem; ssl_client_certificate /home/deployer/docker-ca/ca.pem; ssl_verify_client on; ssl_protocols TLSv1 TLSv1.1 TLSv1.2 SSLv3; ssl_ciphers HIGH:!aNULL:!MD5; location = / { return 502 ''; } location / { proxy_pass http://unix:/var/run/docker.sock:/; } } 重启 nginx。在客户端中加入证书验证。 ...