flutter - 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
解决方案
使用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
推荐阅读
- javascript - 如何使用 excel.js 库编辑 Multer 发布的文件?
- c++ - 链表插入,指针混淆
- python - 使用 OpenCV 检测文档扫描中的矩形签名字段
- mysql - 如何将 sql join 查询转换为 sequelizejs 查询
- node.js - SPFX 站点(SharePoint 2016 本地站点与反应)不断重新加载。该怎么办?
- docker - 使用 ENV 参数设置容器 PATH
- django - 如何在django中借助Forign Key访问其他模型的所有字段
- spring - 如何使用 Spring Pageable 在自定义查询 JPQL 上对多个字段执行排序
- android - Flutter:显示 PDF 封面图片
- selenium - 如何参考第一列中的名称启用第二列中的复选框?