مقدمه ای بر WebAssembly in Go » خبر و ترفند روز

با WebAssembly در Go شروع کنید و برنامه های کاربردی وب با سرعت بالا بسازید.

WebAssembly یکی از فناوری های مدرنی است که برای اجرای زبان های بیشتر در مرورگر با قابلیت همکاری جاوا اسکریپت طراحی شده است.

WebAssembly (WASM) یک فرمت دستورالعمل باینری و مستقل از پلت فرم برای ماشین های مجازی مبتنی بر پشته است که به عنوان یک هدف کامپایل قابل حمل برای زبان های برنامه نویسی طراحی شده است تا در محیط های فعال (یعنی برنامه های وب و سرور) اجرا شوند.

با WASM می توانید چندین زبان برنامه نویسی از جمله Go را در مرورگر خود اجرا کنید و از ویژگی های زبان استفاده کنید. همچنین، با جاوا اسکریپت در وب همکاری کنید.

شروع به کار با WebAssembly in Go

Go پشتیبانی درجه یک را برای استفاده از WebAssembly در برنامه های Go خود ارائه می دهد، فقط باید چند پیکربندی انجام دهید و کد Go را در WebAssembly کامپایل کنید.

برای انتقال کد Go خود به WebAssembly، باید چند پیکربندی انجام دهید. شما باید متغیر محیطی GOARCH معماری Go خود را به wasm و متغیر سیستم عامل Go GOOS را به js تغییر دهید.

این دستور را در ترمینال دایرکتوری کاری خود اجرا کنید تا این تنظیمات را انجام دهید.

Set GOARCH=wasm GOOS=js

گام بعدی این است که کد Go خود را در یک فایل WebAssembly .wasm تبدیل کنید. این دستور را اجرا کنید تا فایل main.go خود را به فایلی به نام lib.wasm تبدیل کنید

go build -o lib.wasm main.go

با اجرای دستور، یک lib.wasm را در فهرست کاری خود پیدا خواهید کرد.

مطلب مرتبط: 5 راه برای یادگیری HTML و CSS با چالش های واقعی UI

برای اجرای فایل WebAssembly با NodeJS در یک صفحه وب، باید فایل WebAssembly همراه با نصب Go خود را در پوشه کاری خود کپی کنید.

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

این دستور فایل wasm_exec.js را در پوشه کاری شما کپی می کند و به عنوان نقطه ورود به برنامه شما عمل می کند.

اکنون می توانید از اسکریپت wasm_exec.js برای اجرای فایل های WASM خود با Go و برقراری تماس های DOM API استفاده کنید.

node wasm_exec.js main.wasm

راه اندازی وب سرور برای میزبانی وب سایت

این کد را از نویسندگان Go به یک فایل HTML در فهرست کاری خود اضافه کنید تا یک جریان داده WebAssembly را با روش instantiateStreaming نمونه سازی کنید.

<!DOCTYPE html>
<!--
Copyright 2018 The Go Authors. All rights reserved.
Use of this source code is governed by a BSD-style
license that can be found in the LICENSE file.
-->

<html>
<head>
    <meta charset="utf-8" />
    <title>Go wasm</title>
</head>

<body>
<script src="wasm_exec.js"></script>

<script>
    if (!WebAssembly.instantiateStreaming) {
        // polyfill
        WebAssembly.instantiateStreaming = async (resp, importObject) => {
            const source = await (await resp).arrayBuffer();
            return await WebAssembly.instantiate(source, importObject);
        };
    }

    const go = new Go();

    let mod, inst;

    WebAssembly.instantiateStreaming(fetch("lib.wasm"), go.importObject).then(
        result => {
            mod = result.module;
            inst = result.instance;
            document.getElementById("runButton").disabled = false;
        }
    );

    async function run() {
        await go.run(inst);
        inst = await WebAssembly.instantiate(mod, go.importObject); // reset instance
    }
</script>

<button onClick="run();" id="runButton" disabled>Run</button>
</body>
</html>

کد HTML از Go Authors است، برای نمونه سازی یک جریان WebAssembly که کد Go شما را به صفحه وب متصل می کند.

مطلب مرتبط: نحوه ایجاد نقل قول با استفاده از ابزار استناد داخلی Edge

راه اندازی وب سرور برای اجرای صفحه

سرور را با بسته http راه اندازی می کنید. بسته http و بسته log را برای ثبت خطاهای احتمالی به کنسول وارد کنید.

import (
    "log"
    "net/http"
)

می‌توانید متغیرهایی را برای آدرس سرور و فهرست فایل‌هایی که می‌خواهید در آدرس ارائه شوند، اعلام کنید.

var (
    serverAddr = ":8080"
    directory = "."
)

می توانید از روش FileServer بسته http برای ارائه فایل ها در یک فهرست مشخص استفاده کنید. متد FileServer دایرکتوری را می گیرد و یک نمونه سرور فایل را برمی گرداند.

func main() {
    serveFiles := http.FileServer(http.Dir(directory))
    if err := http.ListenAndServe(serverAddr, serveFiles); err != nil {
        log.Fatalln(err)
}
}

در تابع اصلی، شما یک متغیر نمونه سرور فایل را برای ارائه فایل‌ها در دایرکتوری ریشه اعلام کردید. متد ListenAndServe فایل ها را در دایرکتوری مشخص شده در پورت مشخص شده سرویس می دهد.

توابع WebAssembly در Go

Go عملکردی را برای فراخوانی توابع JS و تعامل با DOM در بسته syscall/js فراهم می کند.

بسته js دسترسی به محیط های میزبان WebAssembly در معماری js/wasm را فراهم می کند. برای دسترسی به بسته و استفاده از آن باید محیط توسعه خود را با GOARCH=wasm GOOS=js تنظیم کنید.

شما می توانید از روش های مختلف در بسته برای تعامل با صفحه وب خود استفاده کنید. در اینجا نحوه ثبت توابع با بسته js آمده است.

// function definition
func print(this js.Value, i []js.Value) interface{} {
    return js.ValueOf(i[:])
}

عملکرد چاپ هنگام ثبت نام به عنوان یک تابع تماس، داده های ارسال شده به عملکرد را در کنسول مرورگر خروجی می دهد.

مطلب مرتبط: WebAssembly چیست؟

با متد Set متد Global بسته js می توانید توابع برگشتی را ثبت کنید. متد Set شناسه تابع و یک نمونه تابع فراخوانی را دریافت می کند.

func RegisterCallbackFunctions() {
    js.Global().Set("print", js.FuncOf(print))
}

روش RegisterCallbackFunctions عملکرد چاپ را به عنوان یک تابع تماس مجدد ثبت می کند که می توانید در کنسول مرورگر استفاده کنید.

WebAssembly یک ویژگی آزمایشی در بسیاری از زبان ها، از جمله Go است

ویژگی‌های WebAssembly برای بسیاری از زبان‌ها نسبتاً جدید هستند، به خصوص که این زبان اخیراً به استاندارد W3C تبدیل شده است. بسته js آزمایشی است و بسته از قول سازگاری Go مستثنی است.

Tags: توسعه وب مرورگر وب