用 Go + WebSocket 快速实现一个 chat 服务

前言

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 支持我们!

go-zero 系列文章见『微服务实践』公众号

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 219,490评论 6 508
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,581评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 165,830评论 0 356
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,957评论 1 295
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,974评论 6 393
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,754评论 1 307
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,464评论 3 420
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,357评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,847评论 1 317
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,995评论 3 338
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,137评论 1 351
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,819评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,482评论 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,023评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,149评论 1 272
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,409评论 3 373
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,086评论 2 355

推荐阅读更多精彩内容