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。