簡單的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。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM