简单的WebAssembly应用搭建

 

1      WebAssembly简介

WebAssembly是一种新兴的Web技术,网上的资料并不是很多,简单的可以理解为让C/C++程序运行在浏览器上,官网上用四个词来描述该技术:高效、安全、开放、标准。

1.1      高效

C/C++代码被编译成.wasm的二进制格式文件,其目标是充分发挥硬件能力已达到原生执行效率。

1.2      安全

WebAssembly应用运行在一个沙箱化的环境中,对外只暴露特定的接口,并且在Web环境中,WebAssembly将会严格遵守浏览器的一些安全策略。

1.3      开放

.wasm文件是二进制格式文件,不便于理解,但WebAssembly在将来可以直接通过浏览器查看wasm模块的源码。

1.4      标准

WebAssembly可以被JavaScript调用,同时也可以像WebAPI一样调用浏览器的功能。

2      工具安装

编写WebAssembly应用所需的工具比较多,主要包含有浏览器(新版的chrome、firefox)、C/C++开发环境、Web环境、Emscripten编译器。这里面最麻烦的就是Emscripten编译器的安装,Emscripten是把C/C++程序编译成浏览器运行的wasm文件以及对应的JS代码的编译器,主要有两种安装方式(已windows环境为例):

2.1      在线安装

在线安装比较容易出错,需要安装git并能访问github开源社区,参考官网:http://kripken.github.io/emscripten-site/docs/getting_started/downloads.html,步骤如下:

2.1.1        克隆emsdk仓库

git clone https://github.com/juj/emsdk.git,这一步容易报Timed out错误:

可以参考w3上面的解决方法:http://3ms.huawei.com/hi/group/1503847/thread_5329623.html?mapId=6456777&t_type=ask

2.1.2        安装工具

cd emsdk           // 定位到emsdk文件夹

emsdk update       // 执行更新

emsdk install latest   // 安装各种工具

emsdk activate latest  // 生成.emscripten文件,激活配置

2.2      离线安装

离线安装比较简单,在官网http://kripken.github.io/emscripten-site/docs/getting_started/downloads.html下载离线包emsdk-1.35.0-full-64bit.exe,里面集成了所需的各种工具,如clang、node、python、emscripten等,下载完成后直接运行就可以完成上述软件的安装,安装完成后的目录结构如下:

 

2.2.1        验证安装结果

打开cmd,输入emcc –v,提示如下信息则表示安装成功:

 

       如果提示emcc不是内部或外部命令,去检查一下.emscripten文件,.emscripten文件在当前用户所在的文件夹中(C:\Users\你的用户名),正常安装后的内容为:

 

3      应用搭建

3.1      编写C/C++程序

 

代码说明如下:

1、  当对应的js文件被加载时,main方法自动执行,printf翻译成console.log;

2、  EMSCRIPTEN_KEEPALIVE修饰的方法表示是要导出的方法,这些方法才能生成对应的API,供js调用,API名一般为下划线+方法名,即是说_addTest、_subTest。

3.2      编译.c文件为js代码

打开cmd,输入以下指令:emcc index.c –s WASM=1 –O3 –o index.js,参数解释如下:

1、emcc:代表Emscripten编译器;

2、index.c:C代码的文件;

3、-s WASM=1:指定使用WebAssembly;

4、-O3:代码优化级别;

5、-o index.js:生成wasm模块的全部文件,包含.wasm文件和.js文件等。

emcc参数的详细说明可以参考官网介绍:http://kripken.github.io/emscripten-site/docs/tools_reference/emcc.html#emccdoc

编译结果如下:

 

包含如下文件:

 

3.3      搭建Web运行环境

3.3.1        目录结果

 

3.3.2        index.html代码

 

3.3.3        index.js代码

在emscripten编译的index.js代码基础上增加如下代码:

 

3.3.4        页面效果

浏览器访问对应的地址,点击等号,能完成_addTest()和_subTest()方法的调用,页面如下:

 

3.4      总结

上述应用,通过一个简单的例子实现了通过浏览器来执行C/C++代码,WebAssembly API的具体介绍可以参考官网:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly。

原文地址:https://www.cnblogs.com/gongxianjin/p/15581543.html