5 posts tagged with "WebAssembly"

原文链接：Wasmi 1.0 — WebAssembly Interpreter Stable At Last

自 2024 年 5 月发布上一版更新后，轻量级 WebAssembly 解释器 Wasmi 历经数月打磨，终于正式发布 1.0 稳定版。这个版本不仅清理了历史弃用 API，承诺未来接口稳定性，也标志着 Wasmi 在功能、性能、安全性上的成熟，可广泛应用于 IoT 设备、插件系统、云宿主、智能合约乃至游戏主机等场景。

1.0 的意义：API 与能力全面成熟​

• API 稳定承诺：1.0 起不再保留旧版弃用接口，开发者可放心升级。
• 面向嵌入式场景：低内存占用、可预测执行、可与宿主良好集成，是嵌入式与资源受限环境的高性价比 Wasm Runtime。

支持的全新 Wasm 提案​

自 2024 年 5 月以来，Wasmi 紧跟 Wasm 生态推进，完成多项提案实现：

• multi-memory：单模块多线性内存，实现用途隔离。
• memory64：支持 64 位寻址，突破 4GB 内存上限。
• custom-page-sizes：最小 1 字节页尺寸，适配超小型设备。
• simd / relaxed-simd：提供 128 位 SIMD 指令（可选启用），加速计算密集型任务。
• wide-arithmetic：新增 128 位 add/sub/mul 运算，利于大整数应用。
• tail-call、extended-const 等 Wasm 3.0 提案：提前支持未来标准。

凭借这些更新，Wasmi 已完整覆盖 Wasm 2.0，甚至领先实现多项 Wasm 3.0 能力。

引擎优化：性能与内存双提升​

• 内部重构：翻译引擎、字节码、执行循环经过大量清理与重写，执行效率和内存占用显著改善。
• M2 Pro 基准测试：Coremark 等测试均显示较旧版本有稳定收益，尽管仍沿用 2024 年引入的解释器架构。

安全与可靠性提升​

1. 安全审计：Stellar Development Foundation 赞助 Runtime Verification 对 Wasmi 进行全面审计，发现的问题已全部修复。
2. 模糊测试体系：
   • translate：持续翻译随机 Wasm 数据，查找翻译器缺陷。
   • execute：以多输入执行 Wasm，挖掘执行引擎 Bug。
   • differential：与其它 Runtime（如 Wasmtime）对比执行，捕捉语义差异。
3. OSS-Fuzz + Wast Testsuite：接入 Google OSS-Fuzz，并维护独立 Wast 测试集，覆盖 Wasmi 特有场景。
4. 依赖收缩：外部依赖从 7 个降至 2 个（spin、wasmparser），计划未来以自研 wasmi_parse 完全替换，进一步降低供应链风险。

新特性：从 C-API 到可续航 Fuel​

• C-API 绑定：通过 wasmi_c_api_impl，任何可调用 C 的语言都能直接集成 Wasmi。官方还计划借助 PyO3 提供 Python 绑定。
• Refueled Resumable Calls：燃料耗尽时可暂停执行，稍后补充 Fuel 后继续，方便调度并发 Wasm 任务。
• 易用性提升：
  • Module::new / new_unchecked 在启用 wat feature 后可直接加载 WAT。
  • API 设计进一步贴近 Wasmtime，降低迁移成本。
  • 新增低层级 Instance::new、官方 Usage Guide、Hash/BTree 可选等功能。
  • 修复了在宿主函数内部编译新模块会死锁的问题。

展望：Wasmi 2.0 与 Wasm 3.0 全面兼容​

• 下一代解释器：2.0 将聚焦性能，提供多种指令派发模式（直接/间接 threaded dispatch、loop-match 等），并计划结合 Rust become 关键字、#[loop_match] 属性（待稳定）进一步提升效率。
• Wasm 3.0 支持：目前尚缺 function-references、exception-handling、gc 三项提案，待新引擎落地后将优先补齐。

如何体验 Wasmi 1.0​

• 作为库依赖：cargo add wasmi
• CLI：cargo install wasmi_cli
• C 语言接口：参考官方 C-API README
• Wasmer Backend：开启 Wasmer 的 wasmi feature
• 或直接使用已集成 Wasmi 的项目

