Socket.io-client 无法从 React Native 移动应用程序连接到服务器

Question

我正在尝试从 React Native android 应用程序通过 socket-io.client 连接到远程服务器，但是这些尝试都失败了，请检查套接字。 connected -> false，对服务器上的connect事件不起作用，花了一天多的时间，我不明白这是怎么回事。在网络上使用大致相同的代码（尽管在不同的平台上）会产生连接。

我读了很多书，每个人都在谈论不同的事情。可能AndroidMainfest.xml不是那个...可能版本不一样...所以，我一次发送所有内容。

代码： 应用.js

import React, { useState, useEffect } from 'react';
const io =  require('socket.io-client');

export default function App() {
useEffect(() => {
    const socket = io('https://my_domain:3000/', {transports: ['websocket'], secure: true});
      socket.connect();
    console.log(socket.connected);
  })
}

服务器.js

const cors = require('cors');
const bodyParser = require('body-parser');
const express = require('express');

const app = express();
var options = {
    key: my_key,
    cert: my_cert
}
const server = require('https').createServer(options,app);
server.listen(3000, 'my_domain');
const io = require('socket.io')(server);

app.use(cors());

let connections = [];

io.on('connect', (socket) => {
    connections.push(socket);
    console.log('Connect');
    console.log(connections.length);
}

AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest
  xmlns:android="http://schemas.android.com/apk/res/android"
  package="com.facebook.react.uiapp">

  <uses-permission android:name="android.permission.INTERNET" />
  <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
  <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
  <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
  <uses-permission android:name="android.permission.CHANGE_NETWORK_STATE" />
  <uses-permission android:name="android.permission.VIBRATE"/>

  <!--Just to show permissions example-->
  <uses-permission android:name="android.permission.CAMERA"/>
  <uses-permission android:name="android.permission.READ_CALENDAR"/>

  <!--
  android:icon is used to display launcher icon on mobile devices.
  android:banner is used to display a rectangular banned launcher icon on Android TV devices.
  -->
  <application
      android:name=".RNTesterApplication"
      android:allowBackup="true"
      android:banner="@drawable/tv_banner"
      android:icon="@drawable/launcher_icon"
      android:label="@string/app_name"
      android:theme="@style/Theme.ReactNative.AppCompat.Light" 
      android:usesCleartextTraffic="true">
    <activity
        android:name=".RNTesterActivity"
        android:label="@string/app_name"
        android:screenOrientation="fullSensor"
        android:configChanges="orientation|screenSize" >
      <intent-filter>
        <action android:name="android.intent.action.MAIN" />
        <category android:name="android.intent.category.LAUNCHER" />
        <!-- Needed to properly create a launch intent when running on Android TV -->
        <category android:name="android.intent.category.LEANBACK_LAUNCHER" />
      </intent-filter>
      <intent-filter>
        <action android:name="android.intent.action.VIEW" />
        <category android:name="android.intent.category.DEFAULT" />
        <category android:name="android.intent.category.BROWSABLE" />
        <!-- Accepts URIs that begin with "rntester://example” -->
        <data android:scheme="rntester" android:host="example" />
      </intent-filter>
    </activity>
    <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
  </application>

</manifest>

包.json

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject"
  },
  "dependencies": {
    "@expo/vector-icons": "^10.0.6",
    "@react-native-community/masked-view": "0.1.5",
    "@react-navigation/drawer": "^5.0.3",
    "expo": "~36.0.0",
    "expo-font": "^8.0.0",
    "jquery": "^3.4.1",
    "react": "~16.9.0",
    "react-dom": "~16.9.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz",
    "react-native-gesture-handler": "~1.5.0",
    "react-native-reanimated": "~1.4.0",
    "react-native-safe-area-context": "0.6.0",
    "react-native-screens": "2.0.0-alpha.12",
    "react-native-web": "~0.11.7",
    "react-navigation": "^4.1.1",
    "react-navigation-drawer": "^2.3.4",
    "react-navigation-stack": "^2.0.4",
    "react-socket-io-client": "^1.1.1",
    "socket.io-client": "^2.1.1"
  },
  "devDependencies": {
    "babel-preset-expo": "~8.0.0",
    "@babel/core": "^7.0.0"
  },
  "private": true
}

Answer 1

您可以尝试将您的https://example.com 修改为“example.com”还是简单地“example.com”并记录结果？

就我而言，我必须通过包含 https 将我的请求更改为安全请求。

Answer 2

使用

import io from 'socket.io-client'; 

而不是

const io = require('socket.io-client'); 

应该可以了！