Socket.IO React 客户端连接立即断开的解决方案-js教程-PHP中文网

Socket.IO React 客户端连接立即断开的解决方案

本文详解 fastapi + socket.io 服务端与 react 客户端通信时连接秒断问题，核心在于客户端传递认证参数的方式错误——应使用查询参数（query）而非请求头（headers），并同步调整服务端解析逻辑。

本文详解 fastapi + socket.io 服务端与 react 客户端通信时连接秒断问题，核心在于客户端传递认证参数的方式错误——应使用查询参数（query）而非请求头（headers），并同步调整服务端解析逻辑。

在 FastAPI + Socket.IO 架构中，React 客户端连接后立即断开（日志显示 connection open → connect → connection closed），通常并非网络或 CORS 问题，而是 服务端无法正确获取连接上下文参数 导致 connect 事件处理函数提前返回 False 或异常退出。您当前的代码中，客户端通过 extraHeaders 发送 game_id 和 player_id，但 Socket.IO 服务端（尤其是 socketio.AsyncServer）默认不支持从 HTTP headers 中解析自定义字段用于鉴权——environ.get("HTTP_GAME_ID") 实际为 None，触发了 return False，强制拒绝连接。

✅ 正确做法：改用查询参数（Query Parameters）

? 客户端修改（React）

将 extraHeaders 替换为 auth 配置项（推荐）或直接拼接 URL 查询字符串。socket.io-client v4+ 支持标准化的 auth 对象，服务端可自动映射为 environ 中的 QUERY_STRING 解析：

// createSocket.ts
import { io } from "socket.io-client";

const gameId = "1"; // 注意：建议保持字符串类型以避免序列化问题
const playerId = "1";

const createSocket = (uri: string) => {
  const socket = io(uri, {
    path: "/socket.io", // 必须与服务端 mount 路径一致
    transports: ["websocket"],
    autoConnect: true,
    auth: {
      game_id: gameId,
      player_id: playerId,
    },
  });

  socket.on("connect", () => console.log("✅ Socket connected:", socket.id));
  socket.on("connect_error", (err) => console.error("❌ Connection error:", err.message));

  return socket;
};

export const gameSocket = createSocket("http://localhost:8000");

⚠️ 关键点：path: "/socket.io" 必须与 FastAPI 中 app.mount("/socket.io", socketio_app) 的路径完全匹配，否则握手失败。

Orderly Sdk React Hooks
Orderly React SDK 钩子使用参考指南，包括 useOrderEntry、usePositionStream、useOrderbookStream、useCollateral 等。

下载

? 服务端修改（FastAPI）

更新 connect 事件处理器，从查询字符串中提取参数（environ["QUERY_STRING"]），而非依赖 HTTP_* headers：

import urllib.parse
import socketio

sio = socketio.AsyncServer(cors_allowed_origins="*", async_mode="asgi")
socketio_app = socketio.ASGIApp(sio, socketio_path="/socket.io")  # 注意路径一致性

@sio.event
async def connect(sid, environ):
    print("? Attempting connection with sid:", sid)

    # 解析查询参数（如 ?game_id=1&player_id=1）
    query_string = environ.get("QUERY_STRING", "")
    try:
        params = dict(urllib.parse.parse_qsl(query_string))
        player_id = params.get("player_id")
        game_id = params.get("game_id")
    except Exception as e:
        print("❌ Failed to parse query string:", e)
        return False

    # 鉴权检查
    if not player_id or not game_id:
        print("? Rejected: missing player_id or game_id")
        return False

    # 存储会话并加入房间
    await sio.save_session(sid, {"player_id": player_id, "game_id": game_id})
    sio.enter_room(sid, f"g{game_id}")
    sio.enter_room(sid, f"p{player_id}")
    print(f"✅ Connected: sid={sid}, player_id={player_id}, game_id={game_id}")

? 其他关键注意事项

版本兼容性验证：确保客户端 socket.io-client 与服务端 python-socketio 版本匹配（推荐均使用 v4.x 最新版）。运行 pip show python-socketio 和 npm list socket.io-client 核对。
CORS 配置无误：您已启用 cors_allowed_origins="*"，但生产环境请替换为具体域名；同时确认 allow_credentials=True 与前端 withCredentials: true（若需 Cookie）配合。
路径严格一致：客户端 path、服务端 ASGIApp 的 socketio_path、以及 app.mount() 路径三者必须完全相同（如均为 /socket.io）。
避免重复监听：您的 useSocket hook 中 useEffect 缺少依赖数组，且未清理 gameSocket.on("game_status")，易导致内存泄漏。修正如下：

// useSocket.ts
import { useState, useEffect } from "react";
import { gameSocket } from "./createSocket";

export const useSocket = () => {
  const [connected, setConnected] = useState(gameSocket.connected);

  useEffect(() => {
    const onConnect = () => setConnected(true);
    const onDisconnect = () => setConnected(false);

    gameSocket.on("connect", onConnect);
    gameSocket.on("disconnect", onDisconnect);

    return () => {
      gameSocket.off("connect", onConnect);
      gameSocket.off("disconnect", onDisconnect);
    };
  }, []);

  return { gameSocket, isConnected: connected };
};

通过以上调整，连接将稳定建立，服务端能正确识别用户身份并完成房间分配。记住：Socket.IO 的连接初始化阶段，查询参数是传递初始上下文最可靠、最标准的方式，而自定义 headers 在 ASGI 环境下解析不稳定，不应作为关键鉴权依据。