引言​

在当今数字化时代，实时数据处理已成为企业的核心需求。 Fluvio作为一个精简的分布式流处理引擎，专为边缘到核心的流处理而设计， 提供了性能、可扩展性和可编程性的完美结合。

本文将深入探讨Fluvio的核心特性、技术优势及其实践应用。

核心特性​

云原生设计​

Fluvio的设计理念完全遵循云原生原则，具备以下特点：

• 声明式管理：降低管理负担
• Kubernetes原生：无缝集成K8s环境
• 水平扩展：满足数据弹性需求
• 自我修复：无需人工干预即可从故障中恢复

边缘计算优化​

Fluvio在边缘计算场景下表现出色：

• 轻量级：仅37MB的单一二进制文件，完美支持ARM64 IoT设备
• 事件驱动：采用异步架构，支持大规模I/O操作
• 多线程架构：充分利用多核CPU性能
• 高性能：内部组件处理延迟达到纳秒级

AI原生支持​

为AI应用开发提供强大支持：

• 自定义数据生命周期管理
• 支持长期运行的数据和AI管道
• 提供声明式API用于流处理和数据物化

技术亮点​

1. Rust驱动​

采用Rust语言开发，确保了：

• 高性能执行
• 内存安全
• 跨平台兼容性

2. WebAssembly集成​

通过WebAssembly提供：

• 安全的沙箱执行环境
• 高性能的自定义流处理逻辑
• 语言无关的开发能力

3. 云原生控制平面​

借鉴Kubernetes的设计理念：

• 采用声明式编程
• 实现最终一致性
• 简化运维管理

实践应用​

快速入门​

# 安装Fluvio版本管理器
curl -fsS https://hub.infinyon.cloud/install/install.sh | bash

# 启动本地集群
fluvio cluster start

# 创建主题
fluvio topic create quickstart-topic

# 生产数据
fluvio produce quickstart-topic

# 消费数据
fluvio consume quickstart-topic

SmartModule转换示例​

# transforms.yml
transforms:
  - uses: infinyon/jolt@0.4.1
    with:
      spec:
        - operation: shift
          spec:
            quote: ""

Fluvio vs 主流流处理解决方案对比​

为了帮助读者更好地理解Fluvio的优势，我们将其与市场上主流的流处理解决方案进行对比：

功能对比表​

Fluvio的独特优势​

1. 轻量级架构

   • 相比其他解决方案动辄数百MB的部署体积，Fluvio仅需37MB
   • 更适合边缘计算和IoT场景
   • 启动速度更快，资源占用更少

2. 现代化技术栈

   • 采用Rust语言开发，提供内存安全保证
   • 原生WebAssembly支持，实现安全的自定义处理逻辑
   • 完全的云原生设计，更好地适应现代架构需求

3. 简化的运维

   • 单一二进制文件部署
   • 自动化的集群管理
   • 声明式配置，降低运维复杂度

4. 性能优势

   • 纳秒级延迟，优于传统毫秒级解决方案
   • 高效的资源利用，降低运营成本
   • 优化的多线程架构，提供更好的并发性能

适用场景对比​

迁移建议​

如果您正在考虑采用Fluvio，以下场景特别适合：

1. 边缘计算项目

   • IoT设备数据处理
   • 边缘AI推理
   • 实时数据过滤和转换

2. 云原生应用

   • Kubernetes环境部署
   • 微服务架构集成
   • 实时数据管道

3. AI/ML工作负载

   • 实时特征工程
   • 模型推理管道
   • 数据预处理流程

成本效益分析​

相比传统解决方案，Fluvio可以带来显著的成本节省：

• 硬件成本: 由于更低的资源消耗，可减少50-70%的硬件投入
• 运维成本: 简化的部署和管理流程可降低30-50%的运维工作量
• 开发成本: WebAssembly支持和现代化API可提升40%的开发效率
• 能源成本: 得益于高效的资源利用，可节省40-60%的能源消耗

总结​

