WebAssembly入门

1.首先科学online，运行以下命令安装wasm

# 下载Emscripten源码
git clone https://github.com/juj/emsdk.git
cd emsdk

# 安装最新版本
./emsdk install latest

# 使用最新版本
./emsdk activate latest

# 添加环境变量
source ./emsdk_env.sh

2.HelloWorld
写个HelloWorld：

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

用下面的命令编译：

注：最新版本的Emscripten默认就会生成.wasm，不需要像以前那样指定“-s WASM=1”了

emcc hello.c -o index.html

编译后的目录文件结构如下：

需要注意的是，生成的index.html直接双击打开是无法运行的，必须运行一个本地的HTTP服务器。通过下面的命令安装http-server：

npm install http-server -g

然后，在当前目录下直接运行HTTP服务器：

最后通过URL访问该网页：http://127.0.0.1:8080/index.html

当然，如果你想把网页搞得更漂亮一点，还可以自定义HTML模版，在emsdk目录中有一个最小版本的HTML模版shell_minimal.html，可以在这个基础上进行修改，然后用下面的命令编译：

emcc hello.c -o index.html --shell-file shell_minimal.html

3.C代码调用Javascript

C代码里可以通过Emscripten中的EM_ASM这个宏调用Javascript代码，注意Javascript代码要放进大括号里。我们把上面的代码改一改，让它蹦一个弹窗：

#include <stdio.h>
#include <emscripten.h>

int main(int argc, char** argv) {
    EM_ASM({ alert("Hello!"); });
    return 0;
}

重新编译、运行的结果如下：

如果运行后发现代码修改没有生效，清理一下浏览器的缓存再重新加载。

4.Javascript调用C代码

Javascript也可以直接调用WebAssembly中定义的函数，需要使用Emscripten中的ccall()函数以及EMSCRIPTEN_KEEPALIVE声明（将你的函数添加到导出的函数列表中，默认只导出main()）。

我们在前面的代码中增加一个自定义函数：

#include <stdio.h>
#include <emscripten.h>

void EMSCRIPTEN_KEEPALIVE myFunction() {
    printf("Good Morning!\n");
}

int main(int argc, char** argv) {
    printf("Hello World!\n");
    return 0;
}

编译的时候要注意，由于ccall()函数默认是不导出的，需要加上一个编译选项：

emcc hello.c -o index.html -s EXTRA_EXPORTED_RUNTIME_METHODS='["ccall"]'

然后在生成的index.html中添加一个按钮，用来调用我们的自定义函数：

<button class="mybutton">Run myFunction</button>

最后在</script>标签之前添加以下代码，响应按钮点击事件：

document.querySelector('.mybutton').addEventListener('click', function(){
  var result = Module.ccall('myFunction', // name of C function 
                             null, // return type
                             null, // argument types
                             null); // arguments
});

最终运行结果：

5.加入source-map调试

还是上面的demo，执行以下命令

emcc hello.c -o index2.html -s EXTRA_EXPORTED_RUNTIME_METHODS='["ccall"]' -g4 --source-map-base http://172.16.2.16:8080/ 

注意source-map-base后面url最后一个字符必须为/
然后在生成的index.html中添加一个按钮，用来调用我们的自定义函数：

<button class="mybutton">Run myFunction</button>

最后在</script>标签之前添加以下代码，响应按钮点击事件：

document.querySelector('.mybutton').addEventListener('click', function(){
  var result = Module.ccall('myFunction', // name of C function 
                             null, // return type
                             null, // argument types
                             null); // arguments
});

启动http-server后chrome打开页面，如下图，我们可以在前端看到c++代码，和运行堆栈，但是不能获取某个变量值，后续知道方法后回来结贴。

本文参考 https://blog.csdn.net/turkeycock/article/details/83317935

如果你也在研究WebAssembly技术，可以加我微信，EagleAndy，备注“wasm”，拉你入群，一起学习进步。
也可以加入slack在线聊天室，一起聊聊wasm!

---