Panimula sa WebAssembly sa Go

Panimula sa WebAssembly sa Go
Ang mga mambabasang tulad mo ay tumutulong sa pagsuporta sa MUO. Kapag bumili ka gamit ang mga link sa aming site, maaari kaming makakuha ng isang affiliate na komisyon. Magbasa pa.

Ang WebAssembly ay isa sa mga modernong teknolohiya na idinisenyo para sa pagpapatakbo ng higit pang mga wika sa browser na may interoperability ng Javascript.





Ang WebAssembly (WASM) ay isang platform-independent, binary na format ng pagtuturo para sa mga stack-based na virtual machine na idinisenyo bilang isang portable na target ng compilation para sa mga programming language na tumakbo sa mga nakaka-enable na environment (ibig sabihin, ang web at server app).





Sa WASM, maaari kang magpatakbo ng ilang programming language, kabilang ang Go, sa iyong browser at gamitin ang mga feature ng wika. Gayundin, makipag-interoperate sa Javascript sa web.





Pagsisimula sa WebAssembly sa Go

Nagbibigay ang Go ng first-class na suporta para sa paggamit ng WebAssembly sa iyong mga Go application, kailangan mo lang gumawa ng ilang configuration at i-compile ang Go code sa WebAssembly.

Kakailanganin mong gumawa ng ilang configuration para i-transpile ang iyong Go code sa WebAssembly. Kailangan mong baguhin ang iyong arkitektura ng Go GOARCH variable ng kapaligiran sa wasm at Go operating system GOOS variable sa js .



Patakbuhin ang command na ito sa terminal ng iyong working directory para gawin ang mga configuration na ito.

 Set GOARCH=wasm GOOS=js  

Ang susunod na hakbang ay i-transpile ang iyong Go code sa isang WebAssembly .wasm file. Patakbuhin ang command na ito para i-transpile ang iyong main.go file sa isang file na pinangalanan lib.wasm





 go build -o lib.wasm main.go 

Sa pagpapatakbo ng command, makikita mo ang a lib.wasm sa iyong working directory.

Kailangan mong kopyahin ang WebAssembly file na kasama ng iyong pag-install ng Go sa iyong gumaganang direktoryo upang maisagawa ang WebAssembly file gamit ang NodeJS sa isang web page.





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

Ang utos ay kinokopya ang wasm_exec.js file sa iyong working directory at nagsisilbing entry point sa iyong aplikasyon.

Maaari mo na ngayong gamitin ang wasm_exec.js script para i-execute ang iyong mga WASM file gamit ang Go and make DOM API mga tawag.

 node wasm_exec.js main.wasm 

Pagsisimula ng isang Web Server upang I-host ang Website

Idagdag ang code na ito mula sa mga may-akda ng Go sa isang HTML file sa iyong gumaganang direktoryo upang ma-instantiate ang isang WebAssembly data stream gamit ang instantiateStreaming paraan.

 <!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>

Ang HTML code ay mula sa Go Authors, para sa paggawa ng isang WebAssembly stream na nagkokonekta sa iyong Go code sa webpage.

Pagsisimula ng isang Web Server upang Patakbuhin ang Pahina

gagawin mo i-set up ang server gamit ang http pakete . I-import ang http pakete at ang log package para sa pag-log ng mga posibleng error sa console.

 import ( 
    "log"
    "net/http"
)

Maaari kang magdeklara ng mga variable para sa address ng server at direktoryo ng mga file na gusto mong ihatid sa address.

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

Maaari mong gamitin ang FileServer paraan ng http package upang maghatid ng mga file sa isang tinukoy na direktoryo. Ang FileServer ang pamamaraan ay tumatagal sa direktoryo at nagbabalik ng isang halimbawa ng file server.

Ay ps4 paatras na katugma sa mga laro ng ps3
 func main() { 
    serveFiles := http.FileServer(http.Dir(directory))
    if err := http.ListenAndServe(serverAddr, serveFiles); err != nil {
        log.Fatalln(err)
}
}

Nasa pangunahing function, nagdeklara ka ng variable ng instance ng file server upang ihatid ang mga file sa root directory. Ang ListenAndServe nagsisilbi ang pamamaraan sa mga file sa tinukoy na direktoryo sa tinukoy na port.

  resulta ng paglo-load ng WASM sa browser

Mga Function ng WebAssembly sa Go

Nagbibigay ang Go ng functionality para sa pagtawag sa mga function ng JS at pakikipag-ugnayan sa DOM sa syscall/js pakete.

Ang js package ay nagbibigay ng access sa WebAssembly host environment sa js/wasm arkitektura. Kakailanganin mong i-set up ang iyong development environment sa GOARCH=wasm GOOS=js para ma-access at magamit ang package.

  js package doc preview

Maaari mong gamitin ang iba't ibang paraan sa package upang makipag-ugnayan sa iyong webpage. Narito kung paano ka makakapagrehistro ng mga function sa js pakete.

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

Ang print function sa pagpaparehistro bilang isang call-back function ay maglalabas ng data na ipinasa sa function sa browser console.

Maaari kang magrehistro ng mga function ng call-back gamit ang Itakda paraan ng Global paraan ng js pakete. Ang Itakda kinukuha ng method ang function identifier at isang call-back function na halimbawa.

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

Ang RegisterCallbackFunctions nirerehistro ng pamamaraan ang print function bilang call-back function na magagamit mo sa browser console.

Ang WebAssembly ay Isang Pang-eksperimentong Feature sa Maraming Wika, Kasama ang Go

Ang mga tampok ng WebAssembly ay medyo bago sa maraming wika, lalo na dahil ang wika ay naging isang pamantayang W3C kamakailan. Ang js Ang package ay eksperimental, at ang package ay hindi kasama sa pangako sa pagiging tugma ng Go.