如何优雅地重新连接websocket？答案

【问题标题】：How to gracefully re-connect websocket?如何优雅地重新连接websocket？
【发布时间】：2019-11-13 01:07:30
【问题描述】：

我正在使用 HTTP 和 Websockets 构建一个单页应用程序。用户提交表单，我将响应流式传输到客户端。下面是一个 sn-p 客户端。

var html = `<!DOCTYPE html>

<meta charset="utf-8">
<head>
</head>
<body>

<script>
var ws = new WebSocket("ws://localhost:8000/ws")
ws.onmessage = function(e) {
  document.getElementById("output").innerHTML += e.data + "<br>"
}

function submitFunction() {
  document.getElementById("output").innerHTML += ""
  return false
}
</script>

<form
enctype="multipart/x-www-form-urlencoded"
action="http://localhost:8000/"
method="post"
>`

这是服务器。如果请求不是 POST，我编写/呈现建立新 websocket 连接的 html (parseAndExecute)。如果请求是 POST（来自表单），那么我开始处理并最终写入 websocket。

func (c *Config) ServeHtml(w http.ResponseWriter, r *http.Request) {
    if r.Method == http.MethodPost {
        //process
        channel <- data
    }

    c.parseAndExecute(w)
}

func (sh *SocketHandler) ServeHTTP(w http.ResponseWriter, r *http.Request) {
    ws, err := upgrader.Upgrade(w, r, nil)
    if err != nil {
        w.Write([]byte(fmt.Sprintf("", err)))
        return
    }
    //defer ws.Close()

    // discard received messages
    go func(c *websocket.Conn) {
        for {
            if _, _, err := c.NextReader(); err != nil {
                c.Close()
                break
            }
        }
    }(ws)

    data <- channel

只有当我不刷新页面时，一切都会按我的预期工作。如果我不刷新，我可以继续提交表单，然后逐行查看不同的输出。澄清一下，它实际上只有在页面已经启动时才有效，因此永远不会调用 parseAndExecute。该函数解析并执行 html/template 创建一个新的 websocket 客户端。

任何刷新页面或最初浏览 localhost:8000 都会导致服务器上出现websocket: close sent。

我不确定如何解决这个问题。服务器是否需要优雅地处理断开连接并允许重新连接？还是客户需要做点什么？似乎服务器应该升级/ws 的任何连接，所以创建多少新的 websocket 客户端并不重要，但显然我的理解是错误的。

我没有关闭服务器上的 websocket 连接，因为只要程序正在运行，它就应该一直在运行。当用户停止程序时，我认为它会自动关闭。

完整的 SocketHandler 代码：

func (sh *SocketHandler) ServeHTTP(w http.ResponseWriter, r *http.Request) {
    ws, err := upgrader.Upgrade(w, r, nil)
    if err != nil {
        w.Write([]byte(fmt.Sprintf("", err)))
        return
    }

    // discard received messages
    go func(c *websocket.Conn) {
        for {
            if _, _, err := c.NextReader(); err != nil {
                c.Close()
                break
            }
        }
    }(ws)

    cmd := <-sh.cmdCh

    log.Printf("Executing")
    stdout, err := cmd.StdoutPipe()
    if err != nil {
        w.Write([]byte(err.Error()))
        return
    }
    defer stdout.Close()

    stderr, err := cmd.StderrPipe()
    if err != nil {
        w.Write([]byte(err.Error()))
        return
    }
    defer stderr.Close()

    if err := cmd.Start(); err != nil {
        w.Write([]byte(err.Error()))
        return
    }

    s := bufio.NewScanner(io.MultiReader(stdout, stderr))
    for s.Scan() {
        err := ws.WriteMessage(1, s.Bytes())
        if err != nil {
            log.Printf("Error writing to client: %v", err)
            ws.Close()
        }

    }

    if err := cmd.Wait(); err != nil {
        w.Write([]byte(err.Error()))
        return
    }

    log.Println("Done")
}

【问题讨论】：

标签： javascript html go

【解决方案1】：

Websocket 服务器应用程序必须通过关闭连接并释放与连接相关的资源来处理连接上的错误。

刷新包含页面时，浏览器会关闭 websocket 连接。浏览器关闭连接后，服务器最终会出现读写错误。

连接关闭是服务器可能遇到的几个可能错误之一。服务器应用程序应该以相同的方式处理连接上的所有错误：关闭连接并释放与连接关联的资源。

典型的应用程序设计是让客户端在页面加载时连接并在出错后重新连接（使用退避）。服务器假定客户端会随着时间的推移连接和断开连接。

可以通过添加一个使用退避重新连接的 onerror 处理程序来改进 JS 代码。根据应用程序，您可能还希望显示指示连接状态的 UI。

Go 代码不会在所有场景中关闭连接。运行命令是与连接关联的资源。该应用程序不会在连接错误时终止该程序。以下是一些修复：

升级成功后添加defer ws.Close()。从SocketHandler.ServeHTTP 中删除对ws.Close() 的其他直接调用。这样可以确保在所有场景中都调用ws.Close()。

从读写泵退出时终止命令。将读取泵移至命令启动后。返回时杀死。

go func(c *websocket.Conn, cmd *exec.Command) {
    defer c.Close()
    defer cmd.Process.Kill()
    for {
        if _, _, err := c.NextReader(); err != nil {
            break
        }
    }
}(ws, cmd)

从写泵退出时杀死命令：

s := bufio.NewScanner(io.MultiReader(stdout, stderr))
for s.Scan() {
    err := ws.WriteMessage(1, s.Bytes())
    if err != nil {
        break
    }
}
cmd.Process.Kill()

我没有运行或测试过这段代码。可能有些细节有误，但这概括了关闭连接和释放资源的一般方法。

看看Gorilla command example。该示例展示了如何将标准输入和标准输出泵送到 websocket。该示例还处理更高级的功能，例如使用 PING/PONG 检查连接的健康状况。

【讨论】：

我使用完整的 websocket 处理程序编辑了我的问题。我还没弄明白。 @cerise-limón