如何使用SocketIO及Vite代理连接Flask WebSocket服务器？

核心问题 #

你的Socket.IO客户端连接路径与Vite代理配置不匹配，导致请求没有正确转发到Flask-SocketIO服务器，因此无法触发预期的连接提示。

步骤1：修正客户端Socket.IO连接代码 #

当前客户端的命名空间和路径配置存在冲突，调整为以下代码：

// '/game' 是你使用的命名空间
const $socket = io('/game', {
    path: '/ws/websocket'
});
$socket.connect();

• 命名空间直接写/game，无需附加/ws前缀（代理会单独处理这个前缀）
• path设置为/ws/websocket，Vite代理会自动去掉/ws前缀，最终转发到后端配置的/websocket路径

步骤2：确认代理配置有效性 #

你的Vite代理/ws段的配置基本正确，重点确认：

• ws: true已开启，确保WebSocket类型的请求能被正常代理
• rewrite规则path => path.replace(/^\/ws/, '')能正确移除前缀，让后端收到/websocket的原始路径

步骤3：后端命名空间监听校验 #

确保后端代码中正确监听了/game命名空间的连接事件：

@socket.on('connect', namespace='/game')
def handle_game_connect():
    print("Connected to game namespace")

额外必查项 #

• 后端需安装WebSocket支持依赖：Flask-SocketIO需要eventlet或gevent-websocket才能启用WebSocket传输，执行安装命令：

  pip install eventlet
  # 或使用gevent
  pip install gevent gevent-websocket
  

• 启动后端时使用支持WebSocket的服务器，例如用eventlet启动：

  if __name__ == '__main__':
      socket.run(app, host='127.0.0.1', port=5000, debug=True, async_mode='eventlet')
  

测试验证 #

修改完成后重启Vite开发服务器和Flask后端，打开浏览器控制台查看Socket.IO请求日志，此时应能看到成功的连接请求，后端也会打印出预设的连接提示。

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