写点什么

Rust 入门指南 (用 WASM 开发第一个 Web 页面)

作者:王泰
  • 2022 年 8 月 04 日
  • 本文字数:1990 字

    阅读完需:约 7 分钟

JavaScript 现在也可以拥有高性能和强类型特性了。

在 WASM 成为技术社区的主流技术之前,大部分的情况下,开发者还是更加愿意使用 JavaScript 和 TypeScript。现在,WebAssembly 已经为前端开发带来了前所未有的安全的性能优势。

WebAssembly (WASM) 使用一种二进制的语言,浏览器高效的把它转换成机器码,比 JavaScript 更有效率。在浏览器中就可以运行 C、Rust 和 Zig 等语言在浏览器执行代码。

WebAssembly 不止运行在浏览器端,事实上,WASM 也在链上构建智能合约生态,这意味着 WebAssembly 正在成为多种行业的重要参与者。

创建 WASM 最重要的原因就是速度,黑客甚至将恶意的 JavaScript 代码注入到容易受到攻击的网站,加载 WASM 编写的挖矿代码,这也证明了 WebAssembly 的性能完全不同 JavaScript。

今天我们介绍如何使用 Rust 构建简单的 WASM 并在 JavaScript 上运行。

设置

假设已经安装了 Rust 的基本设置,如果没有可以使用 https://GeekCode.cloud 云开发环境。

打开环境后,我们安装 cargo-generate

cargo install cargo-generate
复制代码


接下来安装工具 wasm-pack ,用来从 Rust 构建 WebAssembly:

curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh
复制代码

一切准备就绪,接下来我们创建项目:

cargo generate --git https://github.com/rustwasm/wasm-pack-template
复制代码


这里的 project 名字,起名叫做“testing”。

在 JS 中导入第一个 Rust 函数

和其他 cargo 项目一样, src/lib.rs 文件将被编译为 WASM 的文件。 Cargo.toml 文件来管理依赖项、设置、元数据等。

打开lib.rs,让我们看看它的当前代码。

这是一个简单的模板,使用 wasm-bindingen 导入 JavaScript 的 alert 函数,然后定义(公共)greet 函数,供 JS 将来调用。

接下来做两件事:

  1. 将 rust 代码编译成 wasm

  2. 导入 wasm 并从 index.html 页面调用 greet 函数。

构建 Rust 代码生成 WASM

我们使用 wasm-pack 构建 WASM 时使用 --target web 标志。

在 crate 的目录中,运行以下命令:

wasm-pack build --target web
复制代码

如果使用 GeekCode 平台,这里可以使用加速编译:

这将在 ./pkg 文件夹中生成一些文件。 在这些文件中,有一个 wasm 二进制文件 (testing_bg.wasm) 和一个 js 文件 (testing.js),js 文件提供 API,用于在 JavaScript 中加载 WASM 函数。

运行 greet 方法

在项目的根目录下,创建一个 index.html 文件,然后导入 ./pkg/testing.js 文件。 这将允许您初始化 wasm API 并调用 greet() 函数。 HTML 文件应如下所示:

<!DOCTYPE html><html>  <head>    <meta content="text/html;charset=utf-8" http-equiv="Content-Type"/>  </head>  <body>
    <script type="module">      import init, { greet } from './pkg/testing.js';
      async function run_wasm() {          await init();          greet();      }
      run_wasm();    </script>  </body></html>
复制代码

运行index.html文件(这里使用的是 snowpack,运行snowpack dev在工程目录下),

如果用的是 GeekCode 平台,创建 Dev URL 用来访问 8080 端口


你会看到greet()函数调用的警报弹出:

修改 DOM

 

本节假定您已阅读上一节。

上面的部分提介绍了如何在浏览器中加载 Rust 所需的几乎所有内容。 您可能还想知道如何直接从 Rust 修改 DOM。 在本段中,我将快速向您展示如何操作。

为此,请将 web-sys 依赖项添加到您的 Cargo.toml 文件中:

[dependencies.web-sys]version = "0.3.4"features = [  'Document',  'Element',  'HtmlElement',  'Node',  'Window',]
复制代码

现在我们必须添加一个函数,该函数使用web-sys 调用浏览器窗口,然后访问 DOM 并修改。

我们的带有新函数的 lib.rs 将如下所示:

如果您现在重新构建 crate(wasm-pack build --target web 可以使用 GeekCode 加速编译),您将能够从您的 index.html 文件中导入 add_heading 函数:

<!DOCTYPE html><html>  <head>    <meta content="text/html;charset=utf-8" http-equiv="Content-Type"/>  </head>  <body>
    <script type="module">      import init, { greet, add_heading } from './pkg/testing.js';
      async function run_wasm() {     await init(); //   greet();     add_heading();      }
      run_wasm();    </script>  </body></html>
复制代码

再次运行 HTML,将看到标题。

因为 WASM 相关的主题文章很多,本文将是一个新的系列的开始,主要是在讨论优化与 WebAssembly 接口的应用程序以更好地适应 wasm 线性内存模型。

希望这篇文章能帮助你开始使用 Rust 和 WASM,至少对尝试这项技术感到好奇。

Keep Rusty!

发布于: 刚刚阅读数: 4
用户头像

王泰

关注

还未添加个人签名 2011.07.21 加入

GeekCode.Cloud 创始人

评论

发布
暂无评论
Rust 入门指南 (用 WASM 开发第一个 Web 页面)_rust_王泰_InfoQ写作社区