面向 WebAssembly 編程：應用開發方法與實踐

丁爾男

WebAssembly技術專家，WebAssembly的先驅者和佈道者，
率先將WebAssembly技術引入實際工程中，合著有《WebAssembly標准入門》。
長期從事三維地理信息系統軟件開發工作，現任武漢航天遠景科技股份有限公司應用技術總監，
領導開發了3DMatrix系列產品及實景三維應用整體解決方案。

柴樹杉

WebAssembly技術專家，WebAssembly的先驅者和佈道者，目前就職於螞蟻集團，
從事雲原生配置編程語言的設計和研發工作，合著有《WebAssembly標准入門》。
Go語言技術專家，Go語言的貢獻者，著有《Go語言高級編程》 。

前言
第一篇　基礎篇
第1章　認識WebAssembly2
1.1　WebAssembly的誕生背景2
1.2　Web的第4種語言3
1.3　本章小結4

第2章　Emscripten快速入門5
2.1　安裝Emscripten5
2.1.1　使用emsdk命令行工具安裝Emscripten5
2.1.2　在Docker環境中安裝Emscripten7
2.1.3　校驗安裝8
2.2　你好，世界！8
2.2.1　生成.wasm文件8
2.2.2　運行9
2.2.3　使用Emscripten生成測試頁面11
2.3　膠水代碼初探12
2.3.1　WebAssembly匯編模塊載入12
2.3.2　導出函數封裝14
2.3.3　異步加載16
2.4　編譯目標及編譯流程17
2.4.1　編譯目標的選擇17
2.4.2　編譯流程18
2.5　示例：放大鏡特效19
2.5.1　模板程序19
2.5.2　靜態的放大鏡20
2.5.3　動態的放大鏡21
2.6　本章小結24

第3章　C與JavaScript互操作25
3.1　JavaScript調用C函數25
3.1.1　定義函數導出宏25
3.1.2　在JavaScript中調用C導出函數27
3.2　JavaScript函數註入C環境30
3.2.1　C函數聲明30
3.2.2　JavaScript實現C函數30
3.2.3　閉包限制及解決辦法32
3.2.4　JavaScript函數註入C環境的優缺點33
3.3　單向透明的內存模型33
3.3.1　Module.buffer34
3.3.2　Module.HEAPX34
3.3.3　在JavaScript中訪問C/C++環境內存35
3.4　JavaScript與C/C++交換數據37
3.4.1　參數及返回值37
3.4.2　通過內存交換數據39
3.4.3　在JavaScript中分配內存42
3.4.4　字符串43
3.5　EM_ASM系列宏44
3.5.1　EM_ASM44
3.5.2　EM_ASM_/EM_ASM_DOUBLE45
3.5.3　EM_ASM_INT_V/EM_ASM_DOUBLE_V46
3.6　emscripten_run_script()系列函數47
3.6.1　emscripten_run_script()47
3.6.2　emscripten_run_script_int()48
3.6.3　emscripten_run_script_string()49
3.7　ccall()/cwrap()50
3.7.1　ccall()51
3.7.2　cwrap()53
3.7.3　ccall()/cwrap()的潛在風險53
3.8　本章小結56

第二篇　方法篇
第4章　Emscripten運行時58
4.1　main()函數與生命周期58
4.2　消息循環61
4.2.1　emscripten_set_main_loop()61
4.2.2　消息循環的暫停、繼續及終止63
4.3　文件系統65
4.3.1　Emscripten虛擬文件系統架構66
4.3.2　基於MEMFS的打包文件系統67
4.3.3　NODEFS文件系統71
4.3.4　IDBFS72
4.4　內存管理73
4.4.1　內存容量/棧容量73
4.4.2　可變內存74
4.4.3　內存分配器75
4.5　Module定製75
4.6　示例：人臉檢測78
4.6.1　facedetect_cnn()函數78
4.6.2　facedetect_cnn()函數再封裝79
4.6.3　讀取圖像並檢測人臉81
4.6.4　基於SDL顯示IplImage圖像82
4.7　本章小結84

