WebAssembly और Rust के साथ काम करना: A से Z तक

WebAssembly और Rust का परिचय

WebAssembly (WASM) एक निम्न-स्तरीय बाइनरी निर्देश प्रारूप है जो ब्राउज़र में लगभग नेटिव गति से उच्च-प्रदर्शन कोड चलाने की अनुमति देता है। Rust, अपनी स्वामित्व प्रणाली और कचरा संग्रहकर्ता की अनुपस्थिति के साथ, WebAssembly में कंपाइल करने के लिए एक आदर्श भाषा है। इस लेख में हम टूल्स की स्थापना से लेकर Rust में एक पूर्ण WASM मॉड्यूल बनाने तक का सफर तय करेंगे।

Rust ही क्यों? यह सुरक्षित मेमोरी प्रबंधन, न्यूनतम बाइनरी आकार और उत्कृष्ट प्रदर्शन प्रदान करता है। WebAssembly के साथ मिलकर, आप जटिल एल्गोरिदम, गेम, ग्राफिक्स एडिटर और यहां तक कि ब्राउज़र में चलने वाले पूर्ण एप्लिकेशन लिखने की क्षमता प्राप्त करते हैं।

टूल्स की स्थापना और वातावरण तैयार करना

शुरू करने के लिए आपको आवश्यकता होगी:

\n
• Rust (rustup के माध्यम से स्थापित)
\n
• लक्ष्य प्लेटफ़ॉर्म wasm32-unknown-unknown
\n
• टूल wasm-pack (WASM बिल्ड और प्रकाशन)
\n
• बेसिक HTTP सर्वर (जैसे, python3 -m http.server)
\n

लक्ष्य प्लेटफ़ॉर्म और wasm-pack की स्थापना:

# WebAssembly के लिए लक्ष्य प्लेटफ़ॉर्म स्थापित करें\nrustup target add wasm32-unknown-unknown\n\n# wasm-pack स्थापित करें\ncargo install wasm-pack

अब एक नया प्रोजेक्ट बनाएं:

cargo new --lib wasm-rust-demo\ncd wasm-rust-demo

Cargo.toml खोलें और निर्भरता जोड़ें:

[lib]\ncrate-type = ["cdylib"]\n\n[dependencies]\nwasm-bindgen = "0.2"

cdylib फ्लैग इंगित करता है कि हम एक डायनामिक लाइब्रेरी बना रहे हैं, जो WebAssembly के साथ संगत है।

Rust में पहला WASM मॉड्यूल लिखना

एक सरल फंक्शन बनाएं जो JavaScript से एक्सेस किया जा सके। src/lib.rs को संपादित करें:

use wasm_bindgen::prelude::*;\n\n#[wasm_bindgen]\npub fn greet(name: &str) -> String {\n    format!("नमस्ते, {}! WebAssembly की दुनिया में आपका स्वागत है!", name)\n}\n\n#[wasm_bindgen]\npub fn fibonacci(n: u32) -> u32 {\n    match n {\n        0 => 0,\n        1 => 1,\n        _ => fibonacci(n - 1) + fibonacci(n - 2),\n    }\n}\n\n#[wasm_bindgen]\npub fn add(a: i32, b: i32) -> i32 {\n    a + b\n}

#[wasm_bindgen] एट्रीब्यूट फंक्शन को JavaScript में एक्सपोर्ट करने की अनुमति देता है। ध्यान दें: String स्वचालित रूप से JavaScript स्ट्रिंग में परिवर्तित हो जाता है।

अब प्रोजेक्ट बिल्ड करें:

wasm-pack build --target web

बिल्ड के बाद pkg फ़ोल्डर में फ़ाइलें दिखाई देंगी:

\n
• wasm_rust_demo_bg.wasm — कंपाइल किया गया WASM मॉड्यूल
\n
• wasm_rust_demo.js — आसान आयात के लिए JavaScript रैपर
\n
• wasm_rust_demo.d.ts — TypeScript घोषणाएं
\n

JavaScript और HTML के साथ एकीकरण

प्रोजेक्ट की रूट में index.html फ़ाइल बनाएं:

<!DOCTYPE html>\n<html lang="hi">\n<head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>Rust + WebAssembly डेमो</title>\n</head>\n<body>\n    <h1>Rust + WebAssembly उदाहरण</h1>\n    \n    <div>\n        <h3>greet फंक्शन</h3>\n        <input type="text" id="nameInput" placeholder="नाम दर्ज करें" value="विश्व">\n        <button id="greetBtn">अभिवादन करें</button>\n        <p id="greetOutput"></p>\n    </div>\n\n    <div>\n        <h3>फिबोनाची संख्याएं</h3>\n        <input type="number" id="fibInput" value="10" min="0" max="40">\n        <button id="fibBtn">गणना करें</button>\n        <p id="fibOutput"></p>\n    </div>\n\n    <script type="module">\n        import init, { greet, fibonacci, add } from './pkg/