How do I keep internal state in a WebAssembly module written in Rust?

在Rust编写的WebAssembly（Wasm）模块中保持内部状态，可以通过几种方式实现。下面是关键的几个步骤，这些步骤将向你展示如何创建和维护一个简单的内部状态：

准备工作

首先确保你有rustup工具链安装好了，并安装了wasm-pack工具，用来构建和打包Rust代码为Wasm模块。

sh
rustup target add wasm32-unknown-unknown
cargo install wasm-pack

编写 Rust 代码

然后创建一个新的Cargo项目，并添加必要的依赖：

sh
cargo new wasm_state --lib
cd wasm_state

编辑Cargo.toml文件，添加wasm-bindgen到依赖中：

toml
[lib]
crate-type = ["cdylib"]

[dependencies]
wasm-bindgen = "0.2"

接下来，打开src/lib.rs文件，编写Rust代码：

rust
use wasm_bindgen::prelude::*;

// 使用静态变量保持状态
static mut COUNTER: i32 = 0;

#[wasm_bindgen]
pub fn increment() -> i32 {
    unsafe {
        // 更新静态变量的值
        COUNTER += 1;
        COUNTER
    }
}

#[wasm_bindgen]
pub fn get_counter() -> i32 {
    unsafe {
        COUNTER
    }
}

构建 WebAssembly 模块

使用wasm-pack构建项目，创建可以在Web浏览器中使用的Wasm包：

sh
wasm-pack build --target web

使用 WebAssembly 模块

现在你可以在HTML中使用这个模块了。例如，创建一个index.html文件，然后使用以下HTML和JavaScript代码：

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Wasm State Example</title>
    <script type="module">
        import init, { increment, get_counter } from './pkg/wasm_state.js';

        async function run() {
            await init();

            document.getElementById("increment").addEventListener("click", () => {
                increment();
                updateCounter();
            });

            const updateCounter = () => {
                const count = get_counter();
                document.getElementById("counter").textContent = count.toString();
            };

            updateCounter();
        }

        run();
    </script>
</head>
<body>
    <p>Counter: <span id="counter"></span></p>
    <button id="increment">Increment</button>
</body>
</html>

确保将pkg/wasm_state.js替换为你实际生成的Wasm绑定的JavaScript glue代码路径。

注意事项

在WebAssembly中，静态变量是一种在多次调用之间维持状态的简单方式。但在多线程环境中需要注意线程安全问题。
unsafe块是因为在Rust中访问可变静态变量是不安全的。在实际的应用程序中，应该寻找避免unsafe的方法，比如使用Mutex或其他同步机制，但这些机制不一定在Wasm中可用。
编写Wasm模块时，请记住WebAssembly当前还没有直接访问Web浏览器提供的Web API的能力。它需要通过JavaScript作为glue code来处理。
要在Web应用程序中使用这个Wasm模块，你需要将生成的Wasm包（通常位于pkg/目录中）和你的index.html文件放在Web服务器上。简单的本地测试可以使用Python的HTTP服务器，或者任何你喜欢的静态文件服务器。

通过以上步骤，你可以在Rust编写的WebAssembly模块中维持内部状态并在Web应用程序中使用它。

2024年6月29日 12:07 回复

1个答案

准备工作

编写 Rust 代码

构建 WebAssembly 模块

使用 WebAssembly 模块

注意事项

你的答案