前言

在WebSocket呈现之前，前端和后端交互通常应用Ajax进行HTTP API 通信，然而若有实时性要求的我的项目，如聊天室或游戏中PVP对战或推送音讯等场景，须要前端定时向后端轮询，然而轮询过快可能导致后端服务压力过大，轮询过慢可能导致实时性不高。WebSocket则为浏览器/客户端和服务器和服务端提供了双向通信的能力，放弃了客户端和服务端的长连贯，反对双向推送音讯

什么是WebSocket

WebSocket和HTTP一样属于OSI网络协议中的第七层，反对双向通信，底层连贯采纳TCP。WebSocket并不是全新的协定，应用时须要由HTTP降级，故它应用的端口是80（或443，有HTTPS降级而来），WebSocket Secure (wss)是WebSocket (ws)的加密版本，下图是WebSocket的建设和通信示意图。

须要特地留神的有

疾速入门

（注：本文应用golang语言，不过原理都是想通的）

net/httpWebSocket

1. 启动服务

gorilla/websocket 的聊天室的README.md

$ go get github.com/gorilla/websocket
$ cd `go list -f '{{.Dir}}' github.com/gorilla/websocket/examples/chat`
$ go run *.go
http://localhost:8080/

作为示例，我关上了两个页面，如下图所示

hello,myname is jamesnetwork

3. 如何建设连贯

同样还是上述的F12调试窗口中的network tab 下的ws，关上申请头

<img src=”http://tva1.sinaimg.cn/large/8dfd1ceegy1gyecwl7xxrj211o0oigwp.jpg” alt=”image.png” style=”zoom: 25%;” /><img src=”http://tva1.sinaimg.cn/large/8dfd1ceegy1gyeczxc6ukj20we0powna.jpg” alt=”image.png” style=”zoom:25%;” />

申请音讯：

GET ws://localhost:8080/ws HTTP/1.1
Host: localhost:8080
Connection: Upgrade
Pragma: no-cache
Cache-Control: no-cache
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.110 Safari/537.36
Upgrade: websocket
Origin: http://localhost:8080
Sec-WebSocket-Version: 13
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.9
Cookie: Goland-cd273d2a=102d1f43-0418-4ea3-9959-2975794fdfe3
Sec-WebSocket-Key: 2e1HXejEZhjvYEEVOEE79g==
Sec-WebSocket-Extensions: permessage-deflate; client_max_window_bits
ws:///pathUpgrade: websocketConnection: UpgradeSec-WebSocket-Key: 2e1HXejEZhjvYEEVOEE79g==2e1HXejEZhjvYEEVOEE79g==Sec-WebSocket-Version: 13

应答音讯：

HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: WPaVPwi6nk4cFFxS8NJ3BIwAtNE=
101Upgrade: websocket
Sec-WebSocket-Accept: WPaVPwi6nk4cFFxS8NJ3BIwAtNE=Sec-WebSocket-Key258EAFA5-E914-47DA-95CA-C5AB0DC85B11Sec-WebSocket-Accept
Sec-WebSocket-KeySec-WebSocket-Accept

4. gorilla/websocket代码

查看下面chat的demo代码是学习的好材料

var addr = flag.String("addr", ":8080", "http service address")

func serveHome(w http.ResponseWriter, r *http.Request) {
    log.Println(r.URL)
    if r.URL.Path != "/" {
        http.Error(w, "Not found", http.StatusNotFound)
        return
    }
    if r.Method != "GET" {
        http.Error(w, "Method not allowed", http.StatusMethodNotAllowed)
        return
    }
    http.ServeFile(w, r, "home.html")
}

