WebAssembly और Go के साथ कार्य: तेज़ वेब एप्लिकेशन बनाना

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

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

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

WebAssembly और Go का परिचय

WebAssembly (Wasm) एक निम्न-स्तरीय बाइनरी निर्देश प्रारूप है जो ब्राउज़र में लगभग देशी गति से चलता है। Go (Golang) भाषा के साथ मिलकर, आपको उच्च-प्रदर्शन वाले वेब एप्लिकेशन बनाने के लिए एक शक्तिशाली उपकरण मिलता है। Go, WebAssembly में संकलित होता है, जिससे आप जटिल गणनाओं, एल्गोरिदम और यहां तक कि गेम को सीधे ब्राउज़र में स्थानांतरित कर सकते हैं, बिना प्रदर्शन से समझौता किए।

इस लेख में, हम देखेंगे कि वातावरण कैसे सेट करें, Go में एक सरल मॉड्यूल कैसे लिखें, इसे Wasm में संकलित करें और JavaScript के साथ एकीकृत करें। आप प्रमुख पैकेजों, सीमाओं और सर्वोत्तम प्रथाओं के बारे में जानेंगे।

Go को Wasm में संकलित करने के लिए वातावरण सेटअप

Go और WebAssembly निर्भरताएँ स्थापित करना

सबसे पहले, सुनिश्चित करें कि आपके पास Go संस्करण 1.11 या उससे नया (अनुशंसित 1.21+) स्थापित है। WebAssembly बॉक्स से बाहर समर्थित है। संकलन के लिए पर्यावरण चर GOOS=wasm GOARCH=wasm का उपयोग किया जाता है।

आपको Go के साथ आने वाली सहायक फ़ाइल wasm_exec.js की भी आवश्यकता होगी। इसे अपने प्रोजेक्ट रूट में कॉपी करें:

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

प्रोजेक्ट संरचना

एक सरल संरचना बनाएँ:

my-wasm-app/├── main.go├── wasm_exec.js├── index.html└── main.wasm (संकलन के बाद बनाया जाएगा)

WebAssembly के लिए Go में मॉड्यूल लिखना

सरल उदाहरण: जोड़ फ़ंक्शन

निम्नलिखित सामग्री के साथ main.go फ़ाइल बनाएँ:

package main

import (    "syscall/js")

func add(this js.Value, args []js.Value) interface{} {    if len(args) < 2 {        return 0    }    a := args[0].Int()    b := args[1].Int()    return a + b}

func main() {    c := make(chan struct{}, 0)

    js.Global().Set("goAdd", js.FuncOf(add))

    <-c}

यहाँ हम JavaScript के साथ इंटरैक्ट करने के लिए syscall/js पैकेज का उपयोग करते हैं। add फ़ंक्शन दो तर्क लेता है और उनका योग लौटाता है। चैनल c प्रोग्राम को समाप्त होने से रोकता है ताकि मॉड्यूल सक्रिय रहे।

Wasm में संकलन

कमांड चलाएँ:

GOOS=wasm GOARCH=wasm go build -o main.wasm main.go

परिणामस्वरूप, main.wasm फ़ाइल प्राप्त होगी जिसका आकार लगभग 1–2 MB (सरल उदाहरण के लिए) होगा। प्रोडक्शन में, आकार कम करने के लिए -ldflags="-s -w" फ़्लैग का उपयोग करें।

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

HTML पेज बनाना

index.html फ़ाइल बनाएँ:

<!DOCTYPE html><html lang="hi"><head>    <meta charset="UTF-8">    <title>Go + WebAssembly</title>    <script src="wasm_exec.js"></script></head><body>    <h2>ब्राउज़र में Go कैलकुलेटर</h2>    <input type="number" id="num1" value="5">    <input type="number" id="num2" value="10">    <button onclick="calculate()">जोड़ें</button>    <p>परिणाम: <span id="result">0</span></p>

    <script>        const go = new Go();        WebAssembly.instantiateStreaming(fetch("main.wasm"), go.importObject)            .then((result) => {                go.run(result.instance);                console.log("WebAssembly मॉड्यूल लोड हो गया");            });

        function calculate() {            const a = parseInt(document.getElementById('num1').value);            const b = parseInt(document.getElementById('num2').value);            const sum = goAdd(a, b);            document.getElementById('result').innerText = sum;        }    </script></body></html>

ध्यान दें: Go कोड में js.Global().Set("goAdd", ...) कॉल के कारण goAdd फ़ंक्शन वैश्विक हो जाता है।