第5章　WebAssembly友好的一般性方法85
5.1　消息循環分離85
5.1.1　emscripten_set_main_loop()的不足85
5.1.2　在JavaScript中創建定時循環86
5.2　內存對齊88
5.2.1　asm.js88
5.2.2　wasm91
5.2.3　避免及檢測未對齊的內存操作92
5.3　使用C接口導出C++對象93
5.4　C++對象生命周期管理97
5.4.1　引用計數97
5.4.2　AddRef()/Release()使用規則98
5.4.3　導出AddRef()/Release()100
5.5　使用C接口註入JavaScript對象103
5.5.1　創建JavaScript對象/ID表103
5.5.2　註入JavaScript對象的生命周期管理104
5.6　小心64位整型數107
5.6.1　WebAssembly原生支持int64108
5.6.2　導出函數包含int64108
5.6.3　註入函數包含int64110
5.7　文件系統的缺陷111
5.8　本章小結112

第6章　網絡I/O113
6.1　XMLHttpRequest113
6.1.1　XMLHttpRequest對象使用簡介113
6.1.2　XMLHttpRequest對象的C接口封裝115
6.1.3　擴展回調處理116
6.2　WebSocket119
6.2.1　創建WebSocket測試服務120
6.2.2　在JavaScript中使用WebSocket121
6.2.3　WebSocket對象的C接口封裝122
6.3　本章小結126

第7章　並發執行127
7.1　JavaScript中的並發模型127
7.2　在Worker中使用Emscripten129
7.3　pthread線程132
7.3.1　原子操作132
7.3.2　pthread示例134
7.3.3　在瀏覽器環境運行pthread示例136
7.4　本章小結137

第8章　GUI及交互138
8.1　Canvas138
8.2　鼠標事件141
8.3　鍵盤事件144
8.4　Life游戲145
8.4.1　Life簡介146
8.4.2　設計要求146
8.4.3　Life游戲C代碼146
8.4.4　Life游戲網頁代碼150
8.4.5　運行Life151
8.5　本章小結152

第三篇　前沿篇
第9章　Rust和WebAssembly154
9.1　Rust入門154
9.1.1　安裝Rust開發環境154
9.1.2　你好，世界155
9.1.3　Cargo管理工程155
9.1.4　本地文檔156
9.2　你好，WebAssembly157
9.2.1　安裝WebAssembly開發環境157
9.2.2　打印“你好，WebAssembly”159
9.3　導入和導出函數159
9.3.1　導出main()函數159
9.3.2　導入宿主打印函數161
9.3.3　導出自定義函數162
9.4　打印命令行參數163
9.4.1　打印字符串163
9.4.2　準備導入env_print_str()函數164
9.4.3　向Rust傳入字符串165
9.4.4　命令行參數封裝168
9.4.5　傳入命令行參數170
9.5　no_std171
9.5.1　輸出文件的大小171
9.5.2　通過no_std裁剪標準172
9.5.3　庫173
9.6　嵌入C代碼174
9.6.1　C語言思維174
9.6.2　連接C語言庫175
9.6.3　集成C語言源碼175
9.6.4　build.rs自動構建178
9.7　本章小結181

第10章　WASI系統接口182
10.1　WASI簡介182
10.2　探秘WASI工作原理183
10.2.1　準備工作183
10.2.2　探秘wasm32-wasi底層184
10.2.3　Rust和wasm32-unknown-unknown185
10.2.4　C/C++編譯成WASI程序187
10.2.5　匯編程序189
10.3　WebAssembly虛擬機191
10.3.1　準備WebAssembly測試模塊191
10.3.2　Node.js環境：基於wasi包191
10.3.3　Node.js環境：手工實現fd_write()函數192
10.3.4　Rust環境：導入wasi包193
10.3.5　Rust環境：手工實現fd_write()函數195
10.4　wapm包管理器196
10.4.1　安裝wapm包管理器196
10.4.2　安裝並運行cowsay小程序197
10.4.3　創建wapm模塊198
10.5　本章小結200
附錄
附錄A　WebAssembly接口202
附錄B　機器指令211