React应用中Socket.io频繁创建连接问题求助

核心问题分析 #

你遇到的重复连接问题，主要来自客户端连接配置不规范、React组件生命周期细节以及版本/传输协议兼容性这几个方面，纯HTML环境正常是因为没有React的组件渲染机制干扰，且连接逻辑更直接。

解决方案步骤 #

1. 修正客户端连接参数写法 #

原URL拼接方式可能导致命名空间/路径解析异常，改用Socket.io官方推荐的配置项分离参数，同时确保彻底关闭连接：

import { useEffect } from "react";
import { io } from "socket.io-client";

function App() {
  useEffect(() => {
    // 分离路径、命名空间与查询参数，避免URL解析错误
    const socket = io("https://serverEndpoint", {
      path: "/cart_socket",
      query: { user_id: 52 },
      transports: ["websocket"], // 注意拼写是websocket（单数），不是websockets
      reconnection: false // 临时关闭自动重连，排查重复连接根源
    });

    socket.on("get_cart_items", (data) => {
      console.log(data);
    });

    // 新增错误监听，快速定位连接问题
    socket.on("connect_error", (err) => {
      console.error("Socket连接异常:", err);
    });

    return function cleanup() {
      socket.off("get_cart_items"); // 移除事件监听，避免内存泄漏
      socket.close(); // 用close()彻底销毁连接，替代disconnect()（仅断开不销毁实例）
    };
  }, []);

  return <>socket</>;
}

export default App;

2. 修复服务端代码漏洞 #

服务端else分支中room_name未定义，会触发异常导致连接断开，进而引发客户端重连：

@socketio.on('get_cart_items', namespace="/cart_socket")
def handle_get_cart(message):
    try:
        user_id = message.get("user_id")
        if user_id:
            room_name = f'cart_update_room_{user_id}'
            cart_json = get_cart_items(user_id)
            emit("get_cart_items", cart_json, to=room_name)
        else:
            // 移除未定义的room_name，直接向当前连接返回错误
            emit("get_cart_items", json_response_view_products({}, "no user_id given", 400, False))
    except Exception as e:
        logging.info(f"Disconnected due to:\n {e}")
        disconnect()

3. 确保服务端WebSocket传输支持 #

Flask-SocketIO需明确启用WebSocket模式，否则客户端会降级为长轮询，导致频繁连接：

from flask_socketio import SocketIO
# 使用eventlet作为异步模式，确保WebSocket生效
socketio = SocketIO(app, async_mode='eventlet', cors_allowed_origins="*")

4. 版本兼容性调整 #

客户端Socket.io 4.7与服务端Flask-SocketIO 5.x存在细微协议冲突，可尝试：

• 将客户端Socket.io版本降级至4.6.1
• 或升级服务端Flask-SocketIO至最新稳定版

额外注意点 #

React开发环境下的StrictMode会触发useEffect两次，虽然cleanup会执行，但如果连接销毁不彻底，可能导致短暂的重复连接，生产环境打包后该问题会自动消失。

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