<h1 id="-go-webassembly-">使用 Go WebAssembly 实现密码学前端应用</h1>
<a href="https://www.oyohyee.com/apps/crypto">在线密码工具</a>
<h2 id="webassembly">WebAssembly</h2>
简称 WASM，是继 JavaScript 之后，下一个可以由浏览器直接解析的规范
WebAssembly 一个很重要的突破是允许直接在浏览器中运行二进制的字节码。因此，可以在编译前进行类型检查，加速运行速度。 
同时，相对于基于文本的 JavaScript，WebAssembly 为二进制内容，可以降低要传输的文件大小
因此使用 WebAssembly 可以加速代码的执行效率。同时由于 WebAssembly 可以直接操作 DOM，因此原理上完全可以使用纯 C/C++、Go、Rust 写前端！ 
当然，实际使用中使用后端语言操纵 DOM 的意义可能并不大
另外要注意的是，虽然 WebAssembly 需要编译，但是与 C/C++、Go、Rust 相比，其更类似于 Java，需要运行在浏览器虚拟机中（当然，也可以直接把浏览器看成一个系统，不过没有一些原生应用权限）
<h2 id="go_wasm">Go WebAssembly</h2>
使用 Go 开发 WebAssembly，只需要修改环境变量即可
类似于在 Linux 编译 Windows 应用，只需要修改编译时的环境变量即可
<pre style="background-color:#fff">GOARCH=wasm GOOS=js go build -o main.wasm main.go
</pre>编译出的文件<code>main.wasm</code>就是需要的文件
不过，目前 Go 编译出的文件需要<code>wasm_exec.js</code>进行引导，并不能直接运行（未来可能会更新）
直接使用 Go 编译出的文件，大小大概为 2M 左右，而使用 tinyGo 编译出的只有 10+K，相对于更适合于实际使用
目前 Go 还不支持将函数导出至 <code>instance.exports</code><a href="#fn:1" class="footnote-ref" role="doc-noteref">1</a>，因此需要采用将要输出的函数和变量直接设置成 <code>window.global</code> 的成员来迂回实现。
同时，在这里还要求 Go(WASM) 类似于服务端保持运行，而非类似于普通的模块引入。 
这里运行并非执行一个 Go 程序，而是保证 WASM 模块激活，比如在<code>main()</code>函数中，使用死循环或通道来保证不会结束，从而确保 Go WASM 时刻保留在内存中。
<h3 id="export">将 Go 程序导出为 WebAssembly</h3>
使用下面的语句，即可导出变量和函数
<pre style="background-color:#fff">js.Global().Set(&#34;key&#34;, &#34;123456&#34;)
js.Global().Set(&#34;sum&#34;, js.FuncOf(
 func(this js.Value, args []js.Value) interface{} {
 // xxx
 },
))
</pre><h3 id="types">类型转换</h3>
将已经实现好的代码导出，主要的工作在于类型的转换
大部分的类型都可以自动转换，如果需要显式的 Go 转换到 JavaScript，可以使用<code>js.ValueOf()</code>来转换
<table>
<thead>
<tr>
<th>Go</th>
<th>JavaScript</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>js.Value</code></td>
<td>[its value]</td>
</tr>
<tr>
<td><code>js.Func</code></td>
<td><code>function</code></td>
</tr>
<tr>
<td><code>nil</code></td>
<td><code>null</code></td>
</tr>
<tr>
<td><code>bool</code></td>
<td><code>boolean</code></td>
</tr>
<tr>
<td><code>int</code>,<code>uint</code>,<code>floats</code></td>
<td><code>number</code></td>
</tr>
<tr>
<td><code>string</code></td>
<td><code>string</code></td>
</tr>
<tr>
<td><code>[]interface{}</code></td>
<td><code>new array</code></td>
</tr>
<tr>
<td><code>map[string]interface{}</code></td>
<td><code>new object</code></td>
</tr>
</tbody>
</table>
在这里，虽然有<code>interface{}</code>，但是实际上并不包括所有的 Go 类型，如：<code>struct</code>、<code>byte</code>、<code>rune</code>
对于<code>struct</code>类型，要先将其转换为<code>map[string]interface{}</code>，才能输出成 JavaScript 能识别的类型（否则会导致 panic） 
而对于<code>rune</code>，则要先转换为<code>string</code>
对于底层常用的<code>[]byte</code>，则要使用专有的函数将其转换为<code>Uint8Array</code>
<pre style="background-color:#fff">src := js.Global().Get(&#34;Uint8Array&#34;).New(len(bytes))
js.CopyBytesToJS(src, bytes)
</pre>而反向将<code>Uint8Array</code>转换为<code>[]byte</code>，则使用
<pre style="background-color:#fff">dst := make([]byte, args[0].Length())
js.CopyBytesToGo(dst, args[0])
</pre>在这部分，需要特别注意的是：一定要初始化需要的长度
<h3 id="go_package">Go 封装</h3>
将上述过程，封装成<a href="https://github.com/OhYee/wasm">OhYee/wasm</a> 
可以简单地实现函数的输出，并且借助下面的 js 模块即可方便地调用
<h3 id="js_package">JS 封装</h3>
<pre style="background-color:#fff">export interface WASMFuncReturn&lt;T&gt; {
 success: string;
 return: T;
}
export interface WASMPackage&lt;T&gt; {
 exports: T;
 exit: () =&gt; void;
}

async function initialWASM&lt;T&gt;(
 url: string,
 pkgName: string,
 callback?: () =&gt; void,
): Promise&lt;WASMPackage&lt;T&gt;&gt; {
 if (!WebAssembly.instantiateStreaming) {
 // polyfill
 WebAssembly.instantiateStreaming = async (
 resp: Promise&lt;Response&gt;,
 importObject: Record&lt;string, Record&lt;string, WebAssembly.ImportValue&gt;&gt;,
 ) =&gt; {
 const source = await (await resp).arrayBuffer();
 return await WebAssembly.instantiate(source, importObject);
 };
 }

 const go = new (window.global as any).Go();
 let mod, inst;
 try {
 const result = await WebAssembly.instantiateStreaming(fetch(url), go.importObject);
 mod = result.module;
 inst = result.instance;
 go.run(inst);
 return (window.global as any)[pkgName];
 } catch (err) {
 console.error(err);
 if (!!callback) callback();
 throw err;
 }
}

export default initialWASM;
</pre><h2 id="heading">参考资料</h2>
<section class="footnotes" role="doc-endnotes">
<hr>
<ol>
<li id="fn:1" role="doc-endnote">
<a href="https://github.com/golang/go/issues/25612">wasm: re-use //export mechanism for exporting identifiers within wasm modules</a> <a href="#fnref:1" class="footnote-backref" role="doc-backlink">&#x21a9;&#xfe0e;</a>
</li>
</ol>
</section>