将golang代码与基于浏览器的纯JS连接起来

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

Connecting a golang code with browser based vanilla JS

问题

我正在尝试使用json-rpc将基于浏览器的纯JS与golang代码连接起来，但我一直收到TypeError: Failed to fetch的错误。

这是代码：

Go中的服务器：

  1. package main
  3. import (
  4.     "log"
  5.     "net"
  6.     "net/rpc"
  7.     "net/rpc/jsonrpc"
  8. )
  10. type HelloService struct{}
  12. func (p *HelloService) Hello(request string, reply *string) error {
  13.     *reply = "Hello " + request
  14.     return nil
  15. }
  17. func main() {
  18.     rpc.RegisterName("HelloService", new(HelloService))
  19.     listener, err := net.Listen("tcp", ":1234")
  20.     if err != nil {
  21.         log.Fatal("ListenTCP error: ", err)
  22.     }
  23.     for {
  24.         conn, err := listener.Accept()
  25.         if err != nil {
  26.             log.Fatal("Accept error: ", err)
  27.         }
  28.         log.Printf("New connection: %+v\n", conn.RemoteAddr())
  29.         go jsonrpc.ServeConn(conn)
  30.     }
  31. }

浏览器中的客户端 client.html：

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <p id="demo">Fetch a file to change this text.</p>
  5. <script>
  7. fetch('http://127.0.0.1:1234/rpc/v1', {
  8.     method: 'POST',
  9.     headers: {
  10.       'Content-Type': 'application/json',
  11.     },
  12.     body: JSON.stringify({
  13.       jsonrpc: '1.0',
  14.       method: `HelloService.Hello`,
  15.       params: ["popcontent"],//[],
  16.       id: "jsonrpc"
  17.     })
  18.   })
  19. .then((response) => {
  20.   if (response.ok) {
  21.     return response.json();
  22.   }
  23.   throw new Error('Something went wrong');
  24. })
  25. .then((responseJson) => {
  26.   console.log("app :",error)
  27. })
  28. .catch((error) => {
  29.   console.log("app error:",error)
  30. });
  33. </script>
  34. </body>
  35. </html>

我能够在本地连接JS代码和Go代码吗？
如果我可以在本地运行两者，我该如何修复代码？

英文:

I am trying to connect a golang code with browser based vanilla JS in the browser using json-rpc yet I keep getting TypeError: Failed to fetch

Here is the code

The server in go

  1. package main
  3. import (
  4.         &quot;log&quot;
  5.         &quot;net&quot;
  6.         &quot;net/rpc&quot;
  7.         &quot;net/rpc/jsonrpc&quot;
  8. )
  10. type HelloService struct{}
  12. func (p *HelloService) Hello(request string, reply *string) error {
  13.         *reply = &quot;Hello &quot; + request
  14.         return nil
  15. }
  17. func main() {
  18.         rpc.RegisterName(&quot;HelloService&quot;, new(HelloService))
  19.         listener, err := net.Listen(&quot;tcp&quot;, &quot;:1234&quot;)
  20.         if err != nil {
  21.                 log.Fatal(&quot;ListenTCP error: &quot;, err)
  22.         }
  23.         for {
  24.                 conn, err := listener.Accept()
  25.                 if err != nil {
  26.                         log.Fatal(&quot;Accept error: &quot;, err)
  27.                 }
  28.                 log.Printf(&quot;New connection: %+v\n&quot;, conn.RemoteAddr())
  29.                 go jsonrpc.ServeConn(conn)
  30.         }
  31. }

The client in the browser client.html

