2,614 讀數

利用 Rust 和 WebAssembly 实现实用的 Web 解决方案

经过 Max Zhuk7m2023/11/13

太長; 讀書

通过实践指南探索 Rust 和 WebAssembly 在 Web 开发中的强大功能，将理论与实际应用联系起来。

featured image - 利用 Rust 和 WebAssembly 实现实用的 Web 解决方案

在之前的探索中，我们深入研究了 Rust 和 WebAssembly 的基础知识，揭示了它们以无与伦比的性能和安全性彻底改变 Web 开发的潜力。我们通过一个简单而富有洞察力的示例演示了这一点：阶乘计算器。但探索这些突破性技术的旅程并没有就此结束。现在，我们进一步冒险，将理论转化为实践，将抽象转化为有形。

介绍

Web 开发领域不断发展，新技术不断涌现，以解决复杂问题、优化性能并增强用户体验。其中， Rust和 WebAssembly 作为强大的组合脱颖而出，提供了以前在 Web 应用程序中难以实现的速度、安全性和效率。

本文旨在弥合理解和应用之间的差距。我们将踏上使用 Rust 和 WebAssembly 构建实用插件的旅程，不仅说明这些技术背后的“方式”，还说明“原因”。该插件将作为 Rust 和 WebAssembly 如何在现实世界的 Web 开发场景中使用的具体示例。

此外，我们将探索 Rust 和 WebAssembly 正在产生重大影响的现实应用程序的多样性。从游戏到数据处理和媒体流，我们将揭示这些技术如何重塑我们所知道的网络。

加入我们，我们将步入一个性能与实用性、创新与实施相交叉的世界。让我们在实际的 Web 解决方案中释放 Rust 和 WebAssembly 的全部潜力。

使用 Rust 和 WebAssembly 构建简单的插件

在本节中，我们将创建一个插件，展示 Rust 和 WebAssembly 在 Web 开发中的强大功能和多功能性。对于我们的示例，让我们构建一个执行情感分析的文本处理实用程序。该插件将分析给定文本的情绪并返回分数，提供如何将 Rust 用于 Web 应用程序中更复杂的任务的实际演示。

客观的

我们的目标是开发一个插件，将一串文本作为输入并返回情绪分数。该分数将表明文本是正面、负面还是中性。这种插件在客户反馈分析、社交媒体监控或任何了解用户情绪有价值的平台等应用程序中特别有用。

设置项目

首先，我们将设置 Rust 项目环境。此设置至关重要，因为它为我们的情绪分析插件奠定了基础。

1. 创建一个新的 Rust 项目

首先，我们需要创建一个新的 Rust 库项目。该项目将容纳我们的情感分析逻辑。

打开终端并运行以下命令来创建新的 Rust 库：

 cargo new --lib sentiment_analyzer

 cd sentiment_analyzer

2.添加依赖

我们的插件需要一些外部库来处理文本。对于此示例，我们使用基于关键字的简单方法进行情感分析。

编辑Cargo.toml文件以包含必要的依赖项：

 [dependencies] serde = { version = "1.0", features = ["derive"] } serde_json = "1.0" wasm-bindgen = "0.2"

这里， serde和serde_json用于 JSON 序列化， wasm-bindgen对于创建 WebAssembly 绑定至关重要。

3. 编写基本 Rust 代码

现在，让我们编写一个基本的Rust 函数来分析情绪。该功能将是初级的，使用预定义的关键字来确定情绪。

导航到src/lib.rs并将其内容替换为以下代码：

 use wasm_bindgen::prelude::*; #[wasm_bindgen] pub fn analyze_sentiment(text: &str) -> String { let positive_words = vec!["happy", "good", "great", "awesome", "positive"]; let negative_words = vec!["sad", "bad", "terrible", "awful", "negative"]; let mut score = 0; for word in text.split_whitespace() { if positive_words.contains(&word) { score += 1; } else if negative_words.contains(&word) { score -= 1; } } match score { s if s > 0 => "Positive".to_string(), s if s < 0 => "Negative".to_string(), _ => "Neutral".to_string(), } }

该函数analyze_sentiment接受一个字符串切片作为输入并返回一个指示情绪的字符串。这是一个计算正面和负面单词出现次数的基本实现。

4. 编译为WebAssembly

使用wasm-pack将 Rust 代码编译为 WebAssembly ：

 wasm-pack build --target web

此命令将 Rust 代码编译成适合 Web 使用的 WebAssembly 模块。

5. 验证设置

编译完成后，检查项目文件夹中的pkg目录。您应该找到 WebAssembly 模块 ( sentiment_analyzer_bg.wasm ) 和生成的 JavaScript 绑定 ( sentiment_analyzer.js )。

将 WebAssembly 模块集成到 Web 应用程序中

将 Rust 代码编译为 WebAssembly 后，下一步就是将此模块集成到一个简单的 Web 应用程序中。这将允许用户直接在浏览器中输入文本并接收情绪分析结果。

创建网络界面

设置 HTML 文件：在项目目录中创建一个index.html文件。该文件将作为我们应用程序的前端。

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Sentiment Analyzer</title> </head> <body> <h1>Sentiment Analyzer</h1> <textarea id="textInput" placeholder="Enter text here..."></textarea> <button id="analyzeButton">Analyze Sentiment</button> <p>Analysis Result: <span id="result"></span></p> <script src="./pkg/sentiment_analyzer.js"></script> <script src="./bootstrap.js"></script> </body> </html>

该 HTML 结构包括一个用于输入的文本区域、一个用于触发分析的按钮以及一个用于显示结果的段落。

创建 JavaScript Bootstrap 文件：在同一目录中，创建一个名为bootstrap.js的文件。该文件将加载并使用我们的 WebAssembly 模块。

 import init, { analyze_sentiment } from './pkg/sentiment_analyzer.js'; async function run() { await init(); document.getElementById('analyzeButton').addEventListener('click', () => { const text = document.getElementById('textInput').value; const result = analyze_sentiment(text); document.getElementById('result').textContent = result; }); } run();

该脚本从我们的 WebAssembly 模块导入analyze_sentiment函数，并在按钮上设置一个事件监听器。单击时，它会分析文本区域中的文本并显示结果。

测试应用程序

为应用程序提供服务：使用简单的 HTTP 服务器为您的项目目录提供服务。如果你没有，你可以通过 npm 安装http-server ：
```
 npm install -g http-server
```
运行服务器：
```
 http-server .
```
访问应用程序：打开浏览器并导航至http://localhost:8080 。您应该会看到您的情绪分析器应用程序。
尝试一下：在文本区域中输入一些文本，单击“分析情绪”按钮，观察情绪分析结果。

Rust 和 WebAssembly 的实际应用

在探索了使用 Rust 和 WebAssembly 构建插件的技术方面之后，有必要了解这些技术如何在现实场景中应用。本节将重点介绍 Rust 和 WebAssembly 做出重大贡献的几个关键领域。

实例探究

网页游戏：Rust 和 WebAssembly 通过提供接近本机的性能，正在彻底改变基于浏览器的游戏。曾经仅限于桌面应用程序的游戏现在可以在浏览器中高效运行，提供复杂的图形和快速的游戏体验。
数据处理：Rust 在处理大型数据集方面的效率正在 Web 应用程序中用于数据分析和处理任务。 WebAssembly 允许在浏览器中执行这些繁重的计算，从而减少服务器负载并改善用户体验。
媒体和流媒体：增强 Web 平台的视频编码和解码是 Rust 和 WebAssembly 擅长的另一个领域。它们可以直接在浏览器中更快地处理媒体内容，这对于流媒体服务至关重要。