WebSocket 连接问题：在 Expo Go 中工作但在生产中失败

Question

我的 Expo React Native 应用程序遇到了一个问题，其中 WebSocket 连接在 Expo Go（开发模式）下运行时工作正常，但当该应用程序以生产模式安装在智能手机上时无法连接。

详情如下： 该应用程序使用 WebSocket 通过本地 Wi-Fi 网络与 ESP32 设备进行通信，该网络由我运行该应用程序的同一部智能手机进行路由。 在使用Expo Go的开发模式下，WebSocket连接稳定，数据传输没有任何问题。 当应用程序构建并安装在智能手机 (Android) 上时，WebSocket 无法连接。 智能手机充当 Wi-Fi 网络的接入点，ESP32 直接与其连接。 ESP32 是 Websocket 服务器，应用程序通过 ESP32 IP 和端口进行连接。

我已经检查了 wifi 启用是否存在任何潜在问题，但无法查明问题所在。

是否有人遇到过类似问题或对可能导致 WebSocket 连接在生产中失败的原因有任何见解？任何帮助或建议将不胜感激！

应用程序.json

{
  "expo": {
    "name": "appLidar",
    "slug": "appLidar",
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "userInterfaceStyle": "light",
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "ios": {
      "supportsTablet": true
    },
    "android": {
      "permissions": ["INTERNET", "ACCESS_NETWORK_STATE"],
      "adaptiveIcon": {
        "foregroundImage": "./assets/adaptive-icon.png",
        "backgroundColor": "#ffffff"
      },
      "package": "com.WebSilos.appLidar"
    },
    "web": {
      "favicon": "./assets/favicon.png"
    },
    "extra": {
      "eas": {
        "projectId": "5f51a79e-ae14-4aeb-9de3-300395e7bd48"
      }
    }
  }
}

app.js

import { StatusBar } from "expo-status-bar";
import { Pressable, StyleSheet, Text, View } from "react-native";
import { useEffect, useState } from "react";

let lastMsg = "Mensagem Inicial";

function connectWebSocket() {
  const ws = new WebSocket(`ws://192.168.43.12:81`);
  lastMsg = "Iniciando WebSocket";
  console.log(lastMsg);

  ws.onopen = (event) => {
    lastMsg = "Sensor conectado!" + event.data;
    console.log(lastMsg);

    // connectLidar = true;
    // extConnected !== undefined ? extConnected(connectLidar) : "";
  };

  ws.onmessage = async function (event) {
    lastMsg = "Mensagem recebida: " + event.data;
    console.log(lastMsg);
    // const lidarData = event.data.split(",");
    // if (lidarData[0] === "B0") {
    //   log.push("Botao alterado: " + lidarData[1]);
    //   if (lidarData[1] === "true") {
    //     extStart();
    //   }
    // } else {
    //   const lidarFiltered = await bufferReceive(lidarData);
    // }
  };

  ws.onclose = function (event) {
    lastMsg = "Conexão fechada, código:" + event.code;
    console.log(lastMsg);
    // connectLidar = false;
    // extConnected !== undefined ? extConnected(connectLidar) : "";
    // // Tentar reconectar após 30 segundos
    // setTimeout(connectWebSocket, 30000);
  };
}

// Iniciar a conexão WebSocket
connectWebSocket();

export default function App() {
  const [mensagem, setMensagem] = useState("Local para mensagens recebidas");

  const handlePress = () => {
    setMensagem(lastMsg);
  };

  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
      <Pressable onPress={handlePress}>
        <Text>{mensagem}</Text>
      </Pressable>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});

package.json

{
  "name": "applidar",
  "version": "1.0.0",
  "main": "expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "expo": "~51.0.8",
    "expo-status-bar": "~1.12.1",
    "react": "18.2.0",
    "react-native": "0.74.1",
    "expo-dev-client": "~4.0.15"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0"
  },
  "private": true
}

Answer 1

我也有同样的问题。你找到解决办法了吗？