用 Go + WebSocket 快速實現一個 chat 服務

時間 2021-04-01

標籤前端 git github web websocket app 框架 socket 微服務 oop 欄目 Git 简体版

原文原文鏈接

前言

在 go-zero 開源以後，很是多的用戶詢問是否能夠支持以及何時支持 websocket，終於在 v1.1.6 裏面咱們從框架層面讓 websocket 的支持落地了，下面咱們就以 chat 做爲一個示例來說解如何用 go-zero 來實現一個 websocket 服務。前端

總體設計

咱們以 zero-example 中的 chat 聊天室爲例來一步步一講解 websocket 的實現，分爲以下幾個部分：git

多客戶端接入
消息廣播
客戶端的及時上線下線
全雙工通訊【客戶端自己是發送端，也是接收端】

先放一張圖，大體的數據傳輸：github

中間有個 select loop 就是整個 chat 的 engine。首先要支撐雙方通訊：web

得有一個交流數據的管道。客戶端只管從管道讀取/輸送數據；
客戶端在線狀況。不能說你下線了，還往你那傳輸數據；

數據流

數據流是 engine 的主要功能，先不急着看代碼，咱們先想 client 怎麼接入並被 engine 感知：websocket

首先是從前端發 websocket 請求；
創建鏈接；準備接收/發送通道；
註冊到 engine；

// HTML 操做 {js}
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);
  };
  ...
}

// 路由
engine.AddRoute(rest.Route{
  Method: http.MethodGet,
  Path:   "/ws",
  Handler: func(w http.ResponseWriter, r *http.Request) {
    internal.ServeWs(hub, w, r)
  },
})

// 接入邏輯
func ServeWs(hub *Hub, w http.ResponseWriter, r *http.Request) {
  // 將http請求升級爲websocket
    conn, err := upgrader.Upgrade(w, r, nil)
    ...
  // 構建client：hub{engine}, con{websocker conn}, send{channel buff}
    client := &Client{
        hub:  hub,
        conn: conn,
        send: make(chan []byte, bufSize),
    }
    client.hub.register <- client
  // 開始客戶端雙工的通訊，接收和寫入數據
  go client.writePump()
    go client.readPump()
}

這樣，新接入的 client 就被加入到註冊通道中。app

hub engine

發出了註冊的動做，engine 會怎麼處理呢？框架

type Hub struct {
    clients map[*Client]bool        // 上線clients
    broadcast chan []byte                // 客戶端發送的消息 ->廣播給其餘的客戶端
    register chan *Client              // 註冊channel，接收註冊msg
    unregister chan *Client            // 下線channel
}

func (h *Hub) Run() {
    for {
        select {
    // 註冊channel：存放到註冊表中，數據流也就在這些client中發生
        case client := <-h.register:
            h.clients[client] = true
    // 下線channel：從註冊表裏面刪除
        case client := <-h.unregister:
            if _, ok := h.clients[client]; ok {
                delete(h.clients, client)
                close(client.send)
            }
    // 廣播消息：發送給註冊表中的client中，send接收到並顯示到client上
        case message := <-h.broadcast:
            for client := range h.clients {
                select {
                case client.send <- message:
                default:
                    close(client.send)
                    delete(h.clients, client)
                }
            }
        }
    }
}

接收註冊消息 -> 加入全局註冊表
若是 engine.broadcast 接收到，會將 msg 傳遞給 註冊表 的 client.sendChan

這樣從 HTML -> client -> hub -> other client 的整個數據流就清晰了。socket

廣播數據

上面說到 engine.broadcast 接收到數據，那從頁面開始，數據是怎麼發送到這？微服務

func (c *Client) readPump() {
    ...
    for {
    // 1
        _, message, err := c.conn.ReadMessage()
        if err != nil {
            if websocket.IsUnexpectedCloseError(err, websocket.CloseGoingAway, websocket.CloseAbnormalClosure) {
                log.Printf("error: %v", err)
            }
            break
        }
        message = bytes.TrimSpace(bytes.Replace(message, newline, space, -1))
    // 2.
        c.hub.broadcast <- message
    }
}

從 conn 中不斷讀取 msg【頁面點擊後傳遞】
將 msg 傳入 engine.broadcast，從而廣播到其餘的 client
當出現發送異常或者是超時，異常退出時，會觸發下線 client

同時要知道，此時發送消息的 client 不止有一個，可能會有不少個。那發送到其餘client，client 從本身的 send channel 中讀取消息便可：oop

func (c *Client) writePump() {
  // 寫超時控制
    ticker := time.NewTicker(pingPeriod)
  ...
    for {
        select {
        case message, ok := <-c.send:
      // 當接收消息寫入時，延長寫超時時間。
            c.conn.SetWriteDeadline(time.Now().Add(writeWait))
            ...
            w, err := c.conn.NextWriter(websocket.TextMessage)
            ...
            w.Write(message)

            // 依次讀取 send 中消息，並write
            n := len(c.send)
            for i := 0; i < n; i++ {
                w.Write(newline)
                w.Write(<-c.send)
            }
      ...
        case <-ticker.C:
            c.conn.SetWriteDeadline(time.Now().Add(writeWait))
            ...
        }
    }
}

上面也說了，send 有來自各自客戶端中發送的msg：因此當檢測到 send 有數據，就不斷接收消息並寫入當前 client；同時當寫超時，會檢測websocket長鏈接是否還存活，存活則繼續讀 send chan，斷開則直接返回。