WebAssembly और C++ के साथ कार्य: A से Z तक

WebAssembly और C++ का परिचय

आधुनिक वेब डेवलपमेंट लगातार प्रदर्शन बढ़ाने के तरीके खोजता रहता है। WebAssembly (Wasm) एक निम्न-स्तरीय बाइनरी निर्देश प्रारूप है जो ब्राउज़र में नेटिव के करीब गति से चलता है। C++, सबसे तेज़ और शक्तिशाली प्रोग्रामिंग भाषाओं में से एक, के साथ मिलकर Wasm नए क्षितिज खोलता है: उच्च-प्रदर्शन वाले गेम और सिमुलेशन से लेकर ब्राउज़र में ही जटिल डेटा प्रोसेसिंग एल्गोरिदम तक।

इस लेख में, हम मूल बातों से लेकर व्यावहारिक अनुप्रयोग तक का सफर तय करेंगे: हम समझेंगे कि C++ कोड को WebAssembly में कैसे कंपाइल करें, इसे ब्राउज़र में कैसे चलाएं और अधिकतम प्रदर्शन के लिए इसे कैसे ऑप्टिमाइज़ करें।

1. टूलकिट और वातावरण सेटअप

C++ को WebAssembly में कंपाइल करने का मुख्य उपकरण Emscripten कंपाइलर सेट है। यह LLVM बाइटकोड को Wasm में ट्रांसलेट करता है और मॉड्यूल को लोड करने के लिए आवश्यक JavaScript ग्लू कोड (glue code) स्वचालित रूप से जनरेट करता है।

Emscripten इंस्टॉल करना

इंस्टॉल करने का अनुशंसित तरीका emsdk पैकेज मैनेजर के माध्यम से है:

# रिपॉजिटरी क्लोन करें\ngit clone https://github.com/emscripten-core/emsdk.git\ncd emsdk\n\n# नवीनतम संस्करण इंस्टॉल और एक्टिवेट करें\n./emsdk install latest\n./emsdk activate latest\n\n# एनवायरनमेंट वेरिएबल जोड़ें (शेल वेरिएबल)\nsource ./emsdk_env.sh

इंस्टॉलेशन के बाद, आपके पास emcc (कंपाइलर) और em++ (C++ कंपाइलर) कमांड होंगे, जो Clang के रैपर हैं।

2. C++ को WebAssembly में कंपाइल करना

एक सरल उदाहरण देखते हैं। hello.cpp फ़ाइल बनाएं:

#include <emscripten/emscripten.h>\n\n// JavaScript से एक्सेस करने योग्य फ़ंक्शन\nextern "C" {\n    int EMSCRIPTEN_KEEPALIVE add(int a, int b) {\n        return a + b;\n    }\n}

महत्वपूर्ण तत्व EMSCRIPTEN_KEEPALIVE मैक्रो है। यह ऑप्टिमाइज़र द्वारा फ़ंक्शन को हटाए जाने से रोकता है और इसे एक्सपोर्ट करने योग्य बनाता है।

हमारे कोड को कंपाइल करें:

em++ hello.cpp -o hello.html -s WASM=1 -s EXPORTED_FUNCTIONS='["_add"]' -O3

फ्लैग्स को समझें:

\n
• -o hello.html — रनिंग उदाहरण के साथ HTML फ़ाइल बनाता है।
\n
• -s WASM=1 — स्पष्ट रूप से Wasm जनरेशन निर्दिष्ट करता है (डिफ़ॉल्ट रूप से सक्षम)।
\n
• -s EXPORTED_FUNCTIONS='["_add"]' — एक्सपोर्ट किए जाने वाले फ़ंक्शन की सूची (_ उपसर्ग के साथ)।
\n
• -O3 — उच्च ऑप्टिमाइज़ेशन स्तर।
\n

परिणामस्वरूप हमें तीन फ़ाइलें मिलेंगी: hello.html, hello.js (ग्लू कोड) और hello.wasm।

3. JavaScript के साथ इंटरैक्शन

कंपाइलेशन के बाद, हम JavaScript से अपने C++ फ़ंक्शन को कॉल कर सकते हैं। मॉड्यूल लोड करने का न्यूनतम कोड यहाँ है:

<!DOCTYPE html>\n<html>\n<head>\n    <script>\n        var Module = {};\n        Module.onRuntimeInitialized = function() {\n            // add फ़ंक्शन अब उपलब्ध है\n            var result = Module._add(5, 7);\n            console.log("परिणाम: " + result); // 12\n        };\n    </script>\n    <script src="hello.js"></script>\n</head>\n<body></body>\n</html>

मुख्य बिंदु:

\n
• Module.onRuntimeInitialized — Wasm मॉड्यूल लोड होने के बाद कॉल किया जाने वाला इवेंट।
\n
• JS में फ़ंक्शन नामों को _ उपसर्ग मिलता है (उदाहरण के लिए, _add)।
• जटिल डेटा संरचनाओं (स्ट्रिंग, ऐरे) को पास करने के लिए Module._malloc और पॉइंटर्स का उपयोग किया जाता है।

स्ट्रिंग पास करना

अभिवादन लौटाने वाले फ़ंक्शन का उदाहरण:

// C++ कोड\nextern "C" {\n    const char* EMSCRIPTEN_KEEPALIVE greet(const char* name) {\n        static std::string msg = "नमस्ते, " + std::string(name) + "!";\n        return msg.c_str();\n    }\n}

JavaS