关于golang:彻底弄懂WebSocket

5次阅读

共计 10637 个字符，预计需要花费 27 分钟才能阅读完成。

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

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

须要特地留神的有

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

应用 Go 语言，通常有两种形式，一种是应用 Go 语言内置的 net/http 库编写WebSocket 服务器，另一种是应用 gorilla 封装的 Go 语言的 WebSocket 语言官网库，Github 地址：gorilla/websocket.(注，当然还有其余的 Websocket 封装库，目前 gorilla 这个比拟罕用)，gorilla 库提供了一个聊天室的 demo, 本文将以这个例子上手入门.

gorilla/websocket 的聊天室的 README.md

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

2. 关上浏览器页面，输出`http://localhost:8080/`

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

在右边输出 hello,myname is james, 两个窗口同时显示了这句话，F12 关上调试窗口，在network 那个 tab 下的 ws 中右边的 data 有刚输出的上行和上行音讯，而左边只有上行音讯，阐明音讯的确的确通过右边的连贯发送到服务端，并进行了播送给所有的客户端。

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

申请音讯：

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

其中 GET 申请是 ws:// 结尾，区别于 HTTP /path
Upgrade: websocket和 Connection: Upgrade 标识降级 HTTP 为 WebSocket
Sec-WebSocket-Key: 2e1HXejEZhjvYEEVOEE79g==其中 2e1HXejEZhjvYEEVOEE79g== 为 6 个随机字节的 base64 用于标识一个连贯，并非用于加密
Sec-WebSocket-Version: 13指定了 WebSocket 的协定版本

应答音讯：

HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: WPaVPwi6nk4cFFxS8NJ3BIwAtNE=

101示意本次连贯的 HTTP 协定行将被更改，更改后的协定就是 Upgrade: websocket 指定的 WebSocket 协定

其中 Sec-WebSocket-Accept: WPaVPwi6nk4cFFxS8NJ3BIwAtNE= 是服务器获取了 Request Header 中的 Sec-WebSocket-Keybase64 解码后，并拼接上258EAFA5-E914-47DA-95CA-C5AB0DC85B11 再用通过 SHA1 计算出摘要，再 base64 编码，并填写到 Sec-WebSocket-Accept 域.

所以 Sec-WebSocket-Key 和Sec-WebSocket-Accept的作用是次要是为了防止客户端不小心降级 websocket，也即用来验证 WebSocket 的 handshake，防止承受 non-WebSocket 的 client（如 HTTP 客户端）. 具体可参见 RFC6455 或 What is Sec-WebSocket-Key for?

查看下面 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)
    }
}

其中 serveHome 次要返回聊天室的 HTML 资源，serveWs次要承受 HTTP client 降级 websocket 申请，并解决聊天信息的播送（至整个房间的全副 ws 连贯）

<!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.html 这里次要是 conn.onclose 解决连贯敞开 conn.onmessage 解决收到音讯，conn.send解决发送音讯，当然还有 conn.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 到 WebSocket, 底层应用 http.Hijacker 来劫持底层的 TCP 连贯，后续就能够应用这个连贯双端通信了.

// 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
}

Hub次要是保护这个房间的所有连贯，当用个 client 建设增加到 clients 这个 map 中，每次连贯断开就会从 clients 这个 map 中移除

go client.readPump()负责将客户端发送的音讯写到 broadcast，而go client.writePump() 负责将 broadcast 中的音讯播送到 clients 记录的这个房间的全副 client , 细节下文在讲完 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 字节。所有的扩大都必须申明扩大数据的长度，或者能够如何计算出扩大数据的长度。此外，扩大如何应用必须在握手阶段就协商好。如果扩大数据存在，那么载荷数据长度必须将扩大数据的长度蕴含在内。

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

不晓得你是否对 FIN 和Opcode中的连续针感到困惑？

第一条音讯

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

第二条音讯

FIN=0，opcode=0x1，示意发送的是文本类型，且音讯还没发送实现，还有后续的数据帧。
FIN=0，opcode=0x0，示意音讯还没发送实现，还有后续的数据帧，以后的数据帧须要接在上一条数据帧之后。
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应用 (c *Conn) ReadMessage() (messageType int, p []byte, err error) 的 helper 办法来疾速读取一条音讯，如果是一条音讯由多个数据帧，则会拼接成残缺的音讯，返回给业务层

// 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
      }
   }

因为 Reader 不是并发平安的，故每次之后一个协程解决 Reader 的读操作，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)会在遇到 io.EOF 时返回，nextReader 中会放回 messageReader 该办法会在 for 循环中始终读取，直至读取到最初一帧，返回 io.EOF, 若网络起因导致最初一帧因为网络起因迟迟没到服务器，该办法将始终阻塞，直至触发func (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

ping、pong 的操作，对应的是 WebSocket 的两个管制帧，opcode别离是0x9、0xA。

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) 办法中收到 Ping/Pong 的管制帧，会主动调用注册在 conn 上的钩子函数

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 示例并不能用于生产环境，因为理论客户端有很多，可能会与多台服务器建设连贯，那么须要进行如何革新？

房间内客户端与房间的映射敞开如何保护？应用 Redis 代替示例中的Hub？
音讯如何保障程序？每个房间一个分布式队列，并授予一个治理线程来解决？

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

廖雪峰网站：WebSocket
WebSocket 协定深刻探索
应用 Go 语言创立 WebSocket 服务
how to build websockets in go
RFC6455

正文完

golang

发表至： golang

2022-01-16

0

关于golang:Kubernetes学习笔记之CSI-External-Provisioner源码解析

关于lrucache:LRU缓存机制实现Go版本

关于golang:如何利用事件溯源思想实现分布式任务编排的容错

关于golang:解决Goland总是报golangorgx无法请求的问题

关于javascript:前端周刊第二期

关于golang:彻底弄懂WebSocket

前言

什么是 WebSocket

疾速入门

1. 启动服务

2. 关上浏览器页面，输出`http://localhost:8080/`

3. 如何建设连贯

4. gorilla/websocket 代码

WebSocket 协定

示例

gorilla/websocket 源码解析

读取音讯

写音讯

放弃连贯 - 心跳机制

gorilla/websocket 代码剖析

写在最初

参考文档

站内搜索

关于golang:彻底弄懂WebSocket

前言

什么是 WebSocket

疾速入门

1. 启动服务

2. 关上浏览器页面，输出http://localhost:8080/

3. 如何建设连贯

4. gorilla/websocket 代码

WebSocket 协定

示例

gorilla/websocket 源码解析

读取音讯

写音讯

放弃连贯 - 心跳机制

gorilla/websocket 代码剖析

写在最初

参考文档

站内搜索

2. 关上浏览器页面，输出`http://localhost:8080/`