Fluvio通过其独特的设计和强大的功能，为现代数据处理提供了一个强有力的解决方案。 它不仅满足了云原生环境的需求，还特别适合边缘计算场景，同时为AI应用开发提供了便利的工具和接口。

参考资源​

• Fluvio官方文档
• Fluvio GitHub仓库

这是#[wasm_bindgen]的"Hello, world!"示例，展示如何设置项目， 将函数导出到JS，从JS调用并在Rust中调用警报功能。

1. 创建项目​

cargo new hello-world --lib
cd hello-world

2. 添加依赖​

cargo add wasm-bindgen

3. Cargo.toml​

Cargo.toml 列出了 wasm-bindgen crate 作为一个依赖项。 值得注意的是，crate-type = ["cdylib"]，这在当今主要用于 wasm 最终工件。

[package]
name = "hello-world"
version = "0.1.0"
edition = "2021"

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

[dependencies]
wasm-bindgen = "0.2.92"

4. 编写src/lib.rs​

src/lib.rs 文件包含了一个简单的函数，该函数使用 #[wasm_bindgen] 属性导出到 JavaScript。

use wasm_bindgen::prelude::*;

#[wasm_bindgen]
extern "C" {
  fn alert(s: &str);
}

#[wasm_bindgen]
pub fn greet(name: &str) {
  alert(&format!("Hello, {}!", name));
}

上述代码中，greet 函数使用 #[wasm_bindgen] 属性导出到 JavaScript。

alert 函数是一个外部函数，它在 JavaScript 中实现。使用 extern "C" 来声明它， 然后可以在Rust代码中调用从JavaScript导入的函数。

5. 编译为WebAssembly​

wasm-pack build --target web

上述命令将生成一个 pkg 目录，其中包含了编译好的 WebAssembly 模块和 TypeScript(JavaScript) 包装器。 使用 wasm-pack build --target web 来生成一个可以在浏览器中运行的包， 是一个完整的 npm 包，直接按照包的方式直接导入到 JavaScript 项目中。

如果是wasm-pack build，则可以构建一个可以在 Node.js 中运行的包。

6. 在JavaScript中调用​

// /path/to/hello-world/index.js

import { greet } from './pkg';

greet('World');

7. 创建npm包​

pnpm init
# 或
npm init

会在当前目录下生成一个package.json文件，此文件是npm包的配置文件

8. 添加依赖​

pnpm add webpack webpack-cli webpack-dev-server html-webpack-plugin -D
# 或
npm install webpack webpack-cli webpack-dev-server html-webpack-plugin -D

上述几个包的作用是：

1. webpack Webpack 是一个模块打包工具，主要用于将多个模块（如 JavaScript、CSS、图片等）打包成一个或多个文件。它可以处理依赖关系，优化资源，并支持各种加载器和插件，以满足不同的构建需求。
2. webpack-cli webpack-cli 是 Webpack 的命令行接口，允许用户通过命令行执行 Webpack 的构建任务。它提供了一些命令和选项，使得用户可以更方便地配置和运行 Webpack，而不需要直接在代码中进行设置。
3. webpack-dev-server webpack-dev-server 是一个用于开发的服务器，提供了热模块替换（HMR）功能，可以在代码更改时自动刷新浏览器。它使得开发过程更加高效，能够快速查看修改后的效果，而无需手动刷新页面。
4. html-webpack-plugin html-webpack-plugin 是一个 Webpack 插件，用于生成 HTML 文件。它可以自动将打包后的 JavaScript 和 CSS 文件插入到生成的 HTML 文件中，从而简化了手动管理 HTML 的过程。它还支持模板引擎，可以根据需要自定义生成的 HTML。

9. 创建webpack.config.js​

// /path/to/hello-world/webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
const WasmPackPlugin = require("@wasm-tool/wasm-pack-plugin");

module.exports = {
    entry: './index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'index.js',
    },
    plugins: [
        new HtmlWebpackPlugin(),
        new WasmPackPlugin({
            crateDirectory: path.resolve(__dirname, ".")
        }),
    ],
    mode: 'development',
    experiments: {
        asyncWebAssembly: true
   }
};

上述代码的作用是：

