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

Kevin Wan 發表於 2021-03-31

前言

go-zero 開源之後,非常多的使用者詢問是否可以支援以及什麼時候支援 websocket,終於在 v1.1.6 裡面我們從框架層面讓 websocket 的支援落地了,下面我們就以 chat 作為一個示例來講解如何用 go-zero 來實現一個 websocket 服務。

整體設計

我們以 zero-example 中的 chat 聊天室為例來一步步一講解 websocket 的實現,分為如下幾個部分:

  1. 多客戶端接入
  2. 訊息廣播
  3. 客戶端的及時上線下線
  4. 全雙工通訊【客戶端本身是傳送端,也是接收端】

先放一張圖,大致的資料傳輸:

image.png

中間有個 select loop 就是整個 chatengine。首先要支撐雙方通訊:

  • 得有一個交流資料的管道。客戶端只管從 管道 讀取/輸送資料;
  • 客戶端線上情況。不能說你下線了,還往你那傳輸資料;

資料流

資料流是 engine 的主要功能,先不急著看程式碼,我們先想 client 怎麼接入並被 engine 感知:

  1. 首先是從前端發 websocket 請求;
  2. 建立連線;準備接收/傳送通道;
  3. 註冊到 engine

image.png

// 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 就被加入到 註冊 通道中。

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)
				}
			}
		}
	}
}
  1. 接收註冊訊息 -> 加入全域性登錄檔
  2. 如果 engine.broadcast 接收到,會將 msg 傳遞給 登錄檔client.sendChan

這樣從 HTML -> client -> hub -> other client 的整個資料流就清晰了。

廣播資料

上面說到 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
	}
}
  1. conn 中不斷讀取 msg【頁面點選後傳遞】
  2. msg 傳入 engine.broadcast,從而廣播到其他的 client
  3. 當出現傳送異常或者是超時,異常退出時,會觸發下線 client

同時要知道,此時傳送訊息的 client 不止有一個,可能會有很多個。那傳送到其他client,client 從自己的 send channel 中讀取訊息即可:

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,斷開則直接返回。

完整示例程式碼

https://github.com/zeromicro/zero-examples/tree/main/chat

總結

本篇文章從使用上介紹如何結合 go-zero 開始你的 websocket 專案,開發者可以按照自己的需求改造。

關於 go-zero 更多的設計和實現文章,可以持續關注我們。

https://github.com/tal-tech/go-zero

歡迎使用 go-zero 並 star 支援我們!