用5分钟用Rust + WebAssembly来展现一门编程艺术

2023-11-12 18:20:51

Rust + WebAssembly 入门

Rust 是一种非常适合编写底层系统的系统编程语言，尤其是在安全性方面。而 WebAssembly 是一种可以在浏览器中执行的二进制指令集。由于 Rust 能编译为 WebAssembly，因此我们可以用 Rust 来编写可在浏览器中运行的程序。

环境搭建

在开始之前，您需要在计算机上安装 Rust 和 WebAssembly。如果您使用的是 Ubuntu Linux 操作系统，可以使用以下命令安装：

sudo apt install rustc cargo wasm-pack

如果您使用的是其他操作系统，请参考 Rust 和 WebAssembly 的官方文档。

创建项目

接下来，我们创建一个新的 Rust 项目。在命令行中，转到您想要创建项目的目录，然后运行以下命令：

cargo new triple

这将创建一个名为 triple 的新目录，其中包含一个名为 Cargo.toml 的文件。Cargo.toml 是 Rust 项目的配置文件。

编写代码

现在，我们可以在 triple 目录中创建一个名为 main.rs 的文件。这是 Rust 程序的主文件。在 main.rs 中，我们将编写一个简单的程序，在浏览器中显示一条消息。代码如下：

use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub fn greet(name: &str) {
    let greeting = format!("Hello, {}!", name);
    web_sys::console::log_1(&JsValue::from_str(&greeting));
}

在上面的代码中，我们导入了 wasm_bindgen::prelude:: 模块，该模块提供了 Rust 与 WebAssembly 之间的绑定。

greet 函数接收一个字符串参数 name，并返回一个格式化为 Hello, {name}! 的字符串。我们使用 web_sys::console::log_1 函数将 greeting 输出到浏览器的控制台。

编译程序

现在，我们可以使用 wasm-pack 命令编译程序。在 triple 目录中，运行以下命令：

wasm-pack build

这将生成一个名为 triple.wasm 的 WebAssembly 二进制文件。

创建 HTML 页面

接下来，我们需要创建一个 HTML 页面来加载和运行我们的 WebAssembly 程序。在 triple 目录中，创建一个名为 index.html 的文件。在 index.html 中，我们将编写以下代码：

<!DOCTYPE html>
<html>
<head>
    
</head>
<body>
    <script type="module">
        import * as triple from './triple.wasm';

        triple.greet('World');
    </script>
</body>
</html>