• 引入 Node.js 内置的 path 模块，方便处理文件路径。
• 引入 HtmlWebpackPlugin，用于生成 HTML 文件。
• 引入 webpack，虽然在这个配置中没有直接使用，但通常用于访问 Webpack 的功能。
• 引入 WasmPackPlugin，用于处理 Rust 编写的 WebAssembly 模块
• entry: 指定应用程序的入口文件，这里是 index.js。即这里是我们在第6步中创建的文件。
• output: 指定输出文件的配置：
• path: 输出目录，使用 path.resolve 来确保路径正确，输出到 dist 文件夹。
• filename: 输出的文件名，这里是 index.js。
• plugins: 配置使用的插件：
• HtmlWebpackPlugin: 自动生成 HTML 文件，包含打包后的 JavaScript 代码。
• WasmPackPlugin: 配置 WasmPack 插件，crateDirectory 指定 Rust crate 的路径，这里是当前目录。
• mode: 设置为 development，表示当前环境是开发模式，启用一些开发时的功能（如更好的错误信息）。
• experiments: 启用 Webpack 的实验功能，这里开启了 asyncWebAssembly，允许使用异步加载 WebAssembly 模块。

10. 配置webpack服务​

{
  "name": "hello-world",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack",
    "serve": "webpack serve"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@wasm-tool/wasm-pack-plugin": "^1.7.0",
    "html-webpack-plugin": "^5.6.0",
    "webpack": "^5.93.0",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^5.0.4"
  }
}

配置package.json文件，添加build和serve脚本，用于构建和启动服务。

11. 编译​

pnpm run build
# 或
npm run build

12. 运行​

pnpm run server
# 或
npm run server

打开浏览器，访问 http://localhost:8080，在控制台中可以看到输出 Hello, World!。 webpack默认的服务端口是8080，如果端口被占用，可以在webpack.config.js中配置。

整个项目代码结构​

链接​

• Github Repo: https://github.com/yuxuetr/wasm-examples/tree/main/hello-world

可能会遇到的问题​

1. wasm-pack build 时，可能会遇到以下错误：

wasm-pack build
[INFO]: 🎯  Checking for the Wasm target...
[INFO]: 🌀  Compiling to Wasm...
   Compiling syn v2.0.72
   Compiling wasm-bindgen-backend v0.2.92
   Compiling wasm-bindgen-macro-support v0.2.92
   Compiling wasm-bindgen-macro v0.2.92
   Compiling wasm-bindgen v0.2.92
   Compiling hello-world v0.1.0 (/Users/hal/tutorials/wasm-examples/hello-world)
    Finished `release` profile [optimized] target(s) in 54.81s
[INFO]: ⬇️  Installing wasm-bindgen...
[INFO]: found wasm-opt at "/Users/hal/bin/binaryen/bin/wasm-opt"
[INFO]: Optimizing wasm binaries with `wasm-opt`...
dyld[46869]: Symbol not found: __ZTVN4wasm10PassRunnerE
  Referenced from: <7458E7FE-3DC2-3048-B182-5DF54E45F6D4> /Users/hal/bin/binaryen/bin/wasm-opt
  Expected in:     <F032F917-10CC-3569-8C1E-2299E90E789F> /usr/local/lib/libbinaryen.dylib
Error: failed to execute `wasm-opt`: exited with signal: 6 (SIGABRT)
  full command: "/Users/hal/bin/binaryen/bin/wasm-opt" "/Users/hal/tutorials/wasm-examples/hello-world/pkg/hello_world_bg.wasm" "-o" "/Users/hal/tutorials/wasm-examples/hello-world/pkg/hello_world_bg.wasm-opt.wasm" "-O"
To disable `wasm-opt`, add `wasm-opt = false` to your package metadata in your `Cargo.toml`.
Caused by: failed to execute `wasm-opt`: exited with signal: 6 (SIGABRT)
  full command: "/Users/hal/bin/binaryen/bin/wasm-opt" "/Users/hal/tutorials/wasm-examples/hello-world/pkg/hello_world_bg.wasm" "-o" "/Users/hal/tutorials/wasm-examples/hello-world/pkg/hello_world_bg.wasm-opt.wasm" "-O"
