Rust 与 WebAssembly 实战：浏览器与 Node.js 高性能应用

Rust 与 WebAssembly 实战：浏览器与 Node.js 高性能应用 | 极客日志

指标	JavaScript	WebAssembly（Rust）
执行速度（计算密集型）	🌟	🌟🌟🌟🌟🌟
内存占用	🌟🌟🌟	🌟🌟🌟🌟
开发效率	🌟🌟🌟🌟🌟	🌟🌟🌟
调试难度	🌟🌟🌟	🌟🌟
生态系统	🌟🌟🌟🌟🌟	🌟🌟🌟

# 使用 Cargo 安装
cargo install wasm-pack

# 使用 Cargo 安装（需要 Rust 1.70 或更高版本）
cargo install cargo-web --version 0.6.42

# 创建项目
wasm-pack new rust-wasm-demo
cd rust-wasm-demo

use wasm_bindgen::prelude::*;

// 使用#[wasm_bindgen]宏标记可以被JavaScript调用的函数
#[wasm_bindgen]
pub fn greet(name: &str) -> String {
    format!("Hello, {}! This is Rust running in WebAssembly!", name)
}

// 计算斐波那契数列
#[wasm_bindgen]
pub fn fibonacci(n: u32) -> u32 {
    if n == 0 || n == 1 {
        return n;
    }
    let mut a = 0;
    let mut b = 1;
    for _ in 2..=n {
        let c = a + b;
        a = b;
        b = c;
    }
    b
}

// 计算数组的平均值
#[wasm_bindgen]
pub fn average(arr: &[f64]) -> f64 {
    if arr.is_empty() {
        return 0.0;
    }
    let sum: f64 = arr.iter().sum();
    sum / arr.len() as f64
}

