拉模式与推送模式

拉模式的缺点 数据更新频率低，则大多数的请求是无效的
在线用户数量多，则服务端的查询负载高。
定时查询拉取，无法满足时效性要求
推送模式 尽在数据更新才推送，需要维护大量的在线长连接，数据更新后立即推送。

WebSocket推送

浏览器支持的socket编程，轻松维护服务端长连接，基于TCP可靠传输之上的协议，无需开发者关心通讯细节。提供了高度抽象的编程接口，业务开发成本低。

websocket协议

Golang——WebSocket - 图1
协议升级后，继续复用HTTP的底层socket完成后续操作
message底层被切分成多个frame 帧传输。
编程是只需要操作message不需要关心frame
框架底层完成TCP网络I/O,WebSocker协议解析，开发者不需要关心。

  1. package main
  3. import "net/http"
  5. func wsHandle(writer http.ResponseWriter, request *http.Request) {
  6.       writer.Write([]byte("hello world"))
  7. }
  9. func main() {
  10.     http.HandleFunc("/ws", wsHandle)
  11.     http.ListenAndServe(":8888",nil)
  13. }

服务请求参数

  1. Request URL: http://localhost:8888/ws
  2. Request Method: GET
  3. Status Code: 200 OK
  4. Remote Address: [::1]:8888

websocket的服务器端代码

  1. package main
  3. import (
  4.     "fmt"
  5.     "github.com/gorilla/websocket"
  6.     "net/http"
  7.     "time"
  8. )
  10. func wsHandle(writer http.ResponseWriter, request *http.Request) {
  11.     upgrader:= websocket.Upgrader{CheckOrigin: func(r *http.Request) bool {
  12.           return true
  13.       }}
  14.      con,err := upgrader.Upgrade(writer,request,nil)
  15.      defer con.Close()
  16.     if err!=nil {
  17.         writer.Write([]byte(err.Error()))
  18.     }
  19.     for{
  20.         _, p, err := con.ReadMessage()
  21.         if err!= nil {
  22.             writer.Write([]byte(err.Error()))
  23.             break
  24.         }
  25.         fmt.Println("client message "+string(p))
  26.         con.WriteMessage(websocket.TextMessage,[]byte(time.Now().String()))
  27.     }
  28. }
  30. func main() {
  31.     http.HandleFunc("/ws", wsHandle)
  32.     http.ListenAndServe(":8888",nil)
  34. }

Golang——WebSocket - 图2
websocket 客户端代码

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <script>
  6.         window.addEventListener("load", function(evt) {
  7.             var output = document.getElementById("output");
  8.             var input = document.getElementById("input");
  9.             var ws;
  10.             var print = function(message) {
  11.                 var d = document.createElement("div");
  12.                 d.innerHTML = message;
  13.                 output.appendChild(d);
  14.             };
  15.             document.getElementById("open").onclick = function(evt) {
  16.                 if (ws) {
  17.                     return false;
  18.                 }
  19.                 ws = new WebSocket("ws://localhost:8888/ws");
  20.                 ws.onopen = function(evt) {
  21.                     print("连接websocket");
  22.                 }
  23.                 ws.onclose = function(evt) {
  24.                     print("CLOSE");
  25.                     ws = null;
  26.                 }
  27.                 ws.onmessage = function(evt) {
  28.                     print("收到消息: " + evt.data);
  29.                 }
  30.                 ws.onerror = function(evt) {
  31.                     print("ERROR: " + evt.data);
  32.                 }
  33.                 return false;
  34.             };
  35.             document.getElementById("send").onclick = function(evt) {
  36.                 if (!ws) {
  37.                     return false;
  38.                 }
  39.                 print("发送消息: " + input.value);
  40.                 ws.send(input.value);
  41.                 return false;
  42.             };
  43.             document.getElementById("close").onclick = function(evt) {
  44.                 if (!ws) {
  45.                     return false;
  46.                 }
  47.                 ws.close();
  48.                 return false;
  49.             };
  50.         });
  51.     </script>
  52. </head>
  53. <body>
  54. <table>
  55.     <tr><td valign="top" width="50%">
  56.             <p>点击启动按钮创建websocket连接<br/>
  57.                点击发送按钮可以发送任意消息给服务器<br/>
  58.                点击关闭按钮断开websocket连接
  59.             </p>
  60.             <form>
  61.                 <button id="open">启动</button>
  62.                 <button id="close">关闭</button>
  63.                 <input id="input" type="text" value="Hello golang!">
  64.                 <button id="send">发送</button>
  65.             </form>
  66.         </td><td valign="top" width="50%">
  67.             <div id="output"></div>
  68.         </td></tr></table>
  69. </body>
  70. </html>

运行client.html,效果如下
Golang——WebSocket - 图3
数据抓包
Golang——WebSocket - 图4

参考

https://github.com/halfrost/Halfrost-Field/blob/master/contents/Protocol/WebSocket.md