从JavaScript调用函数

huangapple
go评论126阅读模式
英文:

Calling a function from JavaScript

问题

尝试理解Go中的WebAssembly（wasm），所以我写了以下代码：

  1. 操纵DOM
  2. 调用JS函数
  3. 定义一个可以被JS调用的函数

前两步都没问题，但最后一步不像预期那样工作，因为我得到了JavaScript错误"function undefined"，我的代码如下，我在函数sub中遇到了问题：

  1. package main
  3. import (
  4. 	"syscall/js"
  5. )
  7. // func sub(a, b float64) float64
  9. func sub(this js.Value, inputs []js.Value) interface{} {
  10. 	return inputs[0].Float() - inputs[1].Float()
  11. }
  13. func main() {
  14. 	c := make(chan int) // channel to keep the wasm running, it is not a library as in rust/c/c++, so we need to keep the binary running
  15. 	js.Global().Set("sub", js.FuncOf(sub))
  16. 	alert := js.Global().Get("alert")
  17. 	alert.Invoke("Hi")
  18. 	println("Hello wasm")
  20. 	num := js.Global().Call("add", 3, 4)
  21. 	println(num.Int())
  23. 	document := js.Global().Get("document")
  24. 	h1 := document.Call("createElement", "h1")
  25. 	h1.Set("innerText", "This is H1")
  26. 	document.Get("body").Call("appendChild", h1)
  28. 	<-c // pause the execution so that the resources we create for JS keep available
  29. }

将其编译为wasm：

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

将wasm_exec.js文件复制到与其相同的工作文件夹中：

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

我的HTML文件如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <title>WASM</title>
  5.     <script src="http://localhost:8080/www/lib.js"></script>
  6.     <!-- WASM -->
  7.     <script src="http://localhost:8080/www/wasm_exec.js"></script>
  8.     <script src="http://localhost:8080/www/loadWasm.js"></script>
  9. </head>
  10. <body>
  11. </body>
  12. <script>
  13.    console.log(sub(5,3));
  14. </script>
  15. </html>

lib.js文件如下：

  1. function add(a, b){
  2.     return a + b;
  3. }

loadWasm.js文件如下：

  1. async function init(){
  2.     const go = new Go();
  3.     const result = await WebAssembly.instantiateStreaming(
  4.         fetch("http://localhost:8080/www/main.wasm"),
  5.         go.importObject
  6.     );
  7.     go.run(result.instance);
  8. }
  9. init();

服务器代码如下：

  1. package main
  3. import (
  4. 	"fmt"
  5. 	"html/template"
  6. 	"net/http"
  7. )
  9. func wasmHandler() http.Handler {
  10. 	return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
  11. 		tmpl := template.Must(template.ParseFiles("www/home.html"))
  13. 		w.Header().Set("Content-Type", "text/html; charset=utf-8")
  14. 		w.Header().Set("Access-Control-Allow-Origin", "*")
  15. 		err := tmpl.Execute(w, nil)
  16. 		if err != nil {
  17. 			fmt.Println(err)
  18. 		}
  19. 	})
  20. }
  22. func main() {
  23. 	fs := http.StripPrefix("/www/", http.FileServer(http.Dir("./www")))
  24. 	http.Handle("/www/", fs)
  26. 	http.Handle("/home", wasmHandler())
  27. 	http.ListenAndServe(":8080", nil)
  29. }

我得到的输出是：

从JavaScript调用函数

更新

我尝试使用TinyGO的示例，但遇到了几乎相同的问题：

  1. //wasm.go
  3. package main
  5. // This calls a JS function from Go.
  6. func main() {
  7. 	println("adding two numbers:", add(2, 3)) // expecting 5
  8. }
  10. // module from JavaScript.
  11. func add(x, y int) int
  13. //export multiply
  14. func multiply(x, y int) int {
  15. 	return x * y
  16. }

将其编译为：

  1. tinygo build -o main2.wasm -target wasm -no-debug
  2. cp "$(tinygo env TINYGOROOT)/targets/wasm_exec.js" .

