首页 > 解决方案 > Flutter 无法连接到 SocketIO

问题描述

我是 Flutter 的新手。

我想构建一个在事件传入时触发警报的应用程序。所以我尝试使用 SocketIO 作为后端,但我在 Flutter 的控制台中遇到了这个错误。

我构建了 floatingActionButton 用于发送消息测试。当从第一部手机按下按钮时,另一部手机应在调试控制台中显示“警报”。但它没有显示任何东西。

这是页面显示时的错误。

I/flutter ( 3536): CREATING NEW SOCKET: http://localhost:8080/alert
I/flutter ( 3536): Created
I/flutter ( 3536): Initialized
D/FlutterSocketIoPlugin: FlutterSocketIoPlugin( 3536): onMethodCall: socketInit - domain: http://localhost:8080 - with namespace: /alert
D/FlutterSocketIoPlugin: TOTAL SOCKETS: ( 3536): 0
D/FlutterSocketIoPlugin: TOTAL SOCKETS: ( 3536): 0
D/FlutterSocketIoPlugin: added SocketIO( 3536): http://localhost:8080/alert
D/FlutterSocketIoPlugin: SocketIO( 3536): connecting...null
D/FlutterSocketIoPlugin: FlutterSocketIoPlugin( 3536): onMethodCall: socketSubcribes - domain: http://localhost:8080 - with namespace: /alert
D/FlutterSocketIoPlugin: FlutterSocketIoPlugin( 3536): socketData: {"alert_user":"FunctionId@624955072"}
D/FlutterSocketIoPlugin: TOTAL SOCKETS: ( 3536): 1
D/FlutterSocketIoPlugin: SocketIO( 3536): --- subscribes ---{"alert_user":"FunctionId@624955072"}
D/FlutterSocketIoPlugin: subscribe( 3536): channel: alert_user - with callback: FunctionId@624955072
D/FlutterSocketIoPlugin: socketInfo( 3536): SUBSCRIBES SIZES: NULL or EMPTY
D/FlutterSocketIoPlugin: socketInfo( 3536): SUBSCRIBES SIZES: 1
D/FlutterSocketIoPlugin: socketInfo( 3536): CHANNEL: alert_user with TOTAL LISTENERS: 1
D/FlutterSocketIoPlugin: FlutterSocketIoPlugin( 3536): onMethodCall: socketConnect - domain: http://localhost:8080 - with namespace: /alert
D/FlutterSocketIoPlugin: TOTAL SOCKETS: ( 3536): 1
D/FlutterSocketIoPlugin: SocketIO( 3536): connecting socket: http://localhost:8080/alert
W/sinessDetectio( 3536): Accessing hidden method Ldalvik/system/CloseGuard;->get()Ldalvik/system/CloseGuard; (greylist,core-platform-api, reflection, allowed)
W/sinessDetectio( 3536): Accessing hidden method Ldalvik/system/CloseGuard;->open(Ljava/lang/String;)V (greylist,core-platform-api, reflection, allowed)
W/sinessDetectio( 3536): Accessing hidden method Ldalvik/system/CloseGuard;->warnIfOpen()V (greylist,core-platform-api, reflection, allowed)
W/sinessDetectio( 3536): Accessing hidden field Lsun/misc/Unsafe;->theUnsafe:Lsun/misc/Unsafe; (greylist, reflection, allowed)
W/sinessDetectio( 3536): Accessing hidden method Lsun/misc/Unsafe;->allocateInstance(Ljava/lang/Class;)Ljava/lang/Object; (greylist, reflection, allowed)
D/FlutterSocketIoPlugin: SocketIO( 3536): connect_error: [{"cause":{"detailMessage":"CLEARTEXT communication to localhost not permitted by network security policy","stackTrace":[],"suppressedExceptions":[]},"detailMessage":"websocket error","stackTrace":[],"suppressedExceptions":[]}]
D/FlutterSocketIoPlugin: SocketIO( 3536): reconnect_attempt: [1]
D/FlutterSocketIoPlugin: SocketIO( 3536): reconnecting: [1]
D/FlutterSocketIoPlugin: SocketIO( 3536): connect_error: [{"cause":{"detailMessage":"CLEARTEXT communication to localhost not permitted by network security policy","stackTrace":[],"suppressedExceptions":[]},"detailMessage":"websocket error","stackTrace":[],"suppressedExceptions":[]}]
D/FlutterSocketIoPlugin: SocketIO( 3536): reconnect_error: [{"cause":{"cause":{"detailMessage":"CLEARTEXT communication to localhost not permitted by network security policy","stackTrace":[],"suppressedExceptions":[]},"detailMessage":"websocket error","stackTrace":[],"suppressedExceptions":[]},"detailMessage":"Connection error","stackTrace":[],"suppressedExceptions":[]}]

它一直给我这个错误。

在第一部手机中按下 floatingActionButton 的控制台。

D/FlutterSocketIoPlugin: FlutterSocketIoPlugin( 5570): onMethodCall: socketSendMessage - domain: http://localhost:8080 - with namespace: /alert
D/FlutterSocketIoPlugin: TOTAL SOCKETS: ( 5570): 1
D/FlutterSocketIoPlugin: SocketIO( 5570): socket id: http://localhost:8080/alert is connected: false

这是我的服务器代码

const app = require("express")();
const server = require("http").createServer(app);
const io = require("socket.io")(server);
const PORT = process.env.PORT || 8080;

server.listen(PORT);
console.log("Server is Running on Port " + PORT);

app.get("/", (req, res) => {
  res.send("Node Server is running. Yay!!");
});

const alert = io.of("/alert");

alert.on("connection", (socket) => {
  console.log(socket.id, "joined");

  socket.on("alert_detect", (data) => {
    alert.emit("alert_user", data);
  });
});

这是我的颤振代码

import 'package:flutter/material.dart';
import 'package:flutter_socket_io/flutter_socket_io.dart';
import 'package:flutter_socket_io/socket_io_manager.dart';

class MainScreen extends StatefulWidget {
  static const routeName = '/main-screen';
  @override
  _MainScreenState createState() => _MainScreenState();
}

class _MainScreenState extends State<MainScreen> {
  SocketIO socketIO;

  @override
  void initState() {
    _initSocketIO();
    super.initState();
  }

  _initSocketIO() {
    socketIO = SocketIOManager().createSocketIO(
      'http://localhost:8080',
      '/alert',
    );
    print('Created');
    socketIO.init();
    print('Initialized');
    socketIO.subscribe('alert_user', _socketAlert);
    socketIO.connect();
  }

  _socketAlert() {
    print('Alert');
  }

  void _sendMessage(msg) async {
    if (socketIO != null) {
      String jsonData = '{msg: msg,id: 1}';
      socketIO.sendMessage("alert_detect", jsonData);
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: <My body>,
      // This is sending test
      floatingActionButton: FloatingActionButton(
        backgroundColor: Theme.of(context).primaryColor,
        child: Icon(Icons.alarm),
        onPressed: () {
          _sendMessage('Hi');
        },
      ),
    );
  }
}

我误解了什么吗?谢谢你。:D

标签: fluttersocket.io

解决方案


使用10.0.2.2而不是localhost

_initSocketIO() {
    socketIO = SocketIOManager().createSocketIO(
      'http://10.0.2.2:8080',
      '/alert',
    );
    print('Created');
    socketIO.init();
    print('Initialized');
    socketIO.subscribe('alert_user', _socketAlert);
    socketIO.connect();
  }

有关更多信息,您可以查看https://developer.android.com/studio/run/emulator-networking


推荐阅读