`

  1. &lt;!DOCTYPE html&gt;
  2. &lt;html&gt;
  3. &lt;body&gt;
  4. &lt;p id=&quot;demo&quot;&gt;Fetch a file to change this text.&lt;/p&gt;
  5. &lt;script&gt;
  7. fetch(&#39;http://127.0.0.1:1234/rpc/v1&#39;, {
  8.     method: &#39;POST&#39;,
  9.     headers: {
  10.       &#39;Content-Type&#39;: &#39;application/json&#39;,
  11.     },
  12.     body: JSON.stringify({
  13.       jsonrpc: &#39;1.0&#39;,
  14.       method: `HelloService.Hello`,
  15.       params: [&quot;popcontent&quot;],//[],
  16.       id: &quot;jsonrpc&quot;
  17.     })
  18.   })
  19. .then((response) =&gt; {
  20.   if (response.ok) {
  21.     return response.json();
  22.   }
  23.   throw new Error(&#39;Something went wrong&#39;);
  24. })
  25. .then((responseJson) =&gt; {
  26.   console.log(&quot;app :&quot;,error)
  27. })
  28. .catch((error) =&gt; {
  29.   console.log(&quot;app error:&quot;,error)
  30. });
  33. &lt;/script&gt;
  34. &lt;/body&gt;
  35. &lt;/html&gt;

Can I even connect JS code with go code locally?
If I can run both locally, how can I fix the code?

答案1

得分: 1

创建一个帖子，并在满足特定条件时建立一个TCP连接，并将数据传递给conn.Call。

例如

  1. http.HandleFunc("/myrpc/", func(w http.ResponseWriter, r *http.Request) {
  2. 	// 检查
  3. 	{
  4. 		// 检查方法
  5. 		if r.Method != http.MethodPost {
  6. 			http.Error(w, "不允许的方法", http.StatusMethodNotAllowed)
  7. 			return
  8. 		}
  9. 		// 检查Content-Type
  10. 		// 检查授权
  11. 		// ...
  12. 	}
  14. 	// 获取用户输入
  15. 	var req RPCRequest
  16. 	{
  17. 		_ = json.NewDecoder(r.Body).Decode(&req)
  18. 	}
  20. 	conn, _ := rpc.Dial("tcp", "127.0.0.1:12345")
  21. 	defer conn.Close()
  23. 	var reply string
  24. 	if err := conn.Call(req.Method, req.Params, &reply); err != nil { // <--
  25. 		http.Error(w, err.Error(), http.StatusBadRequest)
  26. 		return
  27. 	}
  29. 	// 处理响应
  30. 	w.Header().Set("Content-Type", "application/json; charset=utf-8")
  31. 	resultBytes, _ := json.Marshal(struct {
  32. 		Msg string
  33. 	}{
  34. 		reply,
  35. 	})
  36. 	
  37. 	_, _ = fmt.Fprintln(w, string(resultBytes))
  38. })

可运行的示例

  1. package main
  3. import (
  4. 	"encoding/json"
  5. 	"fmt"
  6. 	"log"
  7. 	"net"
  8. 	"net/http"
  9. 	"net/rpc"
  10. 	"os/exec"
  11. 	"runtime"
  12. 	"strings"
  13. 	"time"
  14. )
  16. type RPCRequest struct {
  17. 	Method string
  18. 	Params json.RawMessage
  19. 	Id     int
  20. }
  22. type Arith int
  24. func (t *Arith) Multiply(args *json.RawMessage, reply *string) error {
  25. 	para := struct {
  26. 		A int `json:"a"`
  27. 		B int `json:"b"`
  28. 	}{}
  30. 	if err := json.Unmarshal(*args, &para); err != nil {
  31. 		return err
  32. 	}
  33. 	*reply = fmt.Sprintf("%d", para.A*para.B)
  34. 	return nil
  35. }
  37. func (t *Arith) unMarshal(args *json.RawMessage) (*struct{ A, B int }, error) {
  38. 	output := new(struct{ A, B int })
  39. 	err := json.Unmarshal(*args, output)
  40. 	return output, err
  41. }
  43. func (t *Arith) Add(args *json.RawMessage, reply *string) error {
  44. 	para, err := t.unMarshal(args)
  45. 	if err != nil {
  46. 		return err
  47. 	}
  48. 	*reply = fmt.Sprintf("%d", para.A+para.B)
  49. 	return nil
  50. }
  52. func NewRPCServer() (listener net.Listener, runFunc func()) {
  53. 	rpcServer := rpc.NewServer()
  54. 	// rpcServer.RegisterName("Arith", new(Arith)) // same as below
  55. 	if err := rpcServer.Register(new(Arith)); err != nil {
  56. 		log.Fatal(err)
  57. 	}
  59. 	listener, _ = net.Listen("tcp", "127.0.0.1:0")
  60. 	log.Println("[RPC SERVER]", listener.Addr().String())
  61. 	runFunc = func() {
  62. 		for {
  63. 			conn, err := listener.Accept()
  64. 			if err != nil {
  65. 				log.Println("[listener.Accept]", err)
  66. 				return
  67. 			}
  69. 			go func(conn net.Conn) {
  70. 				defer func() {
  71. 					if err = conn.Close(); err != nil && !strings.Contains(err.Error(), "use of closed network connection") {
  72. 						log.Println(err)
  73. 					}
  74. 				}()
  75. 				_ = conn.SetReadDeadline(time.Now().Add(2 * time.Second))
  76. 				rpcServer.ServeConn(conn)
  77. 			}(conn)
  78. 		}
  79. 	}
  80. 	return listener, runFunc
  81. }
  83. var RPCServerAddr *string
  85. func main() {
  86. 	listenerRPC, rpcServerRunFunc := NewRPCServer()
  87. 	defer func() {
  88. 		_ = listenerRPC.Close()
  89. 	}()
  90. 	go rpcServerRunFunc()
  92. 	RPCServerAddr = new(string)
  93. 	*RPCServerAddr = listenerRPC.Addr().String()
  94. 	mux := http.NewServeMux()
  95. 	mux.HandleFunc("/myrpc/", func(w http.ResponseWriter, r *http.Request) {
  96. 		if r.Method != http.MethodPost {
  97. 			http.Error(w, "不允许的方法", http.StatusMethodNotAllowed)
  98. 			return
  99. 		}
  100. 		if r.Header.Get("Content-Type") != "application/json" {
  101. 			http.Error(w, "内容类型错误", http.StatusBadRequest)
  102. 			return
  103. 		}
  105. 		var req RPCRequest
  106. 		if err := json.NewDecoder(r.Body).Decode(&req); err != nil {
  107. 			http.Error(w, err.Error(), http.StatusBadRequest)
  108. 			return
  109. 		}
  111. 		conn, err := rpc.Dial("tcp", *RPCServerAddr)
  112. 		if err != nil {
  113. 			http.Error(w, err.Error(), http.StatusBadRequest)
  114. 			return
  115. 		}
  116. 		defer func() {
  117. 			_ = conn.Close()
  118. 		}()
  120. 		var reply string
  121. 		if err = conn.Call(req.Method, req.Params, &reply); err != nil {
  122. 			http.Error(w, err.Error(), http.StatusBadRequest)
  123. 			return
  124. 		}
  126. 		// 处理响应
  127. 		w.Header().Set("Content-Type", "application/json; charset=utf-8")
  128. 		resultBytes, _ := json.Marshal(struct {
  129. 			Msg   string
  130. 		}{
  131. 			reply,
  132. 		})
  133. 		if _, err = fmt.Fprintln(w, string(resultBytes)); err != nil {
  134. 			log.Println(err)
  135. 		}
  136. 	})
  137. 	mux.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
  138. 		http.ServeFile(w, r, "index.html")
  139. 	})
  141. 	server := http.Server{Addr: "127.0.0.1:0", Handler: mux}
  142. 	listener, _ := net.Listen("tcp", server.Addr)
  143. 	log.Println("[Addr]:", listener.Addr())
  145. 	if runtime.GOOS == "windows" {
  146. 		// 帮助您自动打开浏览器。
  147. 		go func() {
  148. 			time.Sleep(1 * time.Second)
  149. 			if err := exec.Command("rundll32", "url.dll,FileProtocolHandler", "http://"+listener.Addr().String()).Start(); err != nil {
  150. 				panic(err)
  151. 			}
  152. 		}()
  153. 	}
  154. 	_ = server.Serve(listener)
  155. }

index.html

  1. <h2>TEST RPC</h2>
  2. <div></div>
  3. <script type="module">
  4.   async function rpcCall(method, params) {
  5.     return fetch(location.protocol + "//" + location.hostname + (location.port ? ":" + location.port : "") +
  6.       "/myrpc/", {
  7.       method: 'POST',
  8.       headers: {
  9.         'Content-Type': 'application/json'
  10.       },
  11.       body: JSON.stringify({
  12.         method,
  13.         params,
  14.         id: 0
  15.       })
  16.     })
  17.       .then(response => {
  18.         return response.json()
  19.       })
  20.       .then(result => {
  21.         return result
  22.       })
  23.       .catch(error => {
  24.         console.error(error.message)
  25.       })
  26.   }
  28.   
  29.   const aa = await rpcCall("Arith.Multiply", {a: 2, b: 3})
  30.   console.log(aa);
  31.   
  33.   // more test
  34.   [
  35.     ["Arith.Multiply", {a: 2, b: 3}],
  36.     ["Arith.Add", {a: 2, b: 3}],
  37.   ].forEach(async ([method, params]) => {
  38.     const val = await rpcCall(method, params)
  39.     document.querySelector("div").innerHTML += JSON.stringify(val, null, 2) + "<br>"
  40.   })
  41. </script>
英文:

Create a Post and, when a certain condition is met, initiate a TCP connection and feed the data into conn.Call.

for example

  1. http.HandleFunc(&quot;/myrpc/&quot;, func(w http.ResponseWriter, r *http.Request) {
  2. 	// check
  3. 	{
  4. 		// check Method
  5. 		if r.Method != http.MethodPost {
  6. 			http.Error(w, &quot;Method not allowed&quot;, http.StatusMethodNotAllowed)
  7. 			return
  8. 		}
  9. 		// check Content-Type
  10. 		// check Auth
  11. 		// ...
  12. 	}
  14. 	// Get user input
  15. 	var req RPCRequest
  16. 	{
  17. 		_ = json.NewDecoder(r.Body).Decode(&amp;req)
  18. 	}
  20. 	conn, _ := rpc.Dial(&quot;tcp&quot;, &quot;127.0.0.1:12345&quot;)
  21. 	defer conn.Close()
  23. 	var reply string
  24. 	if err := conn.Call(req.Method, req.Params, &amp;reply); err != nil { // &lt;--
  25. 		http.Error(w, err.Error(), http.StatusBadRequest)
  26. 		return
  27. 	}
  29. 	// handle response
  30. 	w.Header().Set(&quot;Content-Type&quot;, &quot;application/json; charset=utf-8&quot;)
  31. 	resultBytes, _ := json.Marshal(struct {
  32. 		Msg string
  33. 	}{
  34. 		reply,
  35. 	})
  36. 	
  37. 	_, _ = fmt.Fprintln(w, string(resultBytes))
  38. })

A Runable example

  1. package main
  3. import (
  4. 	&quot;encoding/json&quot;
  5. 	&quot;fmt&quot;
  6. 	&quot;log&quot;
  7. 	&quot;net&quot;
  8. 	&quot;net/http&quot;
  9. 	&quot;net/rpc&quot;
  10. 	&quot;os/exec&quot;
  11. 	&quot;runtime&quot;
  12. 	&quot;strings&quot;
  13. 	&quot;time&quot;
  14. )
  16. type RPCRequest struct {
  17. 	Method string
  18. 	Params json.RawMessage
  19. 	Id     int
  20. }
  22. type Arith int
  24. func (t *Arith) Multiply(args *json.RawMessage, reply *string) error {
  25. 	para := struct {
  26. 		A int `json:&quot;a&quot;`
  27. 		B int `json:&quot;b&quot;`
  28. 	}{}
  30. 	if err := json.Unmarshal(*args, &amp;para); err != nil {
  31. 		return err
  32. 	}
  33. 	*reply = fmt.Sprintf(&quot;%d&quot;, para.A*para.B)
  34. 	return nil
  35. }
  37. func (t *Arith) unMarshal(args *json.RawMessage) (*struct{ A, B int }, error) {
  38. 	output := new(struct{ A, B int })
  39. 	err := json.Unmarshal(*args, output)
  40. 	return output, err
  41. }
  43. func (t *Arith) Add(args *json.RawMessage, reply *string) error {
  44. 	para, err := t.unMarshal(args)
  45. 	if err != nil {
  46. 		return err
  47. 	}
  48. 	*reply = fmt.Sprintf(&quot;%d&quot;, para.A+para.B)
  49. 	return nil
  50. }
  52. func NewRPCServer() (listener net.Listener, runFunc func()) {
  53. 	rpcServer := rpc.NewServer()
  54. 	// rpcServer.RegisterName(&quot;Arith&quot;, new(Arith)) // same as below
  55. 	if err := rpcServer.Register(new(Arith)); err != nil {
  56. 		log.Fatal(err)
  57. 	}
  59. 	listener, _ = net.Listen(&quot;tcp&quot;, &quot;127.0.0.1:0&quot;)
  60. 	log.Println(&quot;[RPC SERVER]&quot;, listener.Addr().String())
  61. 	runFunc = func() {
  62. 		for {
  63. 			conn, err := listener.Accept()
  64. 			if err != nil {
  65. 				log.Println(&quot;[listener.Accept]&quot;, err)
  66. 				return
  67. 			}
  69. 			go func(conn net.Conn) {
  70. 				defer func() {
  71. 					if err = conn.Close(); err != nil &amp;&amp; !strings.Contains(err.Error(), &quot;use of closed network connection&quot;) {
  72. 						log.Println(err)
  73. 					}
  74. 				}()
  75. 				_ = conn.SetReadDeadline(time.Now().Add(2 * time.Second))
  76. 				rpcServer.ServeConn(conn)
  77. 			}(conn)
  78. 		}
  79. 	}
  80. 	return listener, runFunc
  81. }
  83. var RPCServerAddr *string
  85. func main() {
  86. 	listenerRPC, rpcServerRunFunc := NewRPCServer()
  87. 	defer func() {
  88. 		_ = listenerRPC.Close()
  89. 	}()
  90. 	go rpcServerRunFunc()
  92. 	RPCServerAddr = new(string)
  93. 	*RPCServerAddr = listenerRPC.Addr().String()
  94. 	mux := http.NewServeMux()
  95. 	mux.HandleFunc(&quot;/myrpc/&quot;, func(w http.ResponseWriter, r *http.Request) {
  96. 		if r.Method != http.MethodPost {
  97. 			http.Error(w, &quot;Method not allowed&quot;, http.StatusMethodNotAllowed)
  98. 			return
  99. 		}
  100. 		if r.Header.Get(&quot;Content-Type&quot;) != &quot;application/json&quot; {
  101. 			http.Error(w, &quot;content type error&quot;, http.StatusBadRequest)
  102. 			return
  103. 		}
  105. 		var req RPCRequest
  106. 		if err := json.NewDecoder(r.Body).Decode(&amp;req); err != nil {
  107. 			http.Error(w, err.Error(), http.StatusBadRequest)
  108. 			return
  109. 		}
  111. 		conn, err := rpc.Dial(&quot;tcp&quot;, *RPCServerAddr)
  112. 		if err != nil {
  113. 			http.Error(w, err.Error(), http.StatusBadRequest)
  114. 			return
  115. 		}
  116. 		defer func() {
  117. 			_ = conn.Close()
  118. 		}()
  120. 		var reply string
  121. 		if err = conn.Call(req.Method, req.Params, &amp;reply); err != nil {
  122. 			http.Error(w, err.Error(), http.StatusBadRequest)
  123. 			return
  124. 		}
  126. 		// handle response
  127. 		w.Header().Set(&quot;Content-Type&quot;, &quot;application/json; charset=utf-8&quot;)
  128. 		resultBytes, _ := json.Marshal(struct {
  129. 			Msg   string
  130. 		}{
  131. 			reply,
  132. 		})
  133. 		if _, err = fmt.Fprintln(w, string(resultBytes)); err != nil {
  134. 			log.Println(err)
  135. 		}
  136. 	})
  137. 	mux.HandleFunc(&quot;/&quot;, func(w http.ResponseWriter, r *http.Request) {
  138. 		http.ServeFile(w, r, &quot;index.html&quot;)
  139. 	})
  141. 	server := http.Server{Addr: &quot;127.0.0.1:0&quot;, Handler: mux}
  142. 	listener, _ := net.Listen(&quot;tcp&quot;, server.Addr)
  143. 	log.Println(&quot;[Addr]:&quot;, listener.Addr())
  145. 	if runtime.GOOS == &quot;windows&quot; {
  146. 		// help you open the browser automatically.
  147. 		go func() {
  148. 			time.Sleep(1 * time.Second)
  149. 			if err := exec.Command(&quot;rundll32&quot;, &quot;url.dll,FileProtocolHandler&quot;, &quot;http://&quot;+listener.Addr().String()).Start(); err != nil {
  150. 				panic(err)
  151. 			}
  152. 		}()
  153. 	}
  154. 	_ = server.Serve(listener)
  155. }

index.html

  1. &lt;h2&gt;TEST RPC&lt;/h2&gt;
  2. &lt;div&gt;&lt;/div&gt;
  3. &lt;script type=&quot;module&quot;&gt;
  4.   async function rpcCall(method, params) {
  5.     return fetch(location.protocol + &quot;//&quot; + location.hostname + (location.port ? &quot;:&quot; + location.port : &quot;&quot;) +
  6.       &quot;/myrpc/&quot;, {
  7.       method: &#39;POST&#39;,
  8.       headers: {
  9.         &#39;Content-Type&#39;: &#39;application/json&#39;
  10.       },
  11.       body: JSON.stringify({
  12.         method,
  13.         params,
  14.         id: 0
  15.       })
  16.     })
  17.       .then(response =&gt; {
  18.         return response.json()
  19.       })
  20.       .then(result =&gt; {
  21.         return result
  22.       })
  23.       .catch(error =&gt; {
  24.         console.error(error.message)
  25.       })
  26.   }
  28.   
  29.   const aa = await rpcCall(Arith.Multiply&quot;, {a: 2, b: 3})
  30.   console.log(aa);
  31.   
  33.   // more test
  34.   [
  35.     [&quot;Arith.Multiply&quot;, {a: 2, b: 3}],
  36.     [&quot;Arith.Add&quot;, {a: 2, b: 3}],
  37.   ].forEach(async ([method, params]) =&gt; {
  38.     const val = await rpcCall(method, params)
  39.     document.querySelector(&quot;div&quot;).innerHTML += JSON.stringify(val, null, 2) + &quot;&lt;br&gt;&quot;
  40.   })
  41. &lt;/script&gt;

huangapple
  • 本文由 发表于 2022年6月22日 02:17:47
  • 转载请务必保留本文链接：https://go.coder-hub.com/72705456.html
  • go
  • javascript
  • json-rpc
匿名

发表评论

匿名网友

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

确定