To disable `wasm-opt`, add `wasm-opt = false` to your package metadata in your `Cargo.toml`

• 解决方法1：

在 Cargo.toml 中添加 wasm-opt = false。 禁用 wasm-opt。

[package]
name = "hello-world"
version = "0.1.0"
edition = "2021"

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

[dependencies]
wasm-bindgen = "0.2.92"

[package.metadata.wasm-pack]
wasm-opt = false

• 解决方法2：

安装 binaryen，并且将 binaryen 库的路径添加到动态库的环境变量中，DYLD_LIBRARY_PATH。

brew install binaryen

在Mac系统上是这样，Linux系统上可能是 LD_LIBRARY_PATH。而且这里是使用Homebrew安装的，如果是其他方式安装的，可能路径不一样。

export DYLD_LIBRARY_PATH="/opt/homebrew/lib:$DYLD_LIBRARY_PATH"

wasm-bindgen 是一个强大的工具，它提供了多种方式来实现 Rust 和 JavaScript 之间的互操作性。 本文将总结 wasm-bindgen 的几种常见用法，并结合代码案例进行说明。

1. 使用 JavaScript 模块中的自定义函数​

你可以在 Rust 中使用 extern "C" 块来声明从 JavaScript 导入的函数，然后在 Rust 中调用它们。 这种方式非常适合需要调用现有 JavaScript 函数的场景。

示例​

• JavaScript 部分 (foo.js)

export function js_add(a, b) {
  return a + b;
}

• Rust 部分

use wasm_bindgen::prelude::*;

// Declare the JavaScript function
#[wasm_bindgen(module = "/js/foo.js")]
extern "C" {
  fn js_add(a: i32, b: i32) -> i32;
}

// Define a Rust function that uses the imported JavaScript function
#[wasm_bindgen]
pub fn add_in_rust(a: i32, b: i32) -> i32 {
  js_add(a, b)
}

2. 使用 JavaScript 基础功能​

如果你需要使用 JavaScript 的基础功能，可以依赖 js-sys crate。 js-sys 提供了对 JavaScript 标准库的绑定，例如 Math、Date、Array 等。

示例​

use wasm_bindgen::prelude::*;
use js_sys::Math;

#[wasm_bindgen]
pub fn random_number() -> f64 {
  Math::random()
}

3. 使用 DOM 内容​

如果你需要操作 DOM，可以依赖 web-sys crate。 web-sys 提供了对 Web API 的绑定，例如 document、window、Element 等。

示例​

use wasm_bindgen::prelude::*;
use web_sys::window;

#[wasm_bindgen]
pub fn set_document_title(title: &str) {
	let window = window().expect("no global `window` exists");
	let document = window.document().expect("should have a document on window");
	document.set_title(title);
}

4. 在 Rust 中导出给 JavaScript 使用​

在 Rust 中，只要添加 #[wasm_bindgen] 宏并且将函数或类型声明为 pub， 它们就可以导出给 JavaScript 使用。

示例​

• Rust 中的代码：

use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub fn greet(name: &str) -> String {
  format!("Hello, {}!", name)
}

#[wasm_bindgen]
pub struct Person {
	name: String,
	age: u32,
}

#[wasm_bindgen]
impl Person {
	#[wasm_bindgen(constructor)]
	pub fn new(name: &str, age: u32) -> Person {
		Person {
			name: name.to_string(),
			age,
		}
	}

	pub fn greet(&self) -> String {
		format!("Hello, my name is {} and I am {} years old.", self.name, self.age)
	}
}

• 在 JavaScript 中使用：

import init, { greet, Person } from './pkg/your_project_name.js';

async function run() {
	await init();
	console.log(greet("World")); // Should output "Hello, World!"
	
	let person = new Person("Alice", 30);
	console.log(person.greet()); // Should output "Hello, my name is Alice and I am 30 years old."
}

run();

5. 异步函数​

你可以使用 wasm-bindgen-futures crate 来处理异步函数， 使得 Rust 中的异步函数可以在 JavaScript 中以 Promise 的形式使用。

示例​

use wasm_bindgen::prelude::*;
use wasm_bindgen_futures::JsFuture;
use web_sys::window;

