尝试 WebAssembly

wasm 为浏览器应用开辟了一个全新的领域。意义非凡，并不是一句两句说的清的，今天正好有点空做些实验。

1. emsdk 的安装

Emscripten 可以直接将 C/C++ 编译为 wasm，让用 C 写的代码可以在浏览器中运行，还是看不见代码那种 :)

没有过多纠结他怎么打包的，反正直接从 github 上下了最新的源码包过来就可以用了：

download emsdk-master.zip

unzip emsdk-master.zip

cd emsdk-master

( emsdk-master update )

emsdk install latest

emsdk activate latest

然后添加 emsdk 的环境变量，我这里直接追加在了 ~/.bashrc 的最后：

. (前面解压的路径)/emsdk-master/emsdk_env.sh

或者你可以把 env.sh 里面的内容直接拷贝到 .bashrc 里面去。

------

到此 emsdk 安装完成。

------

如果中间出什么问题，估计是你系统的编译工具啥的安装不完整导致的：

sudo apt update
sudo apt install python2.7 nodejs build-essential cmake git-core default-jre

2. hello_world.html

是的，emsdk 支持直接把你的 C 代码编译成一个 html 文件。主要是因为 wasm 没法直接在浏览器运行，需要 js 将其载入，再调用啥的。直接使用官方的编译为 *.html 的方法，可以降低入门门槛。

使用的 C 代码：

#include <stdio.h>
int main(int argc, char ** argv) {
  printf("Hello, world!\n");
}

编译指令：

emcc hello.c -o hello.html

因为这里没法直接点解 hello.html 来运行 wasm，所以，需要起个 web 服务器。所幸是 emsdk 还带了个服务器：

emrun --no_browser --port 8800 .

或者你也可以直接使用 python3 的 web 服务器：

python3 -m http.server 8800

然后，在你的浏览器里面就可以看到这结果了。

2. 自己写加载器

官方的这个 html 真的是有点丑，我们也可以自己写个加载器，将 wasm 中的函数加载过来。

测试的 C 函数：

 1 int fib(int n) {
  2     int i;
  3     int t;
  4     int a = 0;
  5     int b = 1;
  6 
  7     for(i = 0; i < n; i++) {
  8         t = a + b;
  9         a = b;
 10         b = t;
 11     }
 12 
 13     return b;
 14 }

将其编译为 wasm 模块（别问我为什么，官方说的，我也没研究为啥）：

emcc fib.c -Os -s WASM=1 -s SIDE_MODULE=1 -o fib.wasm

然后我们就可以自己写个网页来加载它了：

<html>
<body>
  <script>
    fetch('fib.wasm').then(response =>
      response.arrayBuffer()
    ).then(bytes =>
      WebAssembly.instantiate(bytes, {imports: {}})
    ).then(results => {
      window.fib = results.instance.exports.fib;
    });
  </script>
</body>
</html>

开启 web 服务器，然后打开浏览器试试看。

因为上面的代码只是引入 wasm 中的函数到 javascript，所以我们要执行这个函数需要打开调试 console：

猜你喜欢