WASM 之 Rust 開發（Windows Docker環境）

環境

活動: 學 Rust，免費拿樹莓派 + Rust 官方文檔

0. Windows10 Pro
1. Docker (開啟 WSL2 Feature 及 Hyper-V 虛擬層)
2. 基於Rust的wasm項目開發模板 https://github.com/second-state/ssvm-nodejs-starter/
3. VSCode 及其 Rust 插件

另外可以考慮加上 Remote-Docker 插件

測試環境

cmd 命令
切換到你的工作目錄

cd /d D:\MyCode\wasm_rust

拉取並運行Docker容器

git clone --depth=1 https://github.com/second-state/ssvm-nodejs-starter.git
cd ssvm-nodejs-starter
docker pull secondstate/ssvm-nodejs-starter:v1
powershell
docker run -p 3000:3000 --rm -it -v ${pwd}:/app secondstate/ssvm-nodejs-starter:v1

之所以使用powershell是因為需要用到 ${pwd}，將當前目錄映射為容器里的 /app 目錄；如是 Linux，請把powershell的 ${pwd} 改為 $(pwd)
此時命令行前綴會變成 root@ec41e80db1d4:/# ，以下以 (docker) # 代表該狀態

然后在容器里操作，切換到源碼目錄，編譯 wasm

(docker) # cd /app
(docker) # ssvmup build

編譯結果(二進制字節碼文件wasm，及用於調用它的js，還有包信息json)

運行

(docker) # node node/app.js

瀏覽器或curl等工具打開 http://localhost:3000/?name=SSVM 即看到效果hello SSVM

開發

接下來基於模板 ssvm-nodejs-starter 開發 基於Rust的wasm項目
由於我們已經把容器里的 /app 目錄映射到模板所在目錄，所以修改模板目錄里的源碼就是修改 /app 目錄
我們只需把 源碼修改完，直接在 容器里編譯運行基於Rust的wasm項目即可。

用 VSCode 打開模板所在目錄，直接修改代碼，然后去容器里編譯運行即可。

可以看到WASM對象通過require一個js作為對象引入，就是說此時 say 對象就是WASM函數

確定目標：我選擇做一個在線 md5/sha 計算的工具，和一個在線文本逐字對比的工具
挑選庫 https://crates.io/crates/rust-crypto-wasm 及其文檔 https://docs.rs/rust-crypto-wasm/0.3.1/crypto/

先做核心功能
WASM 部分

extern crate crypto;

use wasm_bindgen::prelude::*;
use crypto::digest::Digest;
use crypto::md5::Md5;
use crypto::sha1::Sha1;
use crypto::sha2::Sha256;
use crypto::sha2::Sha512;


#[wasm_bindgen]
pub fn say(s: &str) -> String {
  println!("The Rust function say() received {}", s);
  let r = String::from("hello ");
  return r + s;
}


#[wasm_bindgen]
pub fn md5(s: &str) -> String {
  let mut hasher = Md5::new();
  hasher.input_str(s);
  return hasher.result_str();
}


#[wasm_bindgen]
pub fn sha1(s: &str) -> String {
  let mut hasher = Sha1::new();
  hasher.input_str(s);
  return hasher.result_str();
}


#[wasm_bindgen]
pub fn sha256(s: &str) -> String {
  let mut hasher = Sha256::new();
  hasher.input_str(s);
  return hasher.result_str();
}



#[wasm_bindgen]
pub fn sha512(s: &str) -> String {
  let mut hasher = Sha512::new();
  hasher.input_str(s);
  return hasher.result_str();
}

nodejs 部分

編譯(wasm和nodejs項目)並測試

然后找個工具驗算一下正誤，確認結果正確ok。
下一步便是優化用戶體驗，封裝AJAX並動態加載數據

(假裝完成了...)

小結

密集計算是 WASM 的優點

如果配置夠高，可以做個文件哈希值計算，但是我這垃圾電腦開個容器都卡，蒜了....
另外，wasm也可以運行在瀏覽器端，有混淆防被扒代碼的作用。
最后，這里只做了小小演示，拋磚引玉，WASM-RUST 在前端世界的計算里有更深更廣的用途

倉庫

更多代碼請見： https://github.com/sky5454/ssvm-nodejs-starter