使用Golang服务器直接创建WebSocket连接的静态HTML页面。

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

Static html page created the WebSocket connection golang server directly

问题

我正在编写一个需要创建到服务器的websocket的html页面。

在服务器上，我使用了code.google.com/p/go.net/websocket中的示例来接受连接。

然而，在Chrome26中，响应是

WebSocket连接到'ws://127.0.0.1:1234/'失败：意外的响应代码：400

有什么我漏掉的东西（比如握手）吗？

这是我的html，服务器使用的是go语言

  1. <html>
  2. <head></head>
  3. <body>
  4. <script type="text/javascript">
  5.     var sock = null;
  6.     var wsuri = "ws://127.0.0.1:1234";
  8.     window.onload = function() {
  10.         console.log("onload");
  12.         sock = new WebSocket(wsuri);
  14.         sock.onopen = function() {
  15.             console.log("connected to " + wsuri);
  16.         }
  18.         sock.onclose = function(e) {
  19.             console.log("connection closed (" + e.code + ")");
  20.         }
  22.         sock.onmessage = function(e) {
  23.             console.log("message received: " + e.data);
  24.         }
  25.     };
  27.     function send() {
  28.         var msg = document.getElementById('message').value;
  29.         sock.send(msg);
  30.     };
  31. </script>
  32. <h1>WebSocket Echo Test</h1>
  33. <form>
  34.     <p>
  35.         Message: <input id="message" type="text" value="Hello, world!">
  36.     </p>
  37. </form>
  38. <button onclick="send();">Send Message</button>
  39. </body>
  40. </html>
  1. package main
  3. import (
  4.     "code.google.com/p/go.net/websocket"
  5.     "fmt"
  6.     "log"
  7.     "net/http"
  8. )
  10. func Echo(ws *websocket.Conn) {
  11.     var err error
  13.     for {
  14.         var reply string
  16.         if err = websocket.Message.Receive(ws, &reply); err != nil {
  17.             fmt.Println("Can't receive")
  18.             break
  19.         }
  21.         fmt.Println("Received back from client: " + reply)
  23.         msg := "Received:  " + reply
  24.         fmt.Println("Sending to client: " + msg)
  26.         if err = websocket.Message.Send(ws, msg); err != nil {
  27.             fmt.Println("Can't send")
  28.             break
  29.         }
  30.     }
  31. }
  33. func main() {
  34.     http.Handle("/", websocket.Handler(Echo))
  35.     if err := http.ListenAndServe(":1234", nil); err != nil {
  36.         log.Fatal("ListenAndServe:", err)
  37.     }
  38. }
英文:

I'm writing an html page that needs to create a websocket to the server

On the server, I used the example in "code.google.com/p/go.net/websocket" just accept the connection.

However, in Chrome26 the response is

WebSocket connection to 'ws://127.0.0.1:1234/' failed: Unexpected response code: 400

Is there something is missed (like a handshake)?

