本文的目的是演示如何在web浏览器中运行WASM文件，并介绍一个名为WasmEdge的运行时环境，它是最快的WebAssembly运行时之一，提供了一套庞大的功能套件，超越了简单的web开发。首先，我们将编写一个简单的rust程序，将用户提供的两个数字相加，将其编译到wasm，并运行wasm文件。
使用Rust编码的原因
在WebAssembly领域，人们总是认为Rust和WebAssembly的结合是一个强大的工具。这主要是因为它使开发人员能够创建高性能的web应用程序，这些应用程序具有Rust的安全性和可靠性保证，以及WebAssembly的速度和效率。
例如，web应用程序可以利用Rust和WebAssembly来执行3D对象渲染或机器学习任务，同时依赖JavaScript来管理用户输入和更新用户界面。因此，应用程序可以提供快速响应的用户体验，同时还可以利用Rust和WebAssembly的性能优势。
代码部分
首先使用以下命令安装Wasm工具链，这允许Rust程序被编译成WebAssembly。
rustup target add wasm32-unknown-unknown
然后通过运行以下命令创建Rust项目：
cargo new hello --lib
在Cargo.toml文件中添加如下代码行：
[lib]
crate-type = ["cdylib"]
Cargo.toml文件中的[lib]部分用于配置如何将crate编译成动态库。在Rust中，crate是将相关模块、结构、函数和其他项组合在一起的编译单元。crate-type字段指定构建crate时应该生成的输出文件的类型。当crate-type设置为["cdylib"]时，Cargo将把crate构建为动态库。
在src/lib.rs文件中编写程序，我写了一个简单的函数，它接受两个32位整数值，并返回一个32位整数值的和。
#[no_mangle]
pub extern "C" fn add(x: i32, y: i32) -> i32 {
x + y
}
使用以下命令将项目编译为wasm：
cargo build --target wasm32-unknown-unknown --release
执行WASM文件
使用浏览器执行wasm文件
在根目录下创建一个网页(index.html文件)，添加一些可以调用Rust程序并将输出写入控制台的脚本。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>堆代码 duidaima.com</title>
<script>
(async () => {
let response = await fetch('target/wasm32-unknown-unknown/release/hello.wasm');
let bytes = await response.arrayBuffer();
let { instance } = await WebAssembly.instantiate(bytes, { });
console.log('The answer is: ', instance.exports.add(13, 4));
})();
</script>
</head>
<body>
</body>
</html>
使用npm启动http服务器来加载index.html：
npm init
npm i http-server --save
编辑package.json，并添加启动脚本：
"scripts": {
"start": "http-server -a localhost -p 5200"
},
运行服务器：
npm run start
Available on:
http://localhost:5200
Hit CTRL-C to stop the server
使用WasmEdge执行
WasmEdge是一个轻量级、高性能、可扩展的WebAssembly运行时，用于云原生、边缘和去中心化应用程序。WasmEdge运行时为其包含的WebAssembly字节码程序提供了定义良好的执行沙箱。WasmEdge最重要的用例是在软件产品中作为插件安全地执行用户定义的或社区贡献的代码。
执行以下命令安装WasmEdge：
curl -sSf https://raw.githubusercontent.com/WasmEdge/WasmEdge/master/utils/install.sh | bash
安装成功后，执行以下命令运行wasm文件：
wasmedge --reactor target/wasm32-unknown-unknown/release/hello.wasm add 13 4
通过这种方式，WasmEdge以解释器模式执行wasm文件。我们还可以在AOT模式下执行wasm文件以提高性能。
闽公网安备 35020302035485号
