如何將字符串從 JavaScript 傳入 Wasm/Rust

如何將字符串值從 JavaScript 傳入 Wasm/Rust

本文所用的全部資源均可以在 https://github.com/second-sta... 中找到

系列教程：

1. WebAssembly 快問快答
2. Rust 的 Hello world | WebAssembly 入門教程
3. 5分鐘實現一個簡單的 WebAssembly 應用|WebAssembly 入門教程

在前面的教程中，咱們提到了 WebAssembly 應用程序一般由兩部分組成:

• 運行在 WebAssembly 虛擬機內部的字節碼程序
• 調用 WebAssembly 程序的主機應用程序

然而，輕量級的 WebAssembly 虛擬機只支持很是有限的數值數據類型。 另外一方面，主機應用程序可能須要處理複雜的數據類型。 字符串就屬於這種複雜的數據類型。

字符串是複雜的，由於它包含大小未知和結構未知的數據(即編碼)。 主機應用程序不能直接在 WebAssembly 之間傳遞字符串數據。 它必須將字符串值與數值和數組相互轉換。

《WebAssembly 中的字符串》會讓你對字符串有更深的瞭解

這個教程將展現如何構建一個真正的「 hello world」 以及如何在 WebAssembly 中處理字符串。

• 主機應用程序是用 JavaScript 編寫的，在 Web 瀏覽器中運行。 它在 WebAssembly 函數調用之間傳遞字符串。
• WebAssembly 字節碼程序是用 Rust 編寫的。 它以 Rust String 結構的形式接收和返回字符串。

教程的源代碼在 這裏。

設置

咱們在這個示例中介紹的重要開發工具是 wasm-pack。 它將 Rust 源代碼編譯成一個 WebAssembly 字節碼程序，而後生成一個 JavaScript 模塊，該模塊能夠與 WebAssembly 程序交互。 生成的代碼負責輸入/輸出數據的編碼和管理, 這使得 JavaScript 開發者更容易調用 WebAssembly 函數。

按照下面的步驟安裝 Rust 和 wasm-pack工具。

# Install Rust

$ sudo apt-get update
$ sudo apt-get -y upgrade
$ curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
$ source $HOME/.cargo/env

# Install wasm-pack tools

$ curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh

Rust 寫的 WebAssembly 程序

在這個示例中，Rust 程序在「 hello」後面追加輸入字符串。 讓咱們建立一個新的 cargo項目。 因爲這個程序是從主機應用程序調用的，而不是做爲獨立的可執行文件運行，所以咱們將建立一個 hello 項目。

$ cargo new --lib hello
$ cd hello

編輯 Cargo.toml 文件，添加一個[lib] 部分。 它會告訴編譯器在哪裏能夠找到庫的源代碼，以及如何生成字節碼輸出。 這裏咱們還須要一個 wasm-bindgen 的依賴項。是實用的wasm-pack 爲 Rust WebAssembly 程序生成 JavaScript 綁定。

[lib]
name = "hello_lib"
path = "src/lib.rs"
crate-type =["cdylib"]
[dependencies]
wasm-bindgen = "0.2.50"

下面是Rust 程序 src/lib.rs的內容。實際上，咱們能夠在這個庫文件中定義多個外部函數，而且全部這些函數均可以經過 WebAssembly 在主機 JavaScript 應用程序中使用。 #[wasm_bindgen] 標籤指示構建工具在 Rust / WebAssembly 和 JavaScript 模塊中生成通訊接口。

use wasm_bindgen::prelude::*;
#[wasm_bindgen]
pub fn say(s: String) -> String {
  let r = String::from("hello ");
  return r + &s;
}

接下來，將 Rust 源代碼編譯成 WebAssembly 字節碼，並生成相應的 JavaScript 模塊。

$ wasm-pack build --target web

結果是下面兩個de 文件。.wasm文件是 WebAssembly 字節碼程序，.js 文件是JavaScript模塊。

pkg/hello_lib_bg.wasm
pkg/hello_lib.js

JavaScript主機

讓咱們回到 JavaScript 主機應用。有了生成的 hello_lib.js 模塊，能夠很是容易地寫 JavaScript 來調用 WebAssembly 函數。在 import 以後， WebAssembly say() 函數如今成了一個同名的JavaScript 函數。完整的網頁源文件在這裏。

<script type="module">
  import init, { say } from './hello_lib.js';
  async function run() {
    await init();
    var buttonOne = document.getElementById('buttonOne');
    buttonOne.addEventListener('click', function() {
      var input = $("#nameInput").val();
      alert(say(input));
    }, false);
  }
  run();
</script>

hello_lib_bg.wasm 程序是由hello_lib.js 模塊加載, 將HTML 文件 hello_lib.js 和 hello_lib_bg.wasm 文件放在網絡服務器上，如今獲得了一個在輸入任何名稱都能 "say hello" 的網頁了。

下一步是什麼呢？

到目前爲止，咱們已經瞭解瞭如何從託管在瀏覽器中的 JavaScript 訪問 WebAssembly 程序。 但更重要的是，咱們相信 WebAssembly 真正的潛力在於服務器端。 在下一個教程中，咱們將關注服務器端的 WebAssembly 示例！