Socketio 不适用于使用 React-native Expo 构建的 Android 测试

Question

我正在使用 React-native 和 Expo 开发一个 Android 应用程序，我使用 Expo 构建了我的 AAB 并将其发布在 Google Play 商店上进行 Android 内部测试，除了我的 socketio 之外，一切都工作正常。但是当我将本地/开发react-native设置为从生产中的后端/api获取数据（本地前端向生产后端发出请求）时，socketio工作得很好，但是当我在Google上发布前端进行内部测试时，socketio不会当我发出请求而不是在屏幕上显示数据时，它无法正常工作，它显示空白屏幕。

我的应用程序.json

  "expo": {
    "name": "isioma3",
    "slug": "isioma3",
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "userInterfaceStyle": "light",
    "newArchEnabled": true,
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/adaptive-icon.png",
        "backgroundColor": "#ffffff"
      },
      "package": "com.kingsola",
      "permissions": ["INTERNET", "ACCESS_NETWORK_STATE"],
      "softwareKeyboardLayoutMode": "pan",
      "allowBackup": true,
      "config": {
        "useCleartextTraffic": true
      }
    },
    "ios": {
      "supportsTablet": true
    },
    "plugins": [
      [
        "expo-splash-screen",
        {
          "backgroundColor": "#2D3A44",
          "image": "./assets/icon.png",
          "imageWidth": 200
        }
      ]
    ],
    "extra": {
      "development": {
        "apiBaseUrl": "https://myapp.fly.dev",
        "REACT_APP_GOOGLE_MAPS_API_KEY": "",
        "APP_ENV": "development",
        "easBuildProfile": "development"
      },
      "preview": {
        "apiBaseUrl": "https://myapp.fly.dev",
        "REACT_APP_GOOGLE_MAPS_API_KEY": "",
        "APP_ENV": "preview",
        "easBuildProfile": "preview"
      },
      "production": {
        "apiBaseUrl": "https://myapp.fly.dev",
        "REACT_APP_GOOGLE_MAPS_API_KEY": "",
        "APP_ENV": "production",
        "easBuildProfile": "production"
      },
      "eas": {
        "projectId": ""
      }
    },
    "owner": "kings"
  }
}

我的eas.json

  "cli": {
    "version": ">= 13.2.3",
    "appVersionSource": "remote"
  },
  "build": {
    "development": {
      "developmentClient": true,
      "distribution": "internal",
      "android": {
        "buildType": "apk",
        "gradleCommand": ":app:assembleDebug"
      }
    },
    "preview": {
      "distribution": "internal",
      "android": {
        "buildType": "apk",
        "gradleCommand": ":app:assembleRelease"
      }
    },
    "production": {
      "autoIncrement": true,
      "android": {
        "buildType": "app-bundle",
        "gradleCommand": ":app:bundleRelease"
      }
    }
  },
  "submit": {
    "production": {
      "android": {
        "track": "internal",
        "releaseStatus": "completed"
      }
    }
  }
}

我的应用程序中的套接字前端设置

    if (!visible || !booking?.bookingId || !userId) {
      return;
    }

    isMounted.current = true; // Set isMounted to true when the modal is visible

    console.log("UserBookingModal useEffect triggered with:", {
      visible,
      bookingId: booking?.bookingId,
      userId: userId,
    });

    console.log("\n-----INITIALIZING SOCKET IN USERBOOKINGMODAL-----");
    console.log("Booking details:", {
      bookingId: booking.bookingId,
      userId: userId,
      status: booking.status,
    });

    // Clean up existing socket if any
    if (socketRef.current) {
      console.log("Cleaning up existing socket connection");
      socketRef.current.disconnect();
    }

    socketRef.current = io(apiBaseUrl, {
      transports: ["websocket"],
      reconnection: true,
      reconnectionDelay: 1000,
      reconnectionDelayMax: 5000,
      reconnectionAttempts: 5,
      extraHeaders: {
        "x-mobile-app": "true",
      },
    });

    socketRef.current.on("connect", () => {
      console.log(
        "Socket connected successfully with ID:",
        socketRef.current.id
      );

      // Authenticate and join rooms
      socketRef.current.emit("authenticate", {
        userId: userId,
        userType: "customer",
      });

      socketRef.current.emit("joinBookingRoom", booking.bookingId);

      console.log("In the user: Joined rooms for:", {
        userRoom: `user_${userId}`,
        bookingRoom: `booking_${booking.bookingId}`,
      });
    });

    const handleSocketErrors = () => {
      socketRef.current.on("connect_error", (error) => {
        console.error("Socket connection error:", error);
        showNotification("Connection error. Please try again.", "error");
      });

      socketRef.current.on("error", (error) => {
        console.error("Socket error:", error);
        showNotification("An error occurred. Please try again.", "error");
      });

      socketRef.current.on("reconnect", (attempt) => {
        console.log("Socket reconnected on attempt:", attempt);
        if (booking?.bookingId) {
          socketRef.current.emit("joinBookingRoom", booking.bookingId);
        }
      });
    };

每当我进行预订而不是在屏幕上显示数据时，它都会显示白色空白屏幕，它在本地运行得很好，如果本地前端向生产后端发出请求，它也运行良好，只有当谷歌内部测试的 Android 应用程序正在向生产后端发出请求。

我在这里做错了什么吗？

Answer 1

我也面临同样的问题