前言

最近打算为我的网站添加一个服务器资源监视功能，需要服务端主动向前端推动资源占用数据。这时Http则不能达到要求。所以自然想到采用websocket。以前使用SpringBoot时使用websocket很简单，只需要将ServerEndpointExporter注入到bean容器并配合相应注解即可创建一个websocket服务。这里要感谢各位前辈的封装让我们能尽快实现相应的功能，但本次出于学习目并不是公司项目（效率&稳定性至上）同时使用的开发语言为Golang，其web开发生态也不会像Java那样丰富，最后选择了开源实现gorilla/websocket项目地址

正文

注意：本文所有代码示例均在本人个人网站副本上截取，如果有幸观看本文的不是我自己需要注意实例代码可能无法正常运行因其缺少其他组件特此说明以防耽误大家时间。

添加依赖

本文使用go mod管理依赖

执行go get github.com/gorilla/websocket添加依赖

使用

我们知道websocket由http升级而来，首先会发送附带Upgrade请求头的Http请求，所以我们需要在处理Http请求时拦截请求并判断其是否为websocket升级请求，如果是则调用gorilla/websocket库相应函数处理升级请求。

首相要创建Upgrader实例，该实例用于升级请求

var upgrader = websocket.Upgrader{
    ReadBufferSize:  1024,
    WriteBufferSize: 1024,
    CheckOrigin:     checkOrigin,
}
func checkOrigin(r *http.Request) bool {
    return true
}

其中CheckOringin是一个函数，该函数用于拦截或放行跨域请求。函数返回值为bool类型，即true放行，false拦截。如果请求不是跨域请求可以不赋值，我这里是跨域请求并且为了方便直接返回true

//Http入口
func (e *Engine) ServeHTTP(w http.ResponseWriter, r *http.Request) {
    //判断请求是否为websocket升级请求。
    if websocket.IsWebSocketUpgrade(r) {
        conn, err := upgrader.Upgrade(w, r, w.Header())
    } else {
        //处理普通请求
        c := newContext(w, r)
        e.router.handle(c)
    }
}

此时已经成功升级为websocket连接并获得一个conn实例，之后的发送接收操作皆有conn完成其类型为websocket.Conn。

首先向客户端发送消息使用WriteMessage(messageType int, data []byte),参数1为消息类型，参数2消息内容
示例：

func (e *Engine) ServeHTTP(w http.ResponseWriter, r *http.Request) {
    //判断请求是否为websocket升级请求。
    if websocket.IsWebSocketUpgrade(r) {
        conn, err := upgrader.Upgrade(w, r, w.Header())
        conn.WriteMessage(websocket.TextMessage, []byte("wxm.alming"))
    } else {
        //处理普通请求
        c := newContext(w, r)
        e.router.handle(c)
    }
}

接受客户端消息使用ReadMessage()该操作会阻塞线程所以建议运行在其他协程上。该函数有三个返回值分别是，接收消息类型、接收消息内容、发生的错误当然正常执行时错误为 nil。一旦连接关闭返回值类型为-1可用来终止读操作。
示例：

func (e *Engine) ServeHTTP(w http.ResponseWriter, r *http.Request) {
    //判断请求是否为websocket升级请求。
    if websocket.IsWebSocketUpgrade(r) {
        conn, err := upgrader.Upgrade(w, r, w.Header())
        conn.WriteMessage(websocket.TextMessage, []byte("wxm.alming"))
        go func() {
            for {
                t, c, _ := conn.ReadMessage()
                fmt.Println(t, string(c))
                if t == -1 {
                    return
                }
            }
        }()
    } else {
        //处理普通请求
        c := newContext(w, r)
        e.router.handle(c)
    }
}

同时可以为连接设置关闭连接监听，函数为SetCloseHandler(h func(code int, text string) error)函数接收一个函数为参数，参数为nil时有一个默认实现，其源码为：

func (c *Conn) SetCloseHandler(h func(code int, text string) error) {
    if h == nil {
        h = func(code int, text string) error {
            message := FormatCloseMessage(code, "")
            c.WriteControl(CloseMessage, message, time.Now().Add(writeWait))
            return nil
        }
    }
    c.handleClose = h
}

可以看到作为参数的函数的参数为int和string类型正好和前端的close(long string)对应即前端调用close(long string)关闭连接后两个参数会被发送给后端并最终被func(code int, text string) error所使用。
示例：

func (e *Engine) ServeHTTP(w http.ResponseWriter, r *http.Request) {
    //判断请求是否为websocket升级请求。
    if websocket.IsWebSocketUpgrade(r) {
        conn, err := upgrader.Upgrade(w, r, w.Header())
        conn.WriteMessage(websocket.TextMessage, []byte("wxm.alming"))
        conn.SetCloseHandler(func(code int, text string) error {
            fmt.Println(code, text)
            return nil
        })
        go func() {
            for {
                t, c, _ := conn.ReadMessage()
                fmt.Println(t, string(c))
                if t == -1 {
                    return
                }
            }
        }()
    } else {
        //处理普通请求
        c := newContext(w, r)
        e.router.handle(c)
    }
}

则断开连接时将打印code和text

注意：要想使断连处理生效必须要有ReadMessage()操作否则不会触发断连处理操作。
以上是常用基础操作点击官方API手册学习更多。

附录：前端测试代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .body{text-align: center;}
            #open{width: 120px;height: 35px;}
            #close{width: 120px;height: 35px;}
            #text{display: inline-block;margin: auto;margin-top: 10px;margin-bottom: 10px;width: 240px;}
        </style>
    </head>
    <body class="body">
        <button id="open">打开连接</button>
        <button id="close">关闭连接</button>
        <br/>
        <input type="text" name="text" id="text" value="" />
        <br/>
        <button id="send">发送</button>
        <div id="msg">
            
        </div>
    </body>
    <script>
        var openbtn = document.getElementById("open")
        var closebtn = document.getElementById("close")
        var text = document.getElementById("text")
        var send = document.getElementById("send")
        var msg = document.getElementById("msg")
        var websocket
        openbtn.onclick = function(){
            websocket = new WebSocket("ws://your ip and port/")
            websocket.onopen=function(){
                console.log("connected");
            }
            websocket.onmessage = function(e){
                console.log(e);
                msg.innerHTML = '接收：'+e.data
            }
            websocket.onclose=function(e){
                console.log("closed",e);
            }
        }
        closebtn.onclick=function(){
            websocket.close(1000,"close")
        }
        send.onclick=function(){
            var msg = text.value
            websocket.send(msg)
        }
    </script>
</html>

最后：大幻梦森罗万象狂气断罪眼\ (••) /

gorilla/websocket使用教程

gorilla/websocket使用教程

前言

正文

添加依赖

使用

附录：前端测试代码