func main() {
    flag.Parse()
    hub := newHub()
    go hub.run()
    http.HandleFunc("/", serveHome)
    http.HandleFunc("/ws", func(w http.ResponseWriter, r *http.Request) {
        serveWs(hub, w, r)
    })
    err := http.ListenAndServe(*addr, nil)
    if err != nil {
        log.Fatal("ListenAndServe: ", err)
    }
}
serveHomeserveWs
<!DOCTYPE html>
<html lang="en">
<head>
<title>Chat Example</title>
<script type="text/javascript">
window.onload = function () {
    var conn;
    var msg = document.getElementById("msg");
    var log = document.getElementById("log");

    function appendLog(item) {
        var doScroll = log.scrollTop > log.scrollHeight - log.clientHeight - 1;
        log.appendChild(item);
        if (doScroll) {
            log.scrollTop = log.scrollHeight - log.clientHeight;
        }
    }

    document.getElementById("form").onsubmit = function () {
        if (!conn) {
            return false;
        }
        if (!msg.value) {
            return false;
        }
        conn.send(msg.value);
        msg.value = "";
        return false;
    };

    if (window["WebSocket"]) {
        conn = new WebSocket("ws://" + document.location.host + "/ws");
        conn.onclose = function (evt) {
            var item = document.createElement("div");
            item.innerHTML = "<b>Connection closed.</b>";
            appendLog(item);
        };
        conn.onmessage = function (evt) {
            var messages = evt.data.split('\n');
            for (var i = 0; i < messages.length; i++) {
                var item = document.createElement("div");
                item.innerText = messages[i];
                appendLog(item);
            }
        };
    } else {
        var item = document.createElement("div");
        item.innerHTML = "<b>Your browser does not support WebSockets.</b>";
        appendLog(item);
    }
};
</script>
<style type="text/css">
html {
    overflow: hidden;
}
...

</style>
</head>
<body>
<div id="log"></div>
<form id="form">
    <input type="submit" value="Send" />
    <input type="text" id="msg" size="64" autofocus />
</form>
</body>
</html>

home.htmlconn.oncloseconn.onmessageconn.sendconn.onopen
// serveWs handles websocket requests from the peer.
func serveWs(hub *Hub, w http.ResponseWriter, r *http.Request) {
    conn, err := upgrader.Upgrade(w, r, nil)
    if err != nil {
        log.Println(err)
        return
    }
    client := &Client{hub: hub, conn: conn, send: make(chan []byte, 256)}
    client.hub.register <- client

    // Allow collection of memory referenced by the caller by doing all work in
    // new goroutines.
    go client.writePump()
    go client.readPump()
}

conn, err := upgrader.Upgrade(w, r, nil)http.Hijacker
// Hub maintains the set of active clients and broadcasts messages to the
// clients.
type Hub struct {
   // Registered clients.
   clients map[*Client]bool

   // Inbound messages from the clients.
   broadcast chan []byte

   // Register requests from the clients.
   register chan *Client

   // Unregister requests from clients.
   unregister chan *Client
}
Hubclientsclients
go client.readPump()broadcastgo client.writePump()broadcastclients
WebSocket协定

下面曾经对ws进行了疾速入门，那么WebSocket的通信格局是怎么样定义？这节就来介绍下


图片截至rfc6455#section-5.2

FIN:占1 bit

1示意分片音讯的最初一个后片

RSV1, RSV2, RSV3：各占 1 个bit

个别全0，当客户端和服务端协商协商扩大时，值由协商定义

Opcode: 4 个bit

操作代码，Opcode 的值决定了应该如何解析后续的数据载荷（data payload）

  • %x0：示意一个连续帧。当 Opcode 为 0 时，示意本次数据传输采纳了数据分片，以后收到的数据帧为其中一个数据分片。
  • %x1：示意这是一个文本帧（frame）
  • %x2：示意这是一个二进制帧（frame）
  • %x3-7：保留的操作代码，用于后续定义的非管制帧。
  • %x8：示意连贯断开。
  • %x9：示意这是一个 ping 操作。
  • %xA：示意这是一个 pong 操作。
  • %xB-F：保留的操作代码，用于后续定义的管制帧

Mask: 1 个bit

是否对数据载荷掩码操作。掩码只能客户端对服务端发送数据时能够掩码操作。

