XieZongChen / practice-wasm

practice wasm

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

练习 wasm 项目

项目

├── src              # rust 所在目录
├── index.js         # web 脚本入口
├── Cargo.toml       # rust 项目配置文件
└── package.json     # web 项目配置文件

指令

对于 rust

# --target 标志用于指定要构建的目标平台
# wasm32-unknown-unknown 是指定了 WebAssembly 目标平台,
# 这告诉 Cargo 生成「适用于 WebAssembly 的二进制文件」,而不是生成本地平台的二进制文件
cargo build --target wasm32-unknown-unknown

当运行这个命令后,Cargo 会使用 Rust 编译器(Rustc)以及与 WebAssembly 相关的工具链,将 Rust 代码编译为 WebAssembly 格式的二进制文件。这个生成的 Wasm 文件可以在浏览器中运行,或与其他支持 WebAssembly 的环境一起使用。

对于 web

# 启动 dev 环境 localhost:8080
npm run serve

# 构建程序
npm run build

原理探析

在使用 cargo 和 wasm_bindgen 编译源代码时,会在 pkg 文件中「自动生成」以下文件:

  • wasm_rust_bg.js
  • wasm_rust_bg.wasm
  • wasm_rust_bg.wasm.d.ts
  • wasm_rust.js
  • wasm_rust.d.ts
  • package.json

wasm_rust_bg.js 文件是由 wasm-bindgen 自动生成的,它包含了用于将 DOM 和 JavaScript 函数导入到 Rust 中的 JavaScript 粘合代码。它还在生成的 WebAssembly 函数上向 JavaScript 公开了 API。

Rust WebAssembly 专注于将 WebAssembly 与现有的 JavaScript 应用程序集成在一起。为了实现这一目标,我们需要在 JavaScript 和 WebAssembly 函数之间「传递不同的值、对象或结构。这并不容易,因为需要协调两个不同系统的不同对象类型」。

当前 WebAssembly 仅支持「整数」和「浮点数」,不支持字符串。这意味着我们不能简单地将字符串传递给 WebAssembly 函数。要将字符串传递给 WebAssembly,我们需要「将字符串转换为数字」(请注意在 webpack.config.js 中指定的 TextEncoder API),将这些数字放入 WebAssembly 的内存空间中,最后「返回一个指向字符串的指针」给 WebAssembly 函数,以便在 JavaScript 中使用它。在最后,我们需要释放 WebAssembly 使用的字符串内存空间。

在 wasm_rust_bg.js 中可以找到一个 hello_world 函数,这正是自动执行的操作。hello_world 函数首先调用 passStringToWasm。这个函数在 WebAssembly 中「创建一些内存空间」,将我们的字符串转换为数字,将数字写入内存空间,并返回一个指向字符串的指针。然后将指针传递给 wasm.hello_world 来执行 JavaScript 的 alert。最后,wasm.__wbindgen_free 释放了内存。

About

practice wasm


Languages

Language:Rust 61.3%Language:JavaScript 38.7%