flask-socketio+React聊天应用WebSocket资源不足连接错误如何解决

一、前端侧问题定位与修复 #

• 优先排查socket实例重复初始化问题
  React组件重渲染时如果未将socket实例设为单例，每次渲染都会新建WebSocket连接，浏览器对单个域名的WebSocket并发连接上限通常为6~20个，配额占满后就会抛出Insufficient Resources错误。参考正确初始化写法：

import { io } from 'socket.io-client';
import { useRef, useEffect } from 'react';

const ChatPage = () => {
  // 用useRef存储单例socket，避免重复创建
  const socketRef = useRef(null);
  useEffect(() => {
    if (!socketRef.current) {
      socketRef.current = io('ws://127.0.0.1:5000', {
        transports: ['websocket'],
        // 限制重连次数，避免无限重连占满连接配额
        reconnectionAttempts: 5,
        reconnectionDelay: 1000
      });
    }
    // 组件卸载时主动断开连接释放资源
    return () => {
      socketRef.current?.disconnect();
      socketRef.current = null;
    }
  }, []);
  // 后续业务逻辑统一使用socketRef.current操作
}

• 检查重连逻辑合理性
  如果未配置重连上限，断连后会高频发起新连接，短时间内就能占满浏览器连接配额，初始化时务必配置reconnectionAttempts参数限制重连次数，超出上限后可给用户弹出网络异常提示。

二、后端侧问题定位与修复 #

• 替换默认开发服务器
  Flask自带的开发服务器并发能力极弱，2个以上并发连接就容易出现资源不足报错，生产环境必须使用eventlet或gevent异步服务器启动服务，参考配置：

# 先安装异步依赖
pip install eventlet

import eventlet
# 必须先执行monkey_patch再引入业务代码
eventlet.monkey_patch()
from flask import Flask
from flask_socketio import SocketIO

app = Flask(__name__)
# 调整心跳参数避免频繁误判断连
socketio = SocketIO(
    app,
    cors_allowed_origins="*",
    ping_timeout=60,
    ping_interval=25,
    # 调试阶段可开启日志定位连接问题
    logger=False,
    engineio_logger=False
)

if __name__ == '__main__':
    # 生产环境关闭debug模式
    socketio.run(app, host='0.0.0.0', port=5000, debug=False)

• 检查连接释放逻辑
  确认业务逻辑中用户退出、断开会话时，是否主动调用disconnect()释放服务端连接，避免无效连接长期占用服务端资源。

三、快速验证方法 #

• 打开浏览器chrome://net-internals/#sockets页面，查看对应域名的WebSocket连接占用情况，复现问题时如果连接数持续上涨到上限，即可判定是前端重复建连或后端未释放连接导致的问题。
• 调试阶段开启socket.io全量日志：前端初始化时加debug: true参数，后端初始化时开启logger=True, engineio_logger=True，可完整查看连接、断连、重连全链路，快速定位异常触发节点。

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