世博会与socket.io websocket连接失败

Question

我正在尝试从 Expo 应用程序内连接到 socket.io 服务器。我在连接到我的服务器时遇到问题。我有一个可以正常连接到服务器的网络应用程序，因此服务器工作正常。我还查看了一些示例，包括来自 Expo 存储库的示例，但无济于事。

我的客户：

componentDidMount() {

    const socket = socketIOClient('http://192.168.1.210:80', {
      transports: ['websocket']
    });

    socket.on('connect', () => {
      console.log('Connected.');
    });

    socket.on('connect_error', (err) => {
      console.log(err);
    });
}

服务器：

this.httpServer = HttpServer.createServer((req, res) => {
  res.writeHead(200, {'Content-Type': 'text/html'});
  res.end('');
});

this.httpServer.listen(80);

this.io = new IOServer({
  pingInterval: 10000,
  pingTimeout: 5000,
});

this.io.listen(this.httpServer);
this.io.set('transports', ['websocket']);

this.onConnection();

this.io.on('connection', (socket) => {/* events */}

on connect 事件永远不会触发，只会触发 connect_error 事件，该事件只是简单地表示“超时”。原生 websocket 在测试时工作正常 https://www.websocket.org/echo.html.

Answer 1

这是 socket.io 的一个错误，与加载错误的

WebSocket

实现有关。

它正在寻找

self.WebSocket

，但是

self

在 React Native 中不存在，所以它又回到了

require('ws')

，即 Node.js 实现。实际上，它应该使用 React Native 中的原生

WebSocket

实现。

我做了一个 PR 来解决这个问题：https://github.com/socketio/engine.io-client/pull/607

打开远程调试使其工作的原因是因为代码在这种模式下在浏览器（Chrome）中运行，所以它能够使用浏览器的

WebSocket

实现。

Answer 2

我可以做什么来连接到 websocket ， 它在博览会应用程序中工作正常，但当我构建和安装应用程序时它没有连接到套接字

这是应用程序的屏幕

检查我的代码

export default function Index() {

  const [isConnected, setConnected] = useState(false);
  const [isSocketConnected, setSocketConnected] = useState(false);
  const [type, setType] = useState<string | null>(null); 

  const storeData = async (value: any) => {
    try {
      await AsyncStorage.setItem('my-key', value);
    } catch (e) {
      // saving error
      console.error(e);
    }
  };

  useEffect(() => {
    storeData('hello world');

    const skt = io(process.env.EXPO_PUBLIC_API_URL);

    skt.on('connect', () => {
      setSocketConnected(true);
      console.log('connected');
    });

    const unsubscribe = NetInfo.addEventListener(state => {
      setType(state.type);
      setConnected(state.isInternetReachable || false);
      console.log('Connection type', state.type);
      console.log('Is connected?', state.isConnected);
    });

    return () => {
      skt.disconnect();
      unsubscribe(); // Clean up NetInfo listener when the component unmounts
    };
  }, []);

  return (
    <SafeAreaView className="h-full">
      <View className="flex-1 items-center justify-center bg-red-500">
        <Text className="text-4xl font-semibold text-white">Edit app/index.tsx to edit this screen.</Text>
        {
          isSocketConnected ? (
            <Text className="text-4xl font-semibold text-green-500">Connected to socket</Text>
          ) : (
            <Text className="text-4xl font-semibold text-yellow-500">Not connected to socket</Text>
          )
        }
        <Text className="text-2xl font-medium text-white mt-4">
          Connection Type: {type ?? 'Unknown'}
        </Text>
        <Text className="text-2xl font-medium text-white mt-2">
          Status: {isConnected ? 'Online' : 'Offline'}
        </Text>
      </View>
    </SafeAreaView>
  );
}