如果 Mask 是 1，那么在 Masking-key 中会定义一个掩码键（masking key），并用这个掩码键来对数据载荷进行反掩码。所有客户端发送到服务端的数据帧，Mask 都是 1。

掩码的作用次要是避免歹意的客户端将其余网站的资源缓存在反向代理上，导致其余网站的用户应用歹意攻击者避免的恶意代码。

Payload length：数据载荷的长度，单位是字节。为 7bit，或 7+16 bit，或 1+64 bit。

假如数 Payload length === x，如果

  • x 为 0~126：数据的长度为 x 字节。
  • x 为 126：后续 2 个字节代表一个 16 位的无符号整数，该无符号整数的值为数据的长度。
  • x 为 127：后续 8 个字节代表一个 64 位的无符号整数（最高位为 0），该无符号整数的值为数据的长度。

此外，如果 payload length 占用了多个字节的话，payload length 的二进制表白采纳网络序（big endian，重要的位在前）。

Masking-key：0 或 4 bytes（32 bit）

所有从客户端传送到服务端的数据帧，数据载荷都进行了掩码操作，Mask 为 1，且携带了 4 字节的 Masking-key。如果 Mask 为 0，则没有 Masking-key。

备注：载荷数据的长度，不包含 mask key 的长度。

Payload data：(x+y) bytes

载荷数据：包含了扩大数据、利用数据。其中，扩大数据 x 字节，利用数据 y 字节。

扩大数据：如果没有协商应用扩大的话，扩大数据数据为 0 字节。所有的扩大都必须申明扩大数据的长度，或者能够如何计算出扩大数据的长度。此外，扩大如何应用必须在握手阶段就协商好。如果扩大数据存在，那么载荷数据长度必须将扩大数据的长度蕴含在内。

利用数据：任意的利用数据，在扩大数据之后（如果存在扩大数据），占据了数据帧残余的地位。载荷数据长度 减去 扩大数据长度，就失去利用数据的长度

示例

FINOpcode

第一条音讯

FIN=1, 示意是以后音讯的最初一个数据帧。服务端收到以后数据帧后，能够解决音讯。opcode=0x1，示意客户端发送的是文本类型。

第二条音讯

  1. FIN=0，opcode=0x1，示意发送的是文本类型，且音讯还没发送实现，还有后续的数据帧。
  2. FIN=0，opcode=0x0，示意音讯还没发送实现，还有后续的数据帧，以后的数据帧须要接在上一条数据帧之后。
  3. FIN=1，opcode=0x0，示意音讯曾经发送实现，没有后续的数据帧，以后的数据帧须要接在上一条数据帧之后。服务端能够将关联的数据帧组装成残缺的音讯。
Client: FIN=1, opcode=0x1, msg="hello"
Server: (process complete message immediately) Hi.
Client: FIN=0, opcode=0x1, msg="and a"
Server: (listening, new message containing text started)
Client: FIN=0, opcode=0x0, msg="happy new"
Server: (listening, payload concatenated to previous message)
Client: FIN=1, opcode=0x0, msg="year!"
Server: (process complete message) Happy new year to you too!

gorilla/websocket源码解析

读取音讯

gorilla/websocket(c *Conn) ReadMessage() (messageType int, p []byte, err error)
// ReadMessage is a helper method for getting a reader using NextReader and
// reading from that reader to a buffer.
func (c *Conn) ReadMessage() (messageType int, p []byte, err error) {
    var r io.Reader
    messageType, r, err = c.NextReader()
    if err != nil {
        return messageType, nil, err
    }
    p, err = ioutil.ReadAll(r)
    return messageType, p, err
}

该办法次要是获取一个Reader,而后将Reader中的数据全副读出来