This is my html and server is using go

  1. &lt;html&gt;
  2. &lt;head&gt;&lt;/head&gt;
  3. &lt;body&gt;
  4. &lt;script type=&quot;text/javascript&quot;&gt;
  5.     var sock = null;
  6.     var wsuri = &quot;ws://127.0.0.1:1234&quot;;
  8.     window.onload = function() {
  10.         console.log(&quot;onload&quot;);
  12.         sock = new WebSocket(wsuri);
  14.         sock.onopen = function() {
  15.             console.log(&quot;connected to &quot; + wsuri);
  16.         }
  18.         sock.onclose = function(e) {
  19.             console.log(&quot;connection closed (&quot; + e.code + &quot;)&quot;);
  20.         }
  22.         sock.onmessage = function(e) {
  23.             console.log(&quot;message received: &quot; + e.data);
  24.         }
  25.     };
  27.     function send() {
  28.         var msg = document.getElementById(&#39;message&#39;).value;
  29.         sock.send(msg);
  30.     };
  31. &lt;/script&gt;
  32. &lt;h1&gt;WebSocket Echo Test&lt;/h1&gt;
  33. &lt;form&gt;
  34.     &lt;p&gt;
  35.         Message: &lt;input id=&quot;message&quot; type=&quot;text&quot; value=&quot;Hello, world!&quot;&gt;
  36.     &lt;/p&gt;
  37. &lt;/form&gt;
  38. &lt;button onclick=&quot;send();&quot;&gt;Send Message&lt;/button&gt;
  39. &lt;/body&gt;
  40. &lt;/html&gt;

//------------------------------

  1. package main
  3. import (
  4. 	&quot;code.google.com/p/go.net/websocket&quot;
  5. 	&quot;fmt&quot;
  6. 	&quot;log&quot;
  7. 	&quot;net/http&quot;
  8. )
  10. func Echo(ws *websocket.Conn) {
  11. 	var err error
  13. 	for {
  14. 		var reply string
  16. 		if err = websocket.Message.Receive(ws, &amp;reply); err != nil {
  17. 			fmt.Println(&quot;Can&#39;t receive&quot;)
  18. 			break
  19. 		}
  21. 		fmt.Println(&quot;Received back from client: &quot; + reply)
  23. 		msg := &quot;Received:  &quot; + reply
  24. 		fmt.Println(&quot;Sending to client: &quot; + msg)
  26. 		if err = websocket.Message.Send(ws, msg); err != nil {
  27. 			fmt.Println(&quot;Can&#39;t send&quot;)
  28. 			break
  29. 		}
  30. 	}
  31. }
  33. func main() {
  34. 	http.Handle(&quot;/&quot;, websocket.Handler(Echo))
  35. 	if err := http.ListenAndServe(&quot;:1234&quot;, nil); err != nil {
  36. 		log.Fatal(&quot;ListenAndServe:&quot;, err)
  37. 	}
  38. }

答案1

得分: 5

Chrome可能会抛出400错误，因为它认为您正在尝试对websocket服务器进行跨域请求，并认为您可能没有权限。

要解决此问题，您只需从您的go服务器上提供html。

所以将您的sock.go代码更改为：

  1. package main
  3. import (
  4.     "code.google.com/p/go.net/websocket"
  5.     "fmt"
  6.     "log"
  7.     "net/http"
  8. )
  10. func Echo(ws *websocket.Conn) {
  11.     var err error
  13.     for {
  14.         var reply string
  16.         if err = websocket.Message.Receive(ws, &reply); err != nil {
  17.             fmt.Println("无法接收")
  18.             break
  19.         }
  21.         fmt.Println("从客户端接收到的消息：" + reply)
  23.         msg := "接收到的消息：" + reply
  24.         fmt.Println("发送给客户端的消息：" + msg)
  26.         if err = websocket.Message.Send(ws, msg); err != nil {
  27.             fmt.Println("无法发送")
  28.             break
  29.         }
  30.     }
  31. }
  33. func main() {
  34.     http.Handle("/", http.FileServer(http.Dir("."))) // <-- 注意这一行
  35.     http.Handle("/socket", websocket.Handler(Echo))
  36.     log.Println("服务中")
  37.     if err := http.ListenAndServe(":1234", nil); err != nil {
  38.         log.Fatal("ListenAndServe:", err)
  39.     }
  40. }

并将您的index.html文件添加到与sock.go文件相同的目录中：

  1. <html>
  2. <head></head>
  3. <body>
  4. <script type="text/javascript">
  5.     var sock = null;
  6.     var wsuri = "ws://127.0.0.1:1234/socket"; // <-- 注意新的路径
  8.     window.onload = function() {
  10.         console.log("onload");
  12.         sock = new WebSocket(wsuri);
  14.         sock.onopen = function() {
  15.             console.log("已连接到" + wsuri);
  16.         }
  18.         sock.onclose = function(e) {
  19.             console.log("连接已关闭（" + e.code + "）");
  20.         }
  22.         sock.onmessage = function(e) {
  23.             console.log("收到消息：" + e.data);
  24.         }
  25.     };
  27.     function send() {
  28.         var msg = document.getElementById('message').value;
  29.         sock.send(msg);
  30.     };
  31. </script>
  32. <h1>WebSocket Echo测试</h1>
  33. <form>
  34.     <p>
  35.         消息：<input id="message" type="text" value="Hello, world!">
  36.     </p>
  37. </form>
  38. <button onclick="send();">发送消息</button>
  39. </body>
  40. </html>

现在您将能够在Chrome中进行连接。

英文:

Chrome is likely throwing error 400 because it thinks you are trying to do a cross-domain request to the websocket server and thinks it is unlikely you have permission.

To solve the issue you simply have to server your html from your go-server too.

So change your sock.go code to:

  1. package main
  3. import (
  4. 	&quot;code.google.com/p/go.net/websocket&quot;
  5. 	&quot;fmt&quot;
  6. 	&quot;log&quot;
  7. 	&quot;net/http&quot;
  8. )
  10. func Echo(ws *websocket.Conn) {
  11. 	var err error
  13. 	for {
  14. 		var reply string
  16. 		if err = websocket.Message.Receive(ws, &amp;reply); err != nil {
  17. 			fmt.Println(&quot;Can&#39;t receive&quot;)
  18. 			break
  19. 		}
  21. 		fmt.Println(&quot;Received back from client: &quot; + reply)
  23. 		msg := &quot;Received:  &quot; + reply
  24. 		fmt.Println(&quot;Sending to client: &quot; + msg)
  26. 		if err = websocket.Message.Send(ws, msg); err != nil {
  27. 			fmt.Println(&quot;Can&#39;t send&quot;)
  28. 			break
  29. 		}
  30. 	}
  31. }
  33. func main() {
  34. 	http.Handle(&quot;/&quot;, http.FileServer(http.Dir(&quot;.&quot;))) // &lt;-- note this line
  35. 	http.Handle(&quot;/socket&quot;, websocket.Handler(Echo))
  36. 	log.Println(&quot;serving&quot;)
  37. 	if err := http.ListenAndServe(&quot;:1234&quot;, nil); err != nil {
  38. 		log.Fatal(&quot;ListenAndServe:&quot;, err)
  39. 	}
  40. }

and add your index.html file to the same directory as your sock.go file:

  1. &lt;html&gt;
  2. &lt;head&gt;&lt;/head&gt;
  3. &lt;body&gt;
  4. &lt;script type=&quot;text/javascript&quot;&gt;
  5.     var sock = null;
  6.     var wsuri = &quot;ws://127.0.0.1:1234/socket&quot;; // &lt;-- note new path
  8.     window.onload = function() {
  10.         console.log(&quot;onload&quot;);
  12.         sock = new WebSocket(wsuri);
  14.         sock.onopen = function() {
  15.             console.log(&quot;connected to &quot; + wsuri);
  16.         }
  18.         sock.onclose = function(e) {
  19.             console.log(&quot;connection closed (&quot; + e.code + &quot;)&quot;);
  20.         }
  22.         sock.onmessage = function(e) {
  23.             console.log(&quot;message received: &quot; + e.data);
  24.         }
  25.     };
  27.     function send() {
  28.         var msg = document.getElementById(&#39;message&#39;).value;
  29.         sock.send(msg);
  30.     };
  31. &lt;/script&gt;
  32. &lt;h1&gt;WebSocket Echo Test&lt;/h1&gt;
  33. &lt;form&gt;
  34.     &lt;p&gt;
  35.         Message: &lt;input id=&quot;message&quot; type=&quot;text&quot; value=&quot;Hello, world!&quot;&gt;
  36.     &lt;/p&gt;
  37. &lt;/form&gt;
  38. &lt;button onclick=&quot;send();&quot;&gt;Send Message&lt;/button&gt;
  39. &lt;/body&gt;
  40. &lt;/html&gt;

Now you will be able to connect from within chrome.

huangapple
  • 本文由 发表于 2013年4月9日 00:40:44
  • 转载请务必保留本文链接：https://go.coder-hub.com/15884480.html
  • go
  • sockets
  • websocket
匿名

发表评论

匿名网友

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

确定