Flutter 中真实设备和socket.io 的问题

Question

当我尝试在物理设备中以调试模式运行我的应用程序时，我遇到了这个问题。 当我尝试调试下一个代码时：

class SocketService with ChangeNotifier {
  ServerStatus _serverStatus = ServerStatus.Connecting;
  SocketService() {
    this._initConfig();
  }
  void _initConfig() async {
    IO.Socket socket = IO.io('http://192.168.56.1:3000/', <String, dynamic>{
      'transports': ['websocket'],
      'autoConnect': true,
    });

    socket.on('connect', (_) {
      print('connect');
    });
    socket.on('event', (data) => print(data));
    socket.on('disconnect', (_) => print('disconnect'));
    socket.on('fromServer', (_) => print(_));
  }
}

在我的后端我有这个：

文件index.js

const express = require('express');
const path = require('path');
require('dotenv').config();

const app = express();

const server = require('http').createServer(app);
module.exports.io = require('socket.io')(server);
require('./sockets/socket');

const publicPath = path.resolve( __dirname, 'public' );
app.use( express.static( publicPath ) );

server.listen( process.env.PORT, ( err ) => {

    if ( err ) throw new Error(err);
    console.log('Servidor corriendo en puerto', process.env.PORT );

});

文件socket.js

const { io } = require('../index');

io.on('connection', client => {
    console.log('Cliente conectado');
    client.on('disconnect', () => {
        console.log('Cliente desconectado');
    });
    client.on('mensaje', ( payload ) => {
        console.log('Mensaje', payload);
        io.emit( 'mensaje', { admin: 'Nuevo mensaje' } );
    });
});

在网络中工作正常，完美地打印“断开连接”和“连接”，但是当我尝试在手机中调试时，什么也没发生，我没有从套接字实例收到任何消息，如果有人知道如何解决这个问题我将不胜感激。

Answer 1

您可以将代码上传到 Heroku 服务器，也可以创建 ngrok URL 将套接字与物理设备连接。

Answer 2

我弄清楚问题出在哪里，是 AndroidManifest 我解决的方法是使用下一个代码

在

<application>

中我添加了这一行

android:usesCleartextTraffic="true"

结果是这样的：

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.band_names">
   <uses-permission android:name="android.permission.INTERNET"/>
   <application
        android:label="band_names"
        android:icon="@mipmap/ic_launcher"
        android:usesCleartextTraffic="true">
        <activity
            android:name=".MainActivity"
            android:launchMode="singleTop"
            android:theme="@style/LaunchTheme"
            android:configChanges="orientation|keyboardHidden|keyboard|screenSize|smallestScreenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
            android:hardwareAccelerated="true"
            android:windowSoftInputMode="adjustResize">
            <!-- Specifies an Android theme to apply to this Activity as soon as
                 the Android process has started. This theme is visible to the user
                 while the Flutter UI initializes. After that, this theme continues
                 to determine the Window background behind the Flutter UI. -->
            <meta-data
              android:name="io.flutter.embedding.android.NormalTheme"
              android:resource="@style/NormalTheme"
              />
            <!-- Displays an Android View that continues showing the launch screen
                 Drawable until Flutter paints its first frame, then this splash
                 screen fades out. A splash screen is useful to avoid any visual
                 gap between the end of Android's launch screen and the painting of
                 Flutter's first frame. -->
            <meta-data
              android:name="io.flutter.embedding.android.SplashScreenDrawable"
              android:resource="@drawable/launch_background"
              />
            <intent-filter>
                <action android:name="android.intent.action.MAIN"/>
                <category android:name="android.intent.category.LAUNCHER"/>
            </intent-filter>
        </activity>
        <!-- Don't delete the meta-data below.
             This is used by the Flutter tool to generate GeneratedPluginRegistrant.java -->
        <meta-data
            android:name="flutterEmbedding"
            android:value="2" />
    </application>
</manifest>

Answer 3

我也做了同样的事情，但它不起作用！ 如果我更改 url，它可以在模拟器和网络中运行。但在真实设备的调试模式下（使用USB），它不起作用！ 我把 android:usesCleartextTraffic="true" 放在 androidManifest.xml 中，我确信我输入了我电脑的正确 IP。

错误： [日志] 连接错误 SocketException：连接失败（操作系统错误：网络无法访问，errno = 101），地址 = 10.5.121.22，端口 = 5000