Using the goframe framework for websocket development is quite straightforward. Below, we demonstrate the use of the goframe framework’s websocket by implementing a simple echo server (the client is implemented using HTML5).

HTML5 Client

Here’s the H5 client code:

  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4.     <title>gf websocket echo server</title>
  5.      <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
  6.     <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
  7.     <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
  8. </head>
  9. <body>
  10. <div class="container">
  11.     <div class="list-group" id="divShow"></div>
  12.     <div>
  13.         <div><input class="form-control" id="txtContent" autofocus placeholder="Please enter content to send"></div>
  14.         <div><button class="btn btn-default" id="btnSend" style="margin-top:15px">Send</button></div>
  15.     </div>
  16. </div>
  17. </body>
  18. </html>
  20. <script type="application/javascript">
  21.     // Display info message
  22.     function showInfo(content) {
  23.         $("<div class=\"list-group-item list-group-item-info\">" + content + "</div>").appendTo("#divShow")
  24.     }
  25.     // Display warning message
  26.     function showWaring(content) {
  27.         $("<div class=\"list-group-item list-group-item-warning\">" + content + "</div>").appendTo("#divShow")
  28.     }
  29.     // Display success message
  30.     function showSuccess(content) {
  31.         $("<div class=\"list-group-item list-group-item-success\">" + content + "</div>").appendTo("#divShow")
  32.     }
  33.     // Display error message
  34.     function showError(content) {
  35.         $("<div class=\"list-group-item list-group-item-danger\">" + content + "</div>").appendTo("#divShow")
  36.     }
  38.     $(function () {
  39.         const url = "ws://127.0.0.1:8199/ws";
  40.         let ws  = new WebSocket(url);
  41.         try {
  42.             // ws connection successful
  43.             ws.onopen = function () {
  44.                 showInfo("WebSocket Server [" + url +"] connected successfully!");
  45.             };
  46.             // ws connection closed
  47.             ws.onclose = function () {
  48.                 if (ws) {
  49.                     ws.close();
  50.                     ws = null;
  51.                 }
  52.                 showError("WebSocket Server [" + url +"] connection closed!");
  53.             };
  54.             // ws connection error
  55.             ws.onerror = function () {
  56.                 if (ws) {
  57.                     ws.close();
  58.                     ws = null;
  59.                 }
  60.                 showError("WebSocket Server [" + url +"] connection closed!");
  61.             };
  62.             // ws data returned
  63.             ws.onmessage = function (result) {
  64.                 showWaring(" > " + result.data);
  65.             };
  66.         } catch (e) {
  67.             alert(e.message);
  68.         }
  70.         // Button click to send data
  71.         $("#btnSend").on("click", function () {
  72.             if (ws == null) {
  73.                 showError("WebSocket Server [" + url +"] connection failed, please refresh the page with F5!");
  74.                 return;
  75.             }
  76.             const content = $.trim($("#txtContent").val()).replace("/[\n]/g", "");
  77.             if (content.length <= 0) {
  78.                 alert("Please enter content to send!");
  79.                 return;
  80.             }
  81.             $("#txtContent").val("")
  82.             showSuccess(content);
  83.             ws.send(content);
  84.         });
  86.         // Enter button triggers send click event
  87.         $("#txtContent").on("keydown", function (event) {
  88.             if (event.keyCode === 13) {
  89.                 $("#btnSend").trigger("click");
  90.             }
  91.         });
  92.     })
  94. </script>

Note that the server connection address here is: ws://127.0.0.1:8199/ws.

The client’s functionality is quite simple, mainly implementing these features:

  • Maintaining the connection status with the server’s websocket and information display;
  • Inputting content in the API and sending information to the websocket server;
  • Echoing the returned information from the websocket on the API;

WebSocket Server

  1. package main
  3. import (
  4.     "github.com/gogf/gf/v2/frame/g"
  5.     "github.com/gogf/gf/v2/net/ghttp"
  6.     "github.com/gogf/gf/v2/os/gctx"
  7.     "github.com/gogf/gf/v2/os/gfile"
  8.     "github.com/gogf/gf/v2/os/glog"
  9. )
  11. var ctx = gctx.New()
  13. func main() {
  14.     s := g.Server()
  15.     s.BindHandler("/ws", func(r *ghttp.Request) {
  16.         ws, err := r.WebSocket()
  17.         if err != nil {
  18.             glog.Error(ctx, err)
  19.             r.Exit()
  20.         }
  21.         for {
  22.             msgType, msg, err := ws.ReadMessage()
  23.             if err != nil {
  24.                 return
  25.             }
  26.             if err = ws.WriteMessage(msgType, msg); err != nil {
  27.                 return
  28.             }
  29.         }
  30.     })
  31.     s.SetServerRoot(gfile.MainPkgPath())
  32.     s.SetPort(8199)
  33.     s.Run()
  34. }

