8.2 WebSockets

WebSockets are an important feature of HTML5. It implements browser based remote sockets, which allows browsers to have full-duplex communications with servers. Main stream browsers like Firefox, Google Chrome and Safari provide support for this WebSockets.

People often used “roll polling” for instant messaging services before WebSockets were born, which allow clients to send HTTP requests periodically. The server then returns the latest data to clients. The downside to this method is that it requires clients to keep sending many requests to the server, which can consume a large amount of bandwidth.

WebSockets use a special kind of header that reduces the number of handshakes required between browser and server to only one, for establishing a connection. This connection will remain active throughout its lifetime, and you can use JavaScript to write or read data from this connection, as in the case of a conventional TCP sockets. It solves many of the headache involved with real-time web development, and has the following advantages over traditional HTTP:

  • Only one TCP connection for a single web client.
  • WebSocket servers can push data to web clients.
  • Lightweight header to reduce data transmission overhead.

WebSocket URLs begin with ws:// or wss://(SSL). The following figure shows the communication process of WebSockets. A particular HTTP header is sent to the server as part of the handshaking protocol and the connection is established. Then, servers or clients are able to send or receive data through JavaScript via WebSocket. This socket can then be used by an event handler to receive data asynchronously.

8.2. WebSocket - 图1

Figure 8.2 WebSocket principle

WebSocket principles

The WebSocket protocol is actually quite simple. After successfully completing the initial handshake, a connection is established. Subsequent data communications will all begin with “\x00” and end with “\xFF”. This prefix and suffix will be visible to clients because the WebSocket will break off both end, yielding the raw data automatically.

WebSocket connections are requested by browsers and responded to by servers, after which the connection is established. This process is often called “handshaking”.

Consider the following requests and responses:

8.2. WebSocket - 图2

Figure 8.3 WebSocket request and response.

“Sec-WebSocket-key” is generated randomly, as you may have already guessed, and it’s base64 encoded. Servers need to append this key to a fixed string after accepting a request:

  1. 258EAFA5-E914-47DA-95CA-C5AB0DC85B11

Suppose we have f7cb4ezEAl6C3wRaU6JORA==, then we have:

  1. f7cb4ezEAl6C3wRaU6JORA==258EAFA5-E914-47DA-95CA-C5AB0DC85B11

Use sha1 to compute the binary value and use base64 to encode it. We will then we have:

  1. rE91AJhfC+6JdVcVXOGJEADEJdQ=

Use this as the value of the Sec-WebSocket-Accept response header.

WebSocket in Go

The Go standard library does not support WebSockets. However the websocket package, which is a sub-package of go.net does, and is officially maintained and supported.

Use go get to install this package:

  1. go get golang.org/x/net/websocket

WebSockets have both client and server sides. Let’s see a simple example where a user inputs some information on the client side and sends it to the server through a WebSocket, followed by the server pushing information back to the client.

Client code:

  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>

As you can see, it’s very easy to use the client side JavaScript functions to establish a connection. The onopen event gets triggered after successfully completing the aforementioned handshaking process. It tells the client that the connection has been created successfully. Clients attempting to open a connection typically bind to four events:

  • 1）onopen: triggered after connection has been established.
  • 2）onmessage: triggered after receiving a message.
  • 3）onerror: triggered after an error has occurred.
  • 4）onclose: triggered after the connection has closed.

Server code:

  1. package main
  3. import (
  4.     "golang.org/x/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))
  36.     if err := http.ListenAndServe(":1234", nil); err != nil {
  37.         log.Fatal("ListenAndServe:", err)
  38.     }
  39. }

When a client Sends user input information, the server Receives it, and uses Send once again to return a response.

8.2. WebSocket - 图3

Figure 8.4 WebSocket server received information.

Through the example above, we can see that the client and server side implementation of WebSockets is very convenient. We can use the net package directly in Go. With the rapid development of HTML5, I think that WebSockets will take on a much more important role in modern day web development; we should all be at least a little bit familiar with them.