WASM 使用说明23事(RUST实现)

文章目录

    • 1. wasm是什么
      • 1.1 chatgpt定义如下:
      • 1.2 wasm关键特性:
    • 2. wasm demo
      • 2.1 cargo 创建项目
      • 2.2 编写code
      • 2.3 安装wasm-pack
      • 2.4 编译
    • 3.1 html页面引用wasm代码(js引用)
    • 3.2 访问页面
    • 4 导入js function
      • 4.1 编写lib.rs文件,内容如下:
      • 4.2 编译
      • 4.3 html
      • 4.4 访问页面, 结果如下:

1. wasm是什么

1.1 chatgpt定义如下:

WebAssembly(WASM)是一种新兴的、低级的二进制格式,旨在为 web 提供一种高性能的执行环境。它可以与 JavaScript 互操作,使开发者能够在浏览器中运行复杂的应用程序,比如游戏、图形处理、科学计算等。

1.2 wasm关键特性:

  • 高性能:WASM 被设计为快速加载和执行,接近原生代码的性能。
  • 安全性:WASM 在一个安全的沙箱环境中运行,可以防止未授权的内存访问。
  • 跨平台:可以在任何支持的环境中运行,包括浏览器、服务器和嵌入式设备。
  • 语言支持:除了 JavaScript,许多编程语言(如
    Rust、C、C++、Go)可以编译为 WASM。

2. wasm demo

2.1 cargo 创建项目

cargo new --lib wasm-hello 

2.2 编写code

2.2.1 修改Cargo.toml文件, 内容如下:

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

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

[dependencies]
wasm-bindgen = "0.2"

2.2.2 修改src/lib.rs文件, 内容如下:

use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub fn add(a: i32, b: i32) -> i32 {
    return a + b;
}

2.3 安装wasm-pack

cargo install wasm-pack

2.4 编译

进入项目根目录, 然后编译

wasm-pack build --target web

命令执行成功后, 截图如下:
说明: 1. wasm_hello_bg.wasm就是输出的二进制文件
在这里插入图片描述

3.1 html页面引用wasm代码(js引用)

wasm-hello根目录下创建index.html页面, 内容如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Hello World - Rust</title>
    <script type="module">
        import init from "./pkg/wasm_hello.js";
        const runWasm = async () => {
            // Instantiate our wasm module
            const helloWorld = await init("./pkg/wasm_hello_bg.wasm");

            // Call the Add function export from wasm, save the result
            const addResult = helloWorld.add(24, 24);

            // Set the result onto the body
            document.body.textContent = `Hello World! addResult: ${addResult}`;
        };
        runWasm();
    </script>
</head>
<body></body>
</html>

3.2 访问页面

截图如下:
在这里插入图片描述

4 导入js function

4.1 编写lib.rs文件,内容如下:

use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub fn add(a: i32, b: i32) -> i32 {
    return a + b;
}

// Here, we will define our external `console.log`
#[wasm_bindgen]
extern "C" {
    // Use `js_namespace` here to bind `console.log(..)` instead of just
    #[wasm_bindgen(js_namespace = console)]
    fn log(s: &str);
}

// Export a function that will be called in JavaScript
// but call the "imported" console.log.
#[wasm_bindgen]
pub fn console_log_from_wasm() {
    log("This console.log is from wasm!");
}

4.2 编译

进入项目根目录, 然后编译

wasm-pack build --target web

4.3 html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Hello World - Rust</title>
    <script type="module">
        import init from "./pkg/wasm_hello.js";
        const runWasm = async () => {
            // Instantiate our wasm module
            const helloWorld = await init("./pkg/wasm_hello_bg.wasm");

            // Call the Add function export from wasm, save the result
            const addResult = helloWorld.add(24, 24);

            // Set the result onto the body
            document.body.textContent = `Hello World! addResult: ${addResult} `;

            helloWorld.console_log_from_wasm();
        };
        runWasm();
    </script>
</head>
<body></body>
</html>

4.4 访问页面, 结果如下:

页面有console输出“This console.log is from wasm!”
在这里插入图片描述

上一篇:Mac 出现zsh: command not found: aapt


下一篇:大语言模型推理源码解读(基于llama3模型)