#[wasm_bindgen]
pub async fn fetch_data() -> Result<JsValue, JsValue> {
	let window = window().expect("no global `window` exists");
	let response = JsFuture::from(window.fetch_with_str("https://api.example.com/data")).await?;
	let response: web_sys::Response = response.dyn_into().unwrap();
	let json = JsFuture::from(response.json()?).await?;
	Ok(json)
}

6. 错误处理​

使用 Result 类型和 JsValue 来捕获和处理 JavaScript 异常。

示例​

use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub fn catch_js_error() -> Result<(), JsValue> {
	let result = js_sys::Reflect::get(&JsValue::NULL, &JsValue::from_str("non_existent_property"));
	match result {
		Ok(_) => Ok(()),
		Err(e) => Err(e),
	}
}

7. 内存管理​

注意 WebAssembly 和 JavaScript 之间的内存管理， 特别是当你在 Rust 中创建大型数据结构并传递给 JavaScript 时。

1. 线性内存

   • WebAssembly 使用线性内存模型，这意味着内存是一个连续的字节数组。
   • WebAssembly 模块可以通过 memory 对象来访问和操作这段内存。

2.内存分配：

• 当从 JavaScript 传递数据到 WebAssembly 时，通常需要在 WebAssembly 内存中分配空间。
• 可以使用 wasm-bindgen 提供的 wasm_bindgen::memory() 函数来访问 WebAssembly 内存，并手动进行内存分配和释放。

3. 内存释放：

   • WebAssembly 没有垃圾回收机制，因此需要手动管理内存。
   • 确保在不再需要数据时，及时释放内存以避免内存泄漏。

4. 传递大型数据结构：

   • 在传递大型数据结构（如数组、字符串等）时，尽量避免不必要的拷贝。
   • 可以使用共享内存或其他优化技术来提高性能。

示例​

• Rust 中的代码：

use wasm_bindgen::prelude::*;
use wasm_bindgen::JsCast;
use js_sys::Uint8Array;

#[wasm_bindgen]
pub fn allocate_memory(size: usize) -> *mut u8 {
	let mut buffer = Vec::with_capacity(size);
	let ptr = buffer.as_mut_ptr();
	std::mem::forget(buffer); // Prevent Rust from deallocating the memory
	ptr
}

#[wasm_bindgen]
pub fn deallocate_memory(ptr: *mut u8, size: usize) {
	unsafe {
		let _ = Vec::from_raw_parts(ptr, size, size); // Reclaim the memory
	}
}

#[wasm_bindgen]
pub fn process_data(ptr: *mut u8, size: usize) -> Result<JsValue, JsValue> {
	let data = unsafe { Vec::from_raw_parts(ptr, size, size) };
	let sum: u8 = data.iter().sum();
	Ok(JsValue::from(sum))
}

• JavaScript 中的代码：

import init, { allocate_memory, deallocate_memory, process_data } from './pkg/your_project_name.js';

async function run() {
	await init();
	
	const size = 10;
	const ptr = allocate_memory(size);
	const memory = new Uint8Array(wasm_bindgen.memory.buffer, ptr, size);
	
	for (let i = 0; i < size; i++) {
		memory[i] = i + 1;
	}

	const result = process_data(ptr, size);
	console.log(result); // Should output the sum of the array

	deallocate_memory(ptr, size);
}

run();

8. 宏简化​

使用 #[wasm_bindgen(module = "...")] 和 #[wasm_bindgen(inline_js = "...")] 等宏来简化模块导入和内联 JavaScript 代码。

示例​

• 内联 JavaScript 代码：

use wasm_bindgen::prelude::*;

#[wasm_bindgen(module = "/js/foo.js")]
extern "C" {
  fn foo();
}

#[wasm_bindgen(start)]
pub fn main() {
  foo();
}

• 在 foo.js 中：

export function foo() {
  console.log("Hello from JavaScript!");
}

综合示例​

以下是一个综合示例，展示了如何结合这些用法：

• 在 Rust 中：

use wasm_bindgen::prelude::*;
use wasm_bindgen::JsCast;
use wasm_bindgen_futures::JsFuture;
use web_sys::{console, window, Element};