As you can see, the server code is quite simple. Here are a few points worth noting:

  1. WebSocket Method

The route registration method for a websocket server is the same as that for a regular http callback function. However, in handling the API, we need to convert the request into a websocket operation using the ghttp.Request.WebSocket method (using the pointer object r.WebSocket()) and return a WebSocket object, which is used for subsequent websocket communication operations. Of course, if the client’s request is not a websocket operation, the conversion will fail. The method will return an error message, so please note to check the error return value when using this method.

  1. ReadMessage & WriteMessage

Reading and writing messages correspond to the data reading and writing operations of websocket (ReadMessage & WriteMessage). It’s important to note that both of these methods have a msgType variable that indicates the type of data to be read and written. The two common data types are: string data or binary data. During usage, since both sides of the API will agree on a unified data format, the msgType for reading and writing is almost always the same. Therefore, in this example, when returning a message, the data type parameter directly uses the read msgType.

HTTPS WebSocket

If HTTPS WebSocket support is needed, all that is required is for the WebServer to support HTTPS, and the WebSocket access address needs to use the wss:// protocol. In the client HTML5 page above, the WebSocket access address needs to be changed to: wss://127.0.0.1:8199/wss. Server example code:

  1. package main
  3. import (
  4.     "github.com/gogf/gf/v2/frame/g"
  5.     "github.com/gogf/gf/v2/net/ghttp"
  6.     "github.com/gogf/gf/v2/os/gctx"
  7.     "github.com/gogf/gf/v2/os/gfile"
  8.     "github.com/gogf/gf/v2/os/glog"
  9. )
  11. var ctx = gctx.New()
  13. func main() {
  14.     s := g.Server()
  15.     s.BindHandler("/wss", func(r *ghttp.Request) {
  16.         ws, err := r.WebSocket()
  17.         if err != nil {
  18.             glog.Error(ctx, err)
  19.             r.Exit()
  20.         }
  21.         for {
  22.             msgType, msg, err := ws.ReadMessage()
  23.             if err != nil {
  24.                 return
  25.             }
  26.             if err = ws.WriteMessage(msgType, msg); err != nil {
  27.                 return
  28.             }
  29.         }
  30.     })
  31.     s.SetServerRoot(gfile.MainPkgPath())
  32.     s.EnableHTTPS("../../https/server.crt", "../../https/server.key")
  33.     s.SetPort(8199)
  34.     s.Run()
  35. }

Example Result Display

First, execute the example code main.go, then visit the page http://127.0.0.1:8199/. Enter the request content and submit it, then close the program on the server side. You will see that the page echoes the submitted content and instantly displays the change in websocket connection status. When the server is closed, the client will instantly print out the closure message.

WebSocket - 图1

Websocket Security Validation

The websocket module in the GoFrame framework does not perform same-origin checks (origin), which means that websockets under these conditions allow complete cross-origin access.

Security validation needs to be handled at the business layer, which mainly includes the following aspects:

  1. Validation of origin: Before executing r.WebSocket(), the business layer needs to validate origin for the same-origin request, or perform custom checks on the request (if request parameters are submitted). If the validation fails, call r.Exit() to terminate the request.
  2. Validation of websocket communication data: Data communication often involves some custom data structures, and authentication logic should be added to these communication data;

WebSocket Client

  1.  package main
  3. import (
  4.     "crypto/tls"
  5.     "fmt"
  6.     "net/http"
  7.     "time"
  9.     "github.com/gogf/gf/v2/net/gclient"
  10.     "github.com/gorilla/websocket"
  11. )
  13. func main() {
  14.     client := gclient.NewWebSocket()
  15.     client.HandshakeTimeout = time.Second    // Set timeout
  16.     client.Proxy = http.ProxyFromEnvironment // Set proxy
  17.     client.TLSClientConfig = &tls.Config{}   // Set TLS configuration
  19.     conn, _, err := client.Dial("ws://127.0.0.1:8199/ws", nil)
  20.     if err != nil {
  21.         panic(err)
  22.     }
  23.     defer conn.Close()
  25.     err = conn.WriteMessage(websocket.TextMessage, []byte("hello word"))
  26.     if err != nil {
  27.         panic(err)
  28.     }
  30.     mt, data, err := conn.ReadMessage()
  31.     if err != nil {
  32.         panic(err)
  33.     }
  34.     fmt.Println(mt, string(data))
  35. }