只需 5 分鐘，教你如何編寫並執行一個 Rust + WebAssembly 程式

Michael_Yuan發表於2019-12-03

在探討 WASM 在服務端的巨大潛力時，我們提到 WASM 的一大優勢就是支援有影響力的新銳程式語言，例如 Rust 。這篇文章將展示如何編寫並執行一個 Wasm Rust 程式，只有程式碼。

本文作者： Second State 的研究員、開源核心開發 Tim McCallum。

以下為正文：

該演示是使用 Ubuntu Linux 作業系統和 Google 的 Chrome 瀏覽器進行的。其他組合尚未經過測試。

只需 5 分鐘，教你如何編寫並執行一個 Rust + WebAssembly 程式

第1步：安裝 Apache2 和 Rust

執行以下所有 Ubuntu 系統設定命令（更新，安裝 Apache2 和 Rust ）

sudo apt-get update
sudo apt-get -y upgrade
sudo apt-get -y install apache2
sudo chown -R $USER:$USER /var/www/html
curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
source $HOME/.cargo/env
rustup target add wasm32-wasi
rustup override set nightly
複製程式碼

第2步：建立一個新的 Rust 專案

建立一個快速的 Rust 專案

cd ~
cargo new --lib triple
cd triple
複製程式碼

第3步：為 Wasm 配置 Rust 通過將下面的配置新增到〜/ triple / Cargo.toml 檔案的 lib 部分來配置 rust

[lib]
name = "triple_lib"
path = "src/triple.rs"
crate-type =["cdylib"]
複製程式碼

第4步：指定構建目標

通過在〜/ .cargo.config 中建立一個新檔案並新增以下配置來完成 Rust 的配置

[build]
target = "wasm32-wasi"
複製程式碼

第5步：寫 Rust

編寫一個快速的 Rust 程式並將其儲存為 Triple.rs（在〜/ triple / src 目錄中）

#[no_mangle]
pub extern fn triple(x: i32) -> i32 {
 return 3 * x;
}
複製程式碼

第6步：構建 Wasm 程式碼

將 Rust 程式碼構建到 Wasm 中，然後將 Wasm 檔案複製到 Apache2 Web 伺服器區域

cd ~/triple
cargo build - release
cp -rp ~/triple/target/wasm32-wasi/release/triple_lib.wasm /var/www/html/triple.wasm
複製程式碼

第7步：製作 HTML 網頁

在 var / www / html / 目錄中建立一個名為 Triple.html 的新檔案，並使用以下程式碼填充它。

<html>
	<head>
		<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" />
		<script>
    if (!('WebAssembly' in window)) {
      alert('you need a browser with wasm support enabled :(');
    }
(async () => {
  const response = await fetch('triple.wasm');
  const buffer = await response.arrayBuffer();
  const module = await WebAssembly.compile(buffer);
  const instance = await WebAssembly.instantiate(module);
  const exports = instance.exports;
  const triple = exports.triple;
  var buttonOne = document.getElementById('buttonOne');
        buttonOne.value = 'Triple the number';
        buttonOne.addEventListener('click', function() {
          var input = $("#numberInput").val();
          alert(input + ' tripled equals ' + triple(input));
        }, false);
})();    

  </script>
	</head>
	<body>
		<div class="row">
			<div class="col-sm-4"></div>
			<div class="col-sm-4">
				<b>Rust to Wasm in under 5 minutes - Triple the number</b>
			</div>
			<div class="col-sm-4"></div>
		</div>
		<hr />
		<div class="row">
			<div class="col-sm-2"></div>
			<div class="col-sm-4">Place a number in the box</div>
			<div class="col-sm-4"> Click the button</div>
			<div class="col-sm-2"></div>
		</div>
		<div class="row">
			<div class="col-sm-2"></div>
			<div class="col-sm-4">
				<input type="text" id="numberInput" placeholder="1", value="1">
				</div>
				<div class="col-sm-4">
					<button class="bg-light" id="buttonOne">Triple the number</button>
				</div>
				<div class="col-sm-2"></div>
			</div>
		</body>
		<script
  src="https://code.jquery.com/jquery-3.4.1.js"
  integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
  crossorigin="anonymous"></script>
	</html>
複製程式碼