WebAssembly और Go के साथ काम करना: A से Z तक — पूर्ण गाइड

शुरुआती लोगों के लिए ऑनलाइन Python प्रशिक्षक

Python आसानी से सीखें बिना सिद्धांत के बोझ के। स्वचालित जांच के साथ व्यावहारिक कार्य हल करें और ब्राउज़र में सीधे कोड लिखें।

पाठ्यक्रम शुरू करें

WebAssembly और Go का परिचय

\n\n

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

\n\n

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

\n\n

पर्यावरण की स्थापना और कॉन्फ़िगरेशन

\n\n

शुरू करने से पहले, सुनिश्चित करें कि आपके पास Go का नवीनतम संस्करण (1.21+) स्थापित है। WebAssembly के साथ काम करने के लिए tinygo कंपाइलर (वैकल्पिक, बाइनरी का आकार कम करने के लिए) या मानक go build की आवश्यकता होगी।

\n\n

बुनियादी आवश्यकताएँ

Go 1.21 या उससे नया
WebAssembly समर्थन वाला ब्राउज़र (Chrome, Firefox, Safari, Edge)
JavaScript की बुनियादी समझ

\n\n

पर्यावरण चर सेट करना

# क्रॉस-कंपाइलेशन के लिए GOOS और GOARCH सेट करें\nexport GOOS=js\nexport GOARCH=wasm\n\n# जांचें कि सब कुछ सही ढंग से सेट है या नहीं\ngo env GOOS GOARCH\n# आउटपुट होना चाहिए: js wasm

\n\n

Go की मानक लाइब्रेरी से wasm_exec.js सपोर्ट फ़ाइल को कॉपी करना भी आवश्यक है:

cp "$(go env GOROOT)/misc/wasm/wasm_exec.js" ./

\n\n

पहला WASM मॉड्यूल लिखना और कंपाइल करना

\n\n

हम एक सरल मॉड्यूल बनाएंगे जो दो संख्याओं को जोड़ने के लिए एक फ़ंक्शन को एक्सपोर्ट करेगा और ब्राउज़र कंसोल में एक संदेश प्रिंट करेगा।

\n\n

Go कोड

package main\n\nimport "syscall/js"\n\nfunc add(this js.Value, args []js.Value) interface{} {\n    if len(args) < 2 {\n        return "Error: need two arguments"\n    }\n    a := args[0].Int()\n    b := args[1].Int()\n    return a + b\n}\n\nfunc main() {\n    // ग्लोबल ऑब्जेक्ट में फ़ंक्शन रजिस्टर करें\n    js.Global().Set("goAdd", js.FuncOf(add))\n    \n    // गोरूटीन को ब्लॉक करें ताकि WASM समाप्त न हो\n    select {}\n}

\n\n

WASM में कंपाइल करना

go build -o main.wasm main.go

\n\n

कंपाइलेशन के बाद, आपके पास main.wasm फ़ाइल होगी जिसका आकार लगभग 2-3 MB (मानक कंपाइलर के साथ) होगा। प्रोडक्शन के लिए TinyGo का उपयोग करने की सिफारिश की जाती है, जो आकार को 10-50 KB तक कम कर देता है।

\n\n

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

\n\n

अब हम एक HTML पेज बनाएंगे जो हमारे WASM मॉड्यूल को लोड और उपयोग करेगा।

\n\n

HTML टेम्पलेट

<!DOCTYPE html>\n<html>\n<head>\n    <meta charset="utf-8">\n    <title>Go WebAssembly Demo</title>\n</head>\n<body>\n    <h1>Go + WebAssembly</h1>\n    <input type="number" id="num1" value="10">\n    <input type="number" id="num2" value="20">\n    <button onclick="calculate()">जोड़ें</button>\n    <p>परिणाम: <span id="result">0</span></p>\n\n    <script src="wasm_exec.js"></script>\n    <script>\n        const go = new Go();\n        \n        WebAssembly.instantiateStreaming(\n            fetch("main.wasm"), \n            go.importObject\n        ).then((result) => {\n            go.run(result.instance);\n            console.log("WASM लोड हो गया!");\n        });\n\n        function calculate() {\n            const a = parseInt(document.getElementById('num1').value);\n            const b = parseInt(document.getElementById('num2').value);\n            const result = goAdd(a, b);\n            document.getElementById('result').textContent = result;\n        }\n    </script>\n</body>\n</html>

\n\n