WASMからの反応

webassemblyは素晴らしいです-かろうじてニュースですが、どのように反応して、それを使用することができますか?さて、正直に、そこに材料があります.しかし、個人的に、それは滑らかな経験をwasnt.私は簡単で、最新の記事が欲しかった.つのために、私は誰がWebPackで混乱したいので、解決反応アプリを使用した解決策を探していました?🙃🙃
この短いシンプルなチュートリアルの目的は、どのように一緒にすべてを継ぎ、Webbassemblyアップと実行にコンパイルされた反応ベースのGOプログラムを持っている方法を示すことです.次のように仮定します.

あなたは(1.11以上)インストールされている.

NPM/糸インストール.

だからそれを得ることができます.
このチュートリアルでは、入力ボックスに値を入力してWebBassemblyを使用してこの値をレンダリングします.シンプルで面白い、右?

クローンレポhere . repoは、アプリケーションを放出含まれています.私はこの記事をできるだけ簡潔に説明しようとしています.
rootではmain.go 次のコードが含まれます

package main

import (
    "fmt"
    "syscall/js"
)

var c chan bool

// init is called even before main is called. This ensures that as soon as our WebAssembly module is ready in the browser, it runs and prints "Hello, webAssembly!" to the console. It then proceeds to create a new channel. The aim of this channel is to keep our Go app running until we tell it to abort.
func init() {
    fmt.Println("Hello, WebAssembly!")
    c = make(chan bool)
}

func main() {
    // here, we are simply declaring the our function `sayHelloJS` as a global JS function. That means we can call it just like any other JS function.
    js.Global().Set("sayHelloJS", js.FuncOf(SayHello))
    println("Done.. done.. done...")

    // tells the channel we created in init() to "stop".
    <-c
}

// SayHello simply set the textContent of our element based on the value it receives (i.e the value from the input box)
// the element MUST exist else it'd throw an exception
func SayHello(jsV js.Value, inputs []js.Value) interface{} {
    message := inputs[0].String()
    h := js.Global().Get("document").Call("getElementById", "message")
    h.Set("textContent", message)
    return nil
}

私たちの関数sayhelloは2つの引数をとります.我々は第二にもっと心配している.二番目の基本的なものは、JSの配列をとることです.値.これはJavaScriptから必要な引数として渡すことができるからです.値を取得するには、単にインデックスを使用します.したがって、我々のケースでは、入力ボックスに値を入力します.

message := inputs[0].String()

先に述べたように、配列のインデックスを使用して欲しいものの値を取得します.

h := js.Global().Get("document").Call("getElementById", "message")
h.Set("textContent", message)

上のコードは次のようになります.

let h = document.getElementById("message")
h.textContent = message

それで、我々がしていることは、我々が我々の要素のテキストを入力値でid「メッセージ」に変えているということです.
以下を実行して、main.go :

GOOS=js GOARCH=wasm go build -o ../client/public/main.wasm

クライアント側

にApp.js , これにはコンポーネントdidmount ()があります:

async componentDidMount() {
    let { instance, module } = await WebAssembly.instantiateStreaming(fetch("main.wasm"), window.go.importObject)
    await window.go.run(instance)
    this.setState({
      mod: module,
      inst: instance
    })
  }

我々は、我々を例示していますmain.wasm インスタンスを実行します.これは、我々はすぐに行くことができると我々のアプリで我々のWASM機能を呼び出すことを意味します.また、モジュールとインスタンスを設定します.また、あなたは我々がやっていることに気づくでしょうwindow.go.run(instance) . どこから来たのですか.さて、その反応アプリで既に処理されます.あなたは、あることに気がつきますwasmjs を含むフォルダinit_js ファイル.これとwasm_exec.js ファイルはJSと私たちのWASMファイルを使用するために必要な作成されており、WebPackを使用して我々の反応アプリでバンドルされています.したがって、go ()インスタンスはグローバルウィンドウにバインドされます.したがって、go ()の新しいインスタンスを宣言する代わりに、ウィンドウオブジェクト変数として存在します

 handleSubmit = async (e) => {
    e.preventDefault()
    window.sayHelloJS(this.state.message)
  }

そして、これは我々が我々のGOコードで以前登録した我々の機能SayHellojsを呼んでいる我々です!ウィンドウオブジェクトプロパティとしてアクセスします.これは、我々が反応からそれを呼んでいるからです.私たちがそれを呼んだなら、それは未定義ですsayHelloJS .

<span id="message">
    Ayomide Onigbinde wrote this!!😉...💕 from WebAssembly and Golang
</span>

このHTML要素があります.「メッセージ」というIDがあることに注意してください.この要素は、我々がWebBassemblyにコンパイルした我々のGoコードで操作されたものでした!したがって、この要素は例外をスローします.これは、我々が入力ボックスに入るどんな値にでも変わるでしょう!そして、それをしているWebassembly(GOからコンパイルされる)!🎉🎉
できるだけ早く説明しようとした何かはっきりしないコメントがあればコメントしてください😉😉.
彼のためのアーロンへの巨大な小道具tutorial そして、大きい大きい感謝Chris at LogRocket . それはhuuuggeeeヘルプだった!また、ワームとの反応についての理解を得るために役立った.