#[wasm_bindgen(module = "/js/foo.js")]
extern "C" {
  fn js_add(a: i32, b: i32) -> i32;
}

#[wasm_bindgen]
pub fn add_in_rust(a: i32, b: i32) -> i32 {
  js_add(a, b)
}

#[wasm_bindgen]
pub async fn fetch_data() -> Result<JsValue, JsValue> {
	let window = window().expect("no global `window` exists");
	let response = JsFuture::from(window.fetch_with_str("https://api.example.com/data")).await?;
	let response: web_sys::Response = response.dyn_into().unwrap();
	let json = JsFuture::from(response.json()?).await?;
	Ok(json)
}

#[wasm_bindgen(start)]
pub fn main() {
  console::log_1(&"Wasm module initialized".into());
}

• 在 foo.js 中：

export function js_add(a, b) {
    return a + b;
}

通过这种方式，你可以充分利用 wasm-bindgen 的功能，构建强大且高效的 WebAssembly 应用程序。

#[wasm_bindgen(start)]宏来指定一个初始化函数，这个函数会在 WebAssembly 模块加载时自动调用。

总结​

wasm-bindgen 提供了多种方式来实现 Rust 和 JavaScript 之间的互操作性。 通过这些方式，你可以轻松地在 Rust 和 JavaScript 之间传递数据、调用函数、处理异步操作等。 这些功能使得 WebAssembly 成为一个强大的工具，可以用于构建高性能的 Web 应用程序。

WebAssembly（简称为Wasm）是一种可移植、高性能的二进制格式，它被设计成一种用于Web浏览器的低级编程语言。WebAssembly 是一种与编程语言无关的格式，这意味着你可以使用多种编程语言来编写WebAssembly模块。目前，主要的编程语言，如C、C++和Rust，已经支持WebAssembly。WebAssembly 的二进制格式是一种紧凑且高效的表示，使得它能够更快地加载和执行。由于它是一种低级格式，直接在虚拟机中执行，因此通常比使用高级语言编写的JavaScript更快。

为什么需要WASM​

如果我问你：Javascript是什么？你的答案是什么？

一种变成语言，对吗？

这个答案是正确的但不完全正确。让我们看看是为什么？

在当今世界，直接在浏览器里面写JS代码很少见。有时候你可能写Typescript并且转换成Javascript

有时候你使用flutter构建web应用，也是将dart代码编译成Javascript，同样Kotlin，CoffeeScript, Elm等都是这样

也就是说Javascript是唯一在浏览器上运行的编程语言(假设没有WASM)，任何想要针对浏览器和语言和框架都必须转为Javascript

但Javascript不是被设计成编译目标(Compilation Target)，并且它没有针对此用例进行优化，WASM是更好的编译目标(Compilation Target)

什么是WASM​

WebAssembly 是一种新型代码，可以在现代 Web 浏览器上运行， 它是一种低级代码具有紧凑二进制格式的类汇编语言，可以以接近本机的性能运行 并为 C/C++、C# 和 Rust 等语言提供编译目标，以便它们可以在网络上运行。

Wasm 和 WASI 之间的关系几乎与 JS 和 NodeJS 之间的关系相同。

事实上，WASM 与 JS 一样，在浏览器沙箱内运行时的访问权限受到限制。

例如，它无法读取系统上的文件或执行比 HTTP 更低级别的网络工作， 例如 TCP 和 UDP。 为什么，因为它的 API 不存在于浏览器上。

什么是WASI​

WASI可以操作浏览器中不存在的系统API

WasmTime的运行时(Runtime)可以在浏览器外以CLI程序的形式运行WASM文件。 这个用于系统任务(如读取文件和使用网络等)的WASM CLI程序使用WASI定义的标准。 这些标准与WASM本身一样，独立于平台，这一点非常重要。 以致于Docker的创建者在推特上写到：

WASI不仅仅适用于云计算，未来我们还会看到需要WASM运行时才能运行的GUI和CLI程序，因为 通过这种方式，开发人员可以更轻松获得输出结果，并在一个操作系统上进行测试，然后就可以放心了。 因为他的程序在任何地方都能以同样的方式运行。