العمل مع WebAssembly وGo: من الألف إلى الياء — دليل شامل

تعلم Python بسهولة دون إرهاق نظري. حل مهام عملية مع التحقق التلقائي واكتب الكود مباشرة في المتصفح.

مقدمة في WebAssembly وGo

\n\n

WebAssembly (WASM) هو تنسيق ثنائي منخفض المستوى يسمح بتشغيل كود مكتوب بلغات غير JavaScript مباشرة في المتصفح. أصبحت Go (Golang) بمكتبتها القياسية القوية ودعمها الممتاز للتوازي واحدة من أفضل الخيارات للترجمة إلى WASM. في هذه المقالة، سنشرح عملية العمل مع WebAssembly باستخدام Go بدءًا من تثبيت الأدوات وصولاً إلى نشر الحل النهائي.

\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

يجب أيضًا نسخ ملف الدعم wasm_exec.js من المكتبة القياسية لـ Go:

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 "خطأ: تحتاج إلى وسيطين"\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 ميجابايت (مع المترجم القياسي). للإنتاج، يُوصى باستخدام TinyGo الذي يقلل الحجم إلى 10-50 كيلوبايت.

\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</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