使用Gorilla Mux升级HTTP到WS后，网页端如何访问已升级连接？

你的核心错误是：不能在调用http.ServeFile返回HTML后，再尝试升级WebSocket连接。http.ServeFile会向客户端发送完整的HTTP响应（状态码、头部、HTML内容），此时HTTP连接已经完成，无法再升级为WebSocket。WebSocket升级必须是一个独立的、专门的HTTP请求，不能和返回HTML的请求复用。

修正后的Go代码（Gorilla Mux） #

拆分路由，一个负责返回HTML页面，另一个专门处理WebSocket升级：

import (
    "fmt"
    "net/http"
    "github.com/gorilla/mux"
    "github.com/gorilla/websocket"
)

var upgrader = websocket.Upgrader{
    ReadBufferSize:  1024,
    WriteBufferSize: 1024,
    // 允许跨域（如果需要），生产环境建议限制域名
    CheckOrigin: func(r *http.Request) bool {
        return helpers.IsLocalRequest(r)
    },
}

// 仅负责返回登录页面
func serveSecureLoginPage(w http.ResponseWriter, r *http.Request) {
    if helpers.IsLocalRequest(r) {
        http.ServeFile(w, r, "secure-login-thing.html")
    } else {
        http.Error(w, "禁止访问", http.StatusForbidden)
    }
}

// 专门处理WebSocket升级与认证逻辑
func handleAuthWebSocket(w http.ResponseWriter, r *http.Request) {
    if !helpers.IsLocalRequest(r) {
        http.Error(w, "禁止访问", http.StatusForbidden)
        return
    }

    // 升级HTTP连接为WebSocket
    conn, err := upgrader.Upgrade(w, r, nil)
    if err != nil {
        fmt.Println("升级错误:", err)
        return
    }
    defer conn.Close()

    // 处理认证与消息收发
    for {
        msgType, msg, err := conn.ReadMessage()
        if err != nil {
            fmt.Println("读取消息错误:", err)
            break
        }

        // 这里处理客户端发来的JWT认证信息
        fmt.Printf("收到认证信息: %s\n", string(msg))
        
        // 向客户端返回认证结果
        err = conn.WriteMessage(msgType, []byte("认证请求已接收"))
        if err != nil {
            fmt.Println("发送消息错误:", err)
            break
        }
    }
}

func main() {
    r := mux.NewRouter()
    r.HandleFunc("/secure-login", serveSecureLoginPage)
    r.HandleFunc("/ws/auth", handleAuthWebSocket)
    
    fmt.Println("服务器启动在 :8080")
    http.ListenAndServe(":8080", r)
}

客户端HTML/JavaScript代码 #

在secure-login-thing.html中，连接到专门的WebSocket路由即可：

<!DOCTYPE html>
<html>
<body>
    <button id="submit-btn">提交认证</button>
    <script>
        // 根据实际协议（http/ws、https/wss）和地址调整
        const socket = new WebSocket('ws://localhost:8080/ws/auth');

        socket.onopen = function(event) {
            console.log("WebSocket连接已建立");
            
            document.getElementById("submit-btn").addEventListener("click", function() {
                // 发送JWT认证信息到服务器
                const jwtToken = "你的JWT令牌内容";
                socket.send(jwtToken);
            });
        };

        socket.onmessage = function(event) {
            console.log("服务器响应:", event.data);
            // 这里处理服务器返回的认证结果
        };

        socket.onerror = function(error) {
            console.error("WebSocket错误:", error);
        };

        socket.onclose = function(event) {
            console.log("WebSocket连接关闭");
        };
    </script>
</body>
</html>

关键说明 #

• WebSocket升级是独立的HTTP请求：客户端通过new WebSocket()发起的请求，会携带Upgrade: websocket等特殊请求头，服务器在这个请求中完成连接升级，之后双方基于同一个TCP连接收发WebSocket消息。
• 一个HTTP请求只能做一件事：要么返回HTML页面，要么升级为WebSocket，不能同时完成两个操作，这是HTTP协议的基本规则。

内容的提问来源于stack exchange，提问作者Kestrel Kosdlic