# 编译为 npm 包
wasm-pack build --target web

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rust WebAssembly Demo</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 0; padding: 20px; background-color: #f5f5f5; }
        .container { max-width: 800px; margin: 0 auto; background-color: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); }
        .result { margin-top: 20px; padding: 10px; background-color: #f0f0f0; border-radius: 4px; font-family: monospace; }
        button { margin-top: 10px; padding: 10px 20px; background-color: #4CAF50; color: #fff; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; }
        button:hover { background-color: #45a049; }
    </style>
</head>
<body>
    <div class="container">
        <h1>Rust WebAssembly Demo</h1>
        <div>
            <label for="name">姓名：</label>
            <input type="text" id="name" value="张三">
            <button onclick="greet()">打招呼</button>
            <div class="result" id="greet-result"></div>
        </div>
        <div>
            <label for="fibonacci-n">斐波那契数列第 n 项：</label>
            <input type="number" id="fibonacci-n" value="40">
            <button onclick="calculateFibonacci()">计算</button>
            <div class="result" id="fibonacci-result"></div>
        </div>
        <div>
            <label for="average-arr">数组（用逗号分隔）：</label>
            <input type="text" id="average-arr" value="1,2,3,4,5">
            <button onclick="calculateAverage()">计算平均值</button>
            <div class="result" id="average-result"></div>
        </div>
    </div>
    <script type="module">
        // 加载 Wasm 模块
        import init, { greet, fibonacci, average } from './pkg/rust_wasm_demo.js';
        
        async function run() {
            // 初始化 Wasm 模块
            await init();
            console.log('Rust WebAssembly 模块初始化成功');
        }
        run();

        // 打招呼
        function greet() {
            const name = document.getElementById('name').value;
            const result = greet(name);
            document.getElementById('greet-result').textContent = result;
        }

        // 计算斐波那契数列
        function calculateFibonacci() {
            const n = parseInt(document.getElementById('fibonacci-n').value);
            const start = performance.now();
            const result = fibonacci(n);
            const end = performance.now();
            const time = (end - start).toFixed(2);
            document.(). = ;
        }

        
         () {
             arrStr = .().;
             arr = arrStr.().().( !(x));
             result = (arr);
            .(). = ;
        }
    </script>
</body>
</html>

# 初始化 Vite 项目
npm init vite@latest . -- --template vanilla
# 安装依赖
npm install
# 运行开发服务器
npm run dev

[dependencies]
wasm-bindgen = "0.2"
serde = { version = "1.0", features = ["derive"] }
serde-wasm-bindgen = "0.5"
js-sys = "0.3"
web-sys = { version = "0.3", features = ["console", "Document", "Element", "HtmlElement"] }

use wasm_bindgen::prelude::*;
use serde::Serialize;
use serde_wasm_bindgen::to_value;
use js_sys::Array;
use web_sys::console;

// 定义用户结构体
#[derive(Debug, Serialize)]
struct User {
    id: u32,
    username: String,
    email: String,
    age: Option<u8>,
    tags: Vec<String>,
}

// 定义产品枚举
#[derive(Debug, Serialize)]
enum Product {
    Book { title: String, author: String, price: f64 },
    Electronics { name: String, brand: String, price: f64, warranty: u32 },
    Clothing { name: String, size: String, price: f64 },
}

// 获取用户列表
#[wasm_bindgen]
pub fn get_users() -> JsValue {
    let users = vec![
        User {
            id: 1,
            username: "张三".to_string(),
            email: "[email protected]".to_string(),
            age: Some(25),
            tags: vec!["前端".to_string(), "Rust".to_string()],
        },
        User {
            id: 2,
            username: "李四".to_string(),
            email: "[email protected]".to_string(),
            age: None,
            tags: vec!["后端".to_string(), "Go".to_string()],
        },
        User {
            id: 3,
            username: "王五".to_string(),
            email: "[email protected]".to_string(),
            age: Some(30),
            tags: vec!["全栈".to_string(), "Python".to_string()],
        },
    ];
    to_value(&users).expect("序列化用户列表失败")
}

// 获取产品列表
#[wasm_bindgen]
pub fn get_products() -> JsValue {
    let products = vec![
        Product::Book {
            title: "Rust 语言开发从入门到精通".to_string(),
            author: "Rust 专家".to_string(),
            price: 99.0,
        },
        Product::Electronics {
            name: "MacBook Pro".to_string(),
            brand: "Apple".to_string(),
            price: 18999.0,
            warranty: 24,
        },
        Product::Clothing {
            name: "Rust T 恤".to_string(),
            size: "L".to_string(),
            price: 99.0,
        },
    ];
    to_value(&products).expect("序列化产品列表失败")
}

// 计算订单总价
#[wasm_bindgen]
pub fn calculate_total_price(cart: JsValue) -> f64 {
    let cart: Vec<(String, f64, u32)> = serde_wasm_bindgen::from_value(cart).expect("解析购物车失败");
    let total: f64 = cart.iter().map(|(name, price, quantity)| price * quantity as f64).sum();
    total
}

// 获取用户列表
function getUsers() {
    const users = get_users();
    console.log('用户列表:', users);
    document.getElementById('users-result').textContent = JSON.stringify(users, null, 2);
}

// 获取产品列表
function getProducts() {
    const products = get_products();
    console.log('产品列表:', products);
    document.getElementById('products-result').textContent = JSON.stringify(products, null, 2);
}

// 计算订单总价
function calculateTotalPrice() {
    const cart = [
        { name: 'Rust 语言开发从入门到精通', price: 99.0, quantity: 1 },
        { name: 'Rust T 恤', price: 99.0, quantity: 2 },
        { name: 'MacBook Pro', price: 18999.0, quantity: 1 },
    ];
    const total = calculate_total_price(cart);
    document.getElementById('total-price-result').textContent = `订单总价：${total.toFixed(2)}元`;
}

[dependencies]
wasm-bindgen-futures = "0.4"
reqwest = { version = "0.11", features = ["json"] }

use wasm_bindgen::prelude::*;
use wasm_bindgen_futures::spawn_local;
use reqwest::Client;
use serde::Deserialize;
use web_sys::console;

// 定义 GitHub 用户结构体
#[derive(Debug, Deserialize)]
struct GitHubUser {
    login: String,
    id: u32,
    avatar_url: String,
    html_url: String,
    name: Option<String>,
    bio: Option<String>,
    public_repos: u32,
    followers: u32,
    following: u32,
    created_at: String,
}

// 获取 GitHub 用户信息
#[wasm_bindgen]
pub fn get_github_user(username: &str) -> JsValue {
    let username = username.to_string();
    let promise = js_sys::Promise::new(&mut move |resolve, reject| {
        spawn_local(async move {
            let client = Client::new();
            let url = format!("https://api.github.com/users/{}", username);
            let result = client.get(&url).send().await.and_then(|response| response.json::<GitHubUser>().await);
            match result {
                Ok(user) => {
                    resolve.call1(&JsValue::NULL, &serde_wasm_bindgen::to_value(&user).expect("序列化 GitHub 用户失败")).unwrap();
                }
                Err(e) => {
                    reject.call1(&JsValue::NULL, &JsValue::from_str(&e.to_string())).unwrap();
                }
            }
        });
    });
    promise.into()
}

// 获取 GitHub 用户信息
async function getGitHubUser() {
    const username = document.getElementById('github-username').value;
    try {
        const user = await get_github_user(username);
        console.log('GitHub 用户信息:', user);
        document.getElementById('github-user-result').textContent = JSON.stringify(user, null, 2);
    } catch (e) {
        console.error('获取 GitHub 用户信息失败:', e);
        document.getElementById('github-user-result').textContent = `获取用户信息失败：${e}`;
    }
}

[dependencies.web-sys]
version = "0.3"
features = [
    "Document",
    "Element",
    "HtmlElement",
    "Node",
    "Window",
    "Event",
    "EventListener",
    "HtmlInputElement",
    "HtmlButtonElement",
    "HtmlDivElement",
    "HtmlHeadingElement",
    "HtmlParagraphElement",
]
chrono = "0.4"

use wasm_bindgen::prelude::*;
use wasm_bindgen::closure::Closure;
use web_sys::{document, window, Event, HtmlInputElement, HtmlButtonElement, HtmlDivElement};
use chrono::Utc;

// 创建一个简单的待办事项列表
#[wasm_bindgen]
pub fn create_todo_list() {
    let document = document().expect("无法获取文档对象");
    // 创建容器
    let container = document.create_element("div").expect("无法创建容器");
    container.set_id("todo-container");
    container.set_inner_html(r#"
        <h2>待办事项列表</h2>
        <input type="text" placeholder="添加待办事项...">
        <button>添加</button>
        <div></div>
    "#);
    // 添加到文档中
    document.body().expect("无法获取 body 元素").append_child(&container).expect("无法添加容器");
    // 添加事件监听
    let add_button = document.get_element_by_id("todo-add-button").expect("无法找到添加按钮").dyn_into::<HtmlButtonElement>().expect("添加按钮类型不正确");
    let closure = Closure::wrap(Box::new(move |_e: Event| {
        let document = document().expect("无法获取文档对象");
        let input = document.get_element_by_id("todo-input").expect("无法找到输入框").dyn_into::<HtmlInputElement>().expect("输入框类型不正确");
        let text = input.value();
        if !text.is_empty() {
            add_todo_item(text.as_str());
            input.set_value("");
        }
    }) as Box<dyn FnMut(_)>);
    add_button.add_event_listener_with_callback("click", closure.as_ref().unchecked_ref()).expect("无法添加事件监听");
    closure.forget();
}

// 添加待办事项
fn add_todo_item(text: &str) {
    let document = document().expect("无法获取文档对象");
    let todo_list = document.get_element_by_id("todo-list").expect("无法找到待办事项列表").dyn_into::<HtmlDivElement>().expect("待办事项列表类型不正确");
    let todo_item = document.create_element("div").expect("无法创建待办事项");
    todo_item.set_id(&format!("todo-item-{}", Utc::now().timestamp_nanos()));
    todo_item.set_inner_html(&format!(r#"
        <span>{}</span>
        <button>删除</button>
    "#, text));
    todo_list.append_child(&todo_item).expect("无法添加待办事项");
    // 添加删除事件监听
    let remove_button = todo_item.get_elements_by_class_name("todo-remove-button").item(0).expect("无法找到删除按钮").dyn_into::<HtmlButtonElement>().expect("删除按钮类型不正确");
    let todo_item_clone = todo_item.clone();
    let closure = Closure::wrap(Box::new(move |_e: Event| {
        let document = document().expect("无法获取文档对象");
        let parent = document.get_element_by_id("todo-list").expect("无法找到待办事项列表").dyn_into::<HtmlDivElement>().expect("待办事项列表类型不正确");
        parent.remove_child(&todo_item_clone).expect("无法删除待办事项");
    }) as Box<dyn FnMut(_)>);
    remove_button.add_event_listener_with_callback("click", closure.as_ref().unchecked_ref()).expect("无法添加事件监听");
    closure.forget();
}

use wasm_bindgen::prelude::*;
use image::RgbaImage;
use image::Pixel;
use imageproc::contrast::adaptive_equalization;
use imageproc::filter::gaussian_blur_f32;
use imageproc::filter::sharpen;
use imageproc::ops::invert;
use web_sys::console;

// 将 base64 编码的图片数据转换为 RgbaImage
fn base64_to_image(base64: &str) -> RgbaImage {
    let base64 = base64.strip_prefix("data:image/png;base64,").unwrap_or(base64);
    let bytes = base64::decode(base64).expect("解析 base64 图片数据失败");
    let image = image::load_from_memory(&bytes).expect("加载图片失败").to_rgba8();
    image
}

// 将 RgbaImage 转换为 base64 编码的图片数据
fn image_to_base64(image: RgbaImage) -> String {
    let mut buffer = Vec::new();
    image::write_buffer_with_format(&mut buffer, &image, image::ImageOutputFormat::Png).expect("保存图片失败");
    format!("data:image/png;base64,{}", base64::encode(buffer))
}

// 灰度滤镜
#[wasm_bindgen]
pub fn apply_grayscale(base64: &str) -> String {
    let mut image = base64_to_image(base64);
    for pixel in image.pixels_mut() {
        let r = pixel[0] as u32;
        let g = pixel[1] as u32;
        let b = pixel[2] as u32;
        let gray = (r * 0.299 + g * 0.587 + b * 0.114) as u8;
        pixel[0] = gray;
        pixel[1] = gray;
        pixel[2] = gray;
    }
    image_to_base64(image)
}

// 反转滤镜
#[wasm_bindgen]
pub fn apply_invert(base64: &str) -> String {
    let mut image = base64_to_image(base64);
    invert(&mut image);
    image_to_base64(image)
}

// 模糊滤镜
#[wasm_bindgen]
pub fn apply_blur(base64: &str, sigma: f32) -> String {
    let image = base64_to_image(base64);
    let blurred = gaussian_blur_f32(&image, sigma);
    image_to_base64(blurred)
}

// 锐化滤镜
#[wasm_bindgen]
pub fn apply_sharpen(base64: &str, amount: f32) -> String {
    let image = base64_to_image(base64);
    let sharpened = sharpen(&image, amount);
    image_to_base64(sharpened)
}

// 自适应直方图均衡化滤镜
#[wasm_bindgen]
pub fn apply_contrast(base64: &str) -> String {
    let image = base64_to_image(base64);
    let equalized = adaptive_equalization(&image, 8, 8, 0.15);
    image_to_base64(equalized)
}

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rust Wasm Canvas 图像滤镜</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 0; padding: 20px; background-color: #f5f5f5; }
        .container { max-width: 1000px; margin: 0 auto; background-color: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); }
        .image-container { display: flex; gap: 20px; margin-top: 20px; }
        .image-wrapper { flex: 1; }
        .image-wrapper h3 { text-align: center; margin-bottom: 10px; }
        .image-wrapper img { width: 100%; height: auto; border: 1px solid #ddd; border-radius: 4px; }
        .controls { margin-top: 20px; padding: 10px; background-color: #f0f0f0; border-radius: 4px; }
        .controls label { margin-right: 10px; }
        .controls input, .controls select, .controls button { margin-right: 10px; padding: 5px; border: 1px solid #ddd; border-radius: 4px; }
    </style>
</head>
<body>
    <div class="container">
        <h1>Rust Wasm Canvas 图像滤镜</h1>
        <div class="controls">
            <input type="file" id="image-file" accept="image/png,image/jpeg,image/jpg">
            <select id="filter-type">
                <option value="grayscale">灰度</option>
                <option value="invert">反转</option>
                <option value="blur">模糊</option>
                <option value="sharpen">锐化</option>
                <option value="contrast">对比度增强</option>
            </select>
            <input type="number" id="blur-sigma" value="2.0" step="0.1" min="0.1" max="10.0" style="display:none;">
            <input type="number" id="sharpen-amount" value="1.5" step="0.1" min="0.1" max="10.0" style="display:none;">
            <button onclick="applyFilter()">应用滤镜</button>
        </div>
        <div class="image-container">
            <div class="image-wrapper">
                <h3>原图</h3>
                <img id="original-image" src="" alt="原图">
            </div>
            <div class="image-wrapper">
                <h3>处理后</h3>
                <img id="filtered-image" src="" alt="处理后">
            </div>
        </div>
    </div>
    <script type="module">
        import init, { apply_grayscale, apply_invert, apply_blur, apply_sharpen, apply_contrast } from './pkg/rust_wasm_demo.js';
        await init();

        // 加载图片
        document.getElementById('image-file').addEventListener('change', function(e) {
            const file = e.target.files[0];
            const reader = new FileReader();
            reader.onload = function(e) {
                document.getElementById('original-image').src = e.target.result;
                document.getElementById('filtered-image').src = '';
            };
            reader.readAsDataURL(file);
        });

        // 显示/隐藏滤镜参数输入框
        document.getElementById('filter-type').addEventListener('change', function(e) {
            const blurSigmaInput = document.getElementById('blur-sigma');
            const sharpenAmountInput = document.getElementById();
            (e.. === ) {
                blurSigmaInput.. = ;
                sharpenAmountInput.. = ;
            }  (e.. === ) {
                blurSigmaInput.. = ;
                sharpenAmountInput.. = ;
            }  {
                blurSigmaInput.. = ;
                sharpenAmountInput.. = ;
            }
        });

        
          () {
             originalImage = .();
            (!originalImage.){();;}
            
             canvas = .();
             ctx = canvas.();
             img =  ();
            img. =  (){
                canvas. = img.;
                canvas. = img.;
                ctx.(img,,);
                 dataURL = canvas.();
                
                 filteredDataURL;
                 filterType = .().;
                (filterType){
                    : filteredDataURL =(dataURL);;
                    : filteredDataURL =(dataURL);;
                    : sigma =(.().); filteredDataURL =(dataURL, sigma);;
                    : amount =(.().); filteredDataURL =(dataURL, amount);;
                    : filteredDataURL =(dataURL);;
                    :();;
                }
                
                .(). = filteredDataURL;
            };
            img. = originalImage.;
        }
    </script>
</body>
</html>

use wasm_bindgen::prelude::*;
use flate2::write::GzEncoder;
use flate2::Compression;
use std::io::Write;
use base64;

// 压缩字符串
#[wasm_bindgen]
pub fn compress_string(input: &str, level: u32) -> String {
    let mut encoder = GzEncoder::new(Vec::new(), Compression::new(level));
    encoder.write_all(input.as_bytes()).expect("压缩失败");
    let compressed = encoder.finish().expect("压缩失败");
    base64::encode(compressed)
}

// 解压缩字符串
#[wasm_bindgen]
pub fn decompress_string(input: &str) -> String {
    let compressed = base64::decode(input).expect("解析 base64 数据失败");
    let mut decoder = flate2::read::GzDecoder::new(&compressed[..]);
    let mut decompressed = String::new();
    std::io::Read::read_to_string(&mut decoder, &mut decompressed).expect("解压缩失败");
    decompressed
}

// 压缩二进制数据
#[wasm_bindgen]
pub fn compress_bytes(input: &[u8], level: u32) -> Vec<u8> {
    let mut encoder = GzEncoder::new(Vec::new(), Compression::new(level));
    encoder.write_all(input).expect("压缩失败");
    encoder.finish().expect("压缩失败")
}

// 解压缩二进制数据
#[wasm_bindgen]
pub fn decompress_bytes(input: &[u8]) -> Vec<u8> {
    let mut decoder = flate2::read::GzDecoder::new(&input[..]);
    let mut decompressed = Vec::new();
    std::io::Read::read_to_end(&mut decoder, &mut decompressed).expect("解压缩失败");
    decompressed
}

const fs = require('fs');
const path = require('path');
const wasmPath = path.join(__dirname,'pkg','rust_wasm_demo.js');
const wasmModule = require(wasmPath);

async function run(){
    // 初始化 Wasm 模块
    await wasmModule.default();
    console.log('Rust WebAssembly 模块初始化成功');

    // 测试字符串压缩
    const testString = 'Hello, this is a test string for data compression! '.repeat(1000);
    const compressedString = wasmModule.compress_string(testString, 9);
    const decompressedString = wasmModule.decompress_string(compressedString);
    console.log(`字符串压缩前大小：${testString.length} bytes`);
    console.log(`字符串压缩后大小：${compressedString.length} bytes`);
    console.log(`字符串压缩率：${((1- compressedString.length / testString.length)*100).toFixed(2)}%`);
    console.log(`字符串解压缩成功：${decompressedString === testString}`);

    // 测试二进制数据压缩
    const testFile = path.join(__dirname,'test.txt');
    const testData = fs.readFileSync(testFile);
    const compressedData = wasmModule.compress_bytes(testData);
    const decompressedData = wasmModule.decompress_bytes(compressedData);
    console.log(`二进制数据压缩前大小：${testData.length} bytes`);
    console.log(`二进制数据压缩后大小：${compressedData.length} bytes`);
    console.log(`二进制数据压缩率：${((1- compressedData.length / testData.length)*100).toFixed(2)}%`);
    console.log(`二进制数据解压缩成功：${Buffer.compare(decompressedData, testData)===0}`);

    // 写入压缩后的文件
    const compressedFile = path.join(__dirname,'test.txt.gz');
    fs.writeFileSync(compressedFile, Buffer.from(compressedData));
    console.log(`压缩后的文件已写入：${compressedFile}`);
}
run();

Rust 与 WebAssembly 实战：浏览器与 Node.js 高性能应用

Rust 与 WebAssembly 实战：浏览器与 Node.js 高性能应用

一、学习目标与重点

1.1 学习目标

1.2 学习重点

二、WebAssembly 基础

2.1 WebAssembly 的定义与特点

微信扫一扫，关注极客日志

更多推荐文章

相关免费在线工具

2.2 Wasm 与 JavaScript 的性能对比

2.3 Wasm 的使用场景

三、Rust 到 Wasm 的编译工具链

3.1 安装 wasm-pack

3.2 安装 cargo-web

四、Rust 与 JavaScript 交互基础

4.1 创建一个简单的 Wasm 项目

4.2 编写 Rust 代码

4.3 编译 Wasm 模块

4.4 编写 HTML 与 JavaScript 代码

4.5 运行 Wasm 应用

五、Rust 与 JavaScript 交互进阶

5.1 处理复杂数据类型

5.1.1 安装依赖

5.1.2 编写 Rust 代码

5.1.3 编写 JavaScript 代码

5.2 异步交互

5.2.1 安装依赖

5.2.2 编写 Rust 代码

5.2.3 编写 JavaScript 代码

5.3 DOM 操作

5.3.1 安装依赖

5.3.2 编写 Rust 代码

六、真实案例应用

6.1 案例 1：浏览器端高性能 Canvas 图像滤镜

6.1.1 编写 Rust 代码

6.1.2 编写 HTML 与 JavaScript 代码

6.2 案例 2：Node.js 端计算密集型任务——数据压缩

6.2.1 编写 Rust 代码

6.2.2 编写 Node.js 代码

七、常见问题与解决方案

7.1 未正确释放 Wasm 分配的内存

7.2 数据类型转换时的边界检查

7.3 Wasm 模块加载失败

八、总结与展望

8.1 总结

8.2 展望

微信扫一扫，关注极客日志

更多推荐文章

相关免费在线工具