使用Emscripten进行WebAssembly web开发
测试源代码
math.c内容如下：
#include <stdio.h> int add(int a, int b) { return a+b; } int mul(int a, int b) { return a*b; } void Test(int a, int b) { int r1 = add(a, b); int r2 = mul(a, b); printf("%d + %d = %d \n", a, b, r1); printf("%d x %d = %d \n", a, b, r2); } int main() { printf("This is %s \n", __FILE__); return 0; }
test.cpp内容如下：
#include <stdio.h> extern "C" int max(int a, int b) { printf("[max] a=%d, b=%d \n", a, b); return a < b ? b : a; } int main() { printf("hello world! \n"); return 0; }
使用em生成WebAssembly
安装emscripten
# Get the emsdk repo git clone https://github.com/emscripten-core/emsdk.git # Enter that directory cd emsdk # Download and install the latest SDK tools. emsdk.bat install latest # linux或mac上 ./emsdk install latest # Make the "latest" SDK "active" for the current user. (writes .emscripten file) emsdk.bat activate latest # linux或mac上 ./emsdk activate latest
使用em生成wasm和js胶水代码
@echo off call G:\svn\emsdk\emsdk_env.bat // 设置当前emcc运行环境 call emcc.bat -v // 查看当前emcc版本号 call emcc.bat math.c -O3 -o math.js -s "EXPORTED_FUNCTIONS=['_add','_mul', '_Test']" // 生成math.wasm和wath.js胶水代码 注：带-O3开启优化，通过-s EXPORTED_FUNCTIONS来指定要导出的函数 call em++.bat test.cpp -O3 -o test.js -s "EXPORTED_FUNCTIONS=['_max']" // 生成test.wasm和math.js胶水代码 注：带-O3开启优化，通过-s EXPORTED_FUNCTIONS来指定要导出的函数
注1：更多工具详见emsdk\upstream\emscripten和emsdk\upstream\bin目录
注2：生成的wasm只能在浏览器中运行，不能在独立的WebAssembly Runtime中运行，会报错
在index.html中插入math.js，并调用math.c中的add函数
index.html内容如下：
<!DOCTYPE html> <head> <meta charset="utf-8"> <title>WebAssembly Add example</title> <style> div { font-size : 30px; text-align : center; color:blue; } </style> </head> <body> <div id="textcontent"></div> <script type="text/javascript" src="math.js"></script> <script> // math.wasm初始化成功后，会回调执行Module.onRuntimeInitialized函数 Module.onRuntimeInitialized = function() { document.getElementById("textcontent").innerHTML = Module._add(3, 6); // 调用wath.wasm模块中的add函数 } </script> </body> </html>
注：导入math.js即可自动完成math.wasm载入、实例化、运行时初始化等繁杂的工作
使用emrun启动http服务器
在当前目录F:\wasmTest下，执行exec.bat脚本，来使用emrun启动http服务器
exec.bat脚本内容如下：
@echo off call G:\svn\emsdk\emsdk_env.bat call emrun.bat --no_browser --port 8080 .
执行后，会打印如下log：
Web server root directory: F:\wasmTest Now listening at http://0.0.0.0:8080/
访问本地http服务器
打开chrome浏览器，访问http://localhost:8080/index.html
参考
面向前端同学的 Emscripten WebAssembly 介绍（一）