server.go如下：

  1. package main
  3. import (
  4. 	"log"
  5. 	"net/http"
  6. 	"strings"
  7. )
  9. const dir = "./www"
  11. func main() {
  12. 	fs := http.FileServer(http.Dir(dir))
  13. 	log.Print("Serving " + dir + " on http://localhost:8080")
  14. 	http.ListenAndServe(":8080", http.HandlerFunc(func(resp http.ResponseWriter, req *http.Request) {
  15. 		resp.Header().Add("Cache-Control", "no-cache")
  16. 		if strings.HasSuffix(req.URL.Path, ".wasm") {
  17. 			resp.Header().Set("content-type", "application/wasm")
  18. 		}
  19. 		fs.ServeHTTP(resp, req)
  20. 	}))
  21. }

JS代码如下：

  1. const go = new Go(); // Defined in wasm_exec.js
  3. go.importObject.env = {
  4.     'main.add': function(x, y) {
  5.         return x + y
  6.     }
  7.     // ... other functions
  8. }
  11. const WASM_URL = 'main.wasm';
  13. var wasm;
  15. if ('instantiateStreaming' in WebAssembly) {
  16. 	WebAssembly.instantiateStreaming(fetch(WASM_URL), go.importObject).then(function (obj) {
  17. 		wasm = obj.instance;
  18. 		go.run(wasm);
  19. 	})
  20. } else {
  21. 	fetch(WASM_URL).then(resp =>
  22. 		resp.arrayBuffer()
  23. 	).then(bytes =>
  24. 		WebAssembly.instantiate(bytes, go.importObject).then(function (obj) {
  25. 			wasm = obj.instance;
  26. 			go.run(wasm);
  27. 		})
  28. 	)
  29. }
  31. // Calling the multiply function:
  32. console.log('multiplied two numbers:', exports.multiply(5, 3));

我得到的输出是：
从JavaScript调用函数

英文:

Trying to understand wasm in go, so I wrote the below that:

  1. Manipulate DOM
  2. Call JS function
  3. Define a function that can called by JS

first 2 steps are fine, but the last one is not working as expected, as I got the JavaScript error function undefined, my code is below, the issue I have is in the function sub

  1. package main
  3. import (
  4. 	&quot;syscall/js&quot;
  5. )
  7. // func sub(a, b float64) float64
  9. func sub(this js.Value, inputs []js.Value) interface{} {
  10. 	return inputs[0].Float() - inputs[1].Float()
  11. }
  13. func main() {
  14. 	c := make(chan int) // channel to keep the wasm running, it is not a library as in rust/c/c++, so we need to keep the binary running
  15. 	js.Global().Set(&quot;sub&quot;, js.FuncOf(sub))
  16. 	alert := js.Global().Get(&quot;alert&quot;)
  17. 	alert.Invoke(&quot;Hi&quot;)
  18. 	println(&quot;Hello wasm&quot;)
  20. 	num := js.Global().Call(&quot;add&quot;, 3, 4)
  21. 	println(num.Int())
  23. 	document := js.Global().Get(&quot;document&quot;)
  24. 	h1 := document.Call(&quot;createElement&quot;, &quot;h1&quot;)
  25. 	h1.Set(&quot;innerText&quot;, &quot;This is H1&quot;)
  26. 	document.Get(&quot;body&quot;).Call(&quot;appendChild&quot;, h1)
  28. 	&lt;-c // pause the execution so that the resources we create for JS keep available
  29. }

compiled it to wasm as:

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

Copied the wasm_exec.js file to the same working folder as:

  1. cp &quot;$(go env GOROOT)/misc/wasm/wasm_exec.js&quot; .

My HTML file is:

  1. &lt;!DOCTYPE html&gt;
  2. &lt;html lang=&quot;en&quot;&gt;
  3. &lt;head&gt;
  4.     &lt;title&gt;WASM&lt;/title&gt;
  5.     &lt;script src=&quot;http://localhost:8080/www/lib.js&quot;&gt;&lt;/script&gt;
  6.     &lt;!-- WASM --&gt;
  7.     &lt;script src=&quot;http://localhost:8080/www/wasm_exec.js&quot;&gt;&lt;/script&gt;
  8.     &lt;script src=&quot;http://localhost:8080/www/loadWasm.js&quot;&gt;&lt;/script&gt;
  9. &lt;/head&gt;
  10. &lt;body&gt;
  11. &lt;/body&gt;
  12. &lt;script&gt;
  13.    console.log(sub(5,3));
  14. &lt;/script&gt;
  15. &lt;/html&gt;