func (c *Conn) NextReader() (messageType int, r io.Reader, err error) {
   // Close previous reader, only relevant for decompression.
   if c.reader != nil {
      c.reader.Close()
      c.reader = nil
   }

   c.messageReader = nil
   c.readLength = 0

   for c.readErr == nil {
      frameType, err := c.advanceFrame()
      if err != nil {
         c.readErr = hideTempErr(err)
         break
      }

      if frameType == TextMessage || frameType == BinaryMessage {
         c.messageReader = &messageReader{c}
         c.reader = c.messageReader
         if c.readDecompress {
            c.reader = c.newDecompressionReader(c.reader)
         }
         return frameType, c.reader, nil
      }
   }
c.advanceFrame()
ioutil.ReadAll(r)
func (r *messageReader) Read(b []byte) (int, error) {
   c := r.c
   if c.messageReader != r {
      return 0, io.EOF
   }

   for c.readErr == nil {

      if c.readRemaining > 0 {
         if int64(len(b)) > c.readRemaining {
            b = b[:c.readRemaining]
         }
         n, err := c.br.Read(b)
         c.readErr = hideTempErr(err)
         if c.isServer {
            c.readMaskPos = maskBytes(c.readMaskKey, c.readMaskPos, b[:n])
         }
         rem := c.readRemaining
         rem -= int64(n)
         c.setReadRemaining(rem)
         if c.readRemaining > 0 && c.readErr == io.EOF {
            c.readErr = errUnexpectedEOF
         }
         return n, c.readErr
      }

      if c.readFinal {
         c.messageReader = nil
         return 0, io.EOF
      }

      frameType, err := c.advanceFrame()
      switch {
      case err != nil:
         c.readErr = hideTempErr(err)
      case frameType == TextMessage || frameType == BinaryMessage:
         c.readErr = errors.New("websocket: internal error, unexpected text or binary in Reader")
      }
   }

   err := c.readErr
   if err == io.EOF && c.messageReader == r {
      err = errUnexpectedEOF
   }
   return 0, err
}
ioutil.ReadAll(r)messageReaderio.EOFfunc (c *Conn) SetReadDeadline(t time.Time) error
 if c.readFinal {
     c.messageReader = nil
     return 0, io.EOF
}

写音讯

若有数据比拟大须要拆成多个帧，原理和读取音讯相似，不在赘述。

w, err := c.conn.NextWriter(websocket.TextMessage)
if err != nil {
   return
}
w.Write(message)
c.conn.Close()
放弃连贯-心跳机制

WebSocket 为了确保客户端、服务端之间的 TCP 通道连贯没有断开，应用心跳机制来判断连贯状态。如果超时工夫内没有收到应答则认为连贯断开，敞开连贯，开释资源。流程如下

  • 发送方 -> 接管方：ping
  • 接管方 -> 发送方：pong
opcode0x90xA

gorilla/websocket代码剖析

func (c *Client) writePump() {
    ticker := time.NewTicker(pingPeriod)
    defer func() {
        ticker.Stop()
        c.conn.Close()
    }()
    for {
        select {
        case message, ok := <-c.send:
            //播送聊天信息，略..
        case <-ticker.C:
      //定时发送心跳
            c.conn.SetWriteDeadline(time.Now().Add(writeWait))
            if err := c.conn.WriteMessage(websocket.PingMessage, nil); err != nil {
                return
            }
        }
    }
}

如果定时没有收到Pong应答能够被动敞开连贯，开释资源。

func (c *Conn) advanceFrame() (int, error)
case PongMessage:
        if err := c.handlePong(string(payload)); err != nil {
            return noFrame, err
        }
case PingMessage:
        if err := c.handlePing(string(payload)); err != nil {
            return noFrame, err
        }
写在最初

本文用介绍了websocket 协定，并通过gorilla/websocket 封装库的chat 示例展现了实战websocket。

不晓得你留神没，以上那个chat 示例并不能用于生产环境，因为理论客户端有很多，可能会与多台服务器建设连贯，那么须要进行如何革新？

Hub

留下你的思考，咱们一起探讨

参考文档
  1. 廖雪峰网站：WebSocket
  2. WebSocket 协定深刻探索
  3. 应用Go语言创立WebSocket服务
  4. how to build websockets in go
  5. RFC6455