The lib.js is:

  1. function add(a, b){
  2.     return a + b;
  3. }

The loadWasm.js is:

  1. async function init(){
  2.     const go = new Go();
  3.     const result = await WebAssembly.instantiateStreaming(
  4.         fetch(&quot;http://localhost:8080/www/main.wasm&quot;),
  5.         go.importObject
  6.     );
  7.     go.run(result.instance);
  8. }
  9. init();

The server code is:

  1. package main
  3. import (
  4. 	&quot;fmt&quot;
  5. 	&quot;html/template&quot;
  6. 	&quot;net/http&quot;
  7. )
  9. func wasmHandler() http.Handler {
  10. 	return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
  11. 		tmpl := template.Must(template.ParseFiles(&quot;www/home.html&quot;))
  13. 		w.Header().Set(&quot;Content-Type&quot;, &quot;text/html; charset=utf-8&quot;)
  14. 		w.Header().Set(&quot;Access-Control-Allow-Origin&quot;, &quot;*&quot;)
  15. 		err := tmpl.Execute(w, nil)
  16. 		if err != nil {
  17. 			fmt.Println(err)
  18. 		}
  19. 	})
  20. }
  22. func main() {
  23. 	fs := http.StripPrefix(&quot;/www/&quot;, http.FileServer(http.Dir(&quot;./www&quot;)))
  24. 	http.Handle(&quot;/www/&quot;, fs)
  26. 	http.Handle(&quot;/home&quot;, wasmHandler())
  27. 	http.ListenAndServe(&quot;:8080&quot;, nil)
  29. }

The output i got is:

从JavaScript调用函数

UPDATE

I tried using the TinyGO example as below, but got almost the same issue:

  1. //wasm.go
  3. package main
  5. // This calls a JS function from Go.
  6. func main() {
  7. 	println(&quot;adding two numbers:&quot;, add(2, 3)) // expecting 5
  8. }
  10. // module from JavaScript.
  11. func add(x, y int) int
  13. //export multiply
  14. func multiply(x, y int) int {
  15. 	return x * y
  16. }

Compliled it as:

  1. tinygo build -o main2.wasm -target wasm -no-debug
  2. cp &quot;$(tinygo env TINYGOROOT)/targets/wasm_exec.js&quot; .

And server.go as:

  1. package main
  3. import (
  4. 	&quot;log&quot;
  5. 	&quot;net/http&quot;
  6. 	&quot;strings&quot;
  7. )
  9. const dir = &quot;./www&quot;
  11. func main() {
  12. 	fs := http.FileServer(http.Dir(dir))
  13. 	log.Print(&quot;Serving &quot; + dir + &quot; on http://localhost:8080&quot;)
  14. 	http.ListenAndServe(&quot;:8080&quot;, http.HandlerFunc(func(resp http.ResponseWriter, req *http.Request) {
  15. 		resp.Header().Add(&quot;Cache-Control&quot;, &quot;no-cache&quot;)
  16. 		if strings.HasSuffix(req.URL.Path, &quot;.wasm&quot;) {
  17. 			resp.Header().Set(&quot;content-type&quot;, &quot;application/wasm&quot;)
  18. 		}
  19. 		fs.ServeHTTP(resp, req)
  20. 	}))
  21. }

And the JS code as:

  1. const go = new Go(); // Defined in wasm_exec.js
  3. go.importObject.env = {
  4.     &#39;main.add&#39;: function(x, y) {
  5.         return x + y
  6.     }
  7.     // ... other functions
  8. }
  11. const WASM_URL = &#39;main.wasm&#39;;
  13. var wasm;
  15. if (&#39;instantiateStreaming&#39; in WebAssembly) {
  16. 	WebAssembly.instantiateStreaming(fetch(WASM_URL), go.importObject).then(function (obj) {
  17. 		wasm = obj.instance;
  18. 		go.run(wasm);
  19. 	})
  20. } else {
  21. 	fetch(WASM_URL).then(resp =&gt;
  22. 		resp.arrayBuffer()
  23. 	).then(bytes =&gt;
  24. 		WebAssembly.instantiate(bytes, go.importObject).then(function (obj) {
  25. 			wasm = obj.instance;
  26. 			go.run(wasm);
  27. 		})
  28. 	)
  29. }
  31. // Calling the multiply function:
  32. console.log(&#39;multiplied two numbers:&#39;, exports.multiply(5, 3));

And the output i got is:
从JavaScript调用函数

答案1

得分: 3

我找到了解决方案，我需要一个能够检测和确认wasm已加载并准备好处理的东西，就像在JS中检查文档是否准备好一样：

  1. if (document.readyState === 'complete') {
  2.   // 页面已完全加载
  3. }
  5. // 或者
  7. document.onreadystatechange = () => {
  8.   if (document.readyState === 'complete') {
  9.     // 文档已准备好
  10.   }
  11. };

因此，由于我的代码中的wasm初始化函数是async的，我在JS中使用了以下代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <title>WASM</title>
  5.     <!-- WASM -->
  6.     <script src="http://localhost:8080/www/wasm_exec.js"></script>
  7.     <script src="http://localhost:8080/www/loadWasm.js"></script>
  8. </head>
  9. <body>
  10. </body>
  11. <script>
  12.     (async () => {
  13.         try {
  14.             await init();
  15.             alert("Wasm已加载");
  16.             console.log(multiply(5, 3));
  17.         } catch (e) {
  18.             console.log(e);
  19.         } 
  20.     })(); 
  22. /***** OR ****/
  23.     (async () => {
  24.         await init();
  25.         alert("Wasm已加载");
  26.         console.log(multiply(5, 3));
  27.     })().catch(e => {
  28.         console.log(e);
  29.     });
  30. /*************/
  31. </script>
  32. </html>

这帮助我确保文档已准备好处理并调用wasm函数。

wasm加载函数简单地变成了：

  1. async function init(){
  2.     const go = new Go();
  3.     const result = await WebAssembly.instantiateStreaming(
  4.         fetch("http://localhost:8080/www/main.wasm"),
  5.         go.importObject
  6.     );
  7.     go.run(result.instance); 
  8. }
英文:

I found the solution, that I need something to detect and confirm that wasm had been loaded and ready for processing, same the one used in JS to check if the document is ready:

  1. if (document.readyState === &#39;complete&#39;) {
  2.   // The page is fully loaded
  3. }
  5. // or
  7. document.onreadystatechange = () =&gt; {
  8.   if (document.readyState === &#39;complete&#39;) {
  9.     // document ready
  10.   }
  11. };

So, as wasm initiation function in my code is async I used the below in JS:

  1. &lt;!DOCTYPE html&gt;
  2. &lt;html lang=&quot;en&quot;&gt;
  3. &lt;head&gt;
  4.     &lt;title&gt;WASM&lt;/title&gt;
  5.     &lt;!-- WASM --&gt;
  6.     &lt;script src=&quot;http://localhost:8080/www/wasm_exec.js&quot;&gt;&lt;/script&gt;
  7.     &lt;script src=&quot;http://localhost:8080/www/loadWasm.js&quot;&gt;&lt;/script&gt;
  8. &lt;/head&gt;
  9. &lt;body&gt;
  10. &lt;/body&gt;
  11. &lt;script&gt;
  12.     (async () =&gt; {
  13.         try {
  14.             await init();
  15.             alert(&quot;Wasm had been loaded&quot;)
  16.             console.log(multiply(5, 3));
  17.         } catch (e) {
  18.             console.log(e);
  19.         } 
  20.     })(); 
  22. /***** OR ****/
  23.     (async () =&gt; {
  24.         await init();
  25.         alert(&quot;Wasm had been loaded&quot;)
  26.         console.log(multiply(5, 3));
  27.     })().catch(e =&gt; {
  28.         console.log(e);
  29.     });
  30. /*************/
  31. &lt;/script&gt;
  32. &lt;/html&gt;

This helped me been sure that the document is ready to process and call the wasm function.

The wasm loading function simply became:

  1. async function init(){
  2.     const go = new Go();
  3.     const result = await WebAssembly.instantiateStreaming(
  4.         fetch(&quot;http://localhost:8080/www/main.wasm&quot;),
  5.         go.importObject
  6.     );
  7.     go.run(result.instance); 
  8. }

huangapple
  • 本文由 发表于 2021年11月10日 23:00:42
  • 转载请务必保留本文链接：https://go.coder-hub.com/69915566.html
  • go
  • javascript
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定