Flutter（模拟器）未连接到本地 Socket.io

Question

我正在尝试使用 Flutter 使用 Socket.io 连接到 node.js 中的本地服务器。当我从我的浏览器连接时它工作正常，但它不能使用我的 Android/iOS 模拟器连接。我的 socket.io 代码很简单

// socket messages
io.on("connection", client => {
    console.log("New device connected!")

    // print in the console when some device disconnects
    client.on("disconnect", data => {
        console.log("disconnected!")
    })
})

Flutter 代码（也很简单）：

IO.Socket socket = IO.io('http://localhost:3000', <String, dynamic>{
    'transports': ['websocket'],
    'autoConnect': false,
});

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

它总是每隔约 30 秒显示一次 "disconnect"（在颤振控制台中），在 node.js 中它也从不显示 “新设备已连接！”

---

我在用什么？

Flutter Socket.io Dependency

pubspec.xml

dependencies:
  flutter:
    sdk: flutter
  socket_io_client: ^0.9.11
  provider: ^4.3.2+2

Answer 1

为什么这不起作用有不同的原因，但在这里我描述了其中一些如何解决它。

首先检查服务器是否响应

1. 检查您是否可以使用您的电脑网络浏览器访问它，它应该类似于

1. 检查您的设备网络浏览器是否可以访问

如果两者都正常，请尝试以下解决方案之一：

---

解决方案 #1

您在模拟器浏览器（而不是您的 PC 浏览器）中测试的 url 与您需要在 Flutter 应用中使用的 url 相同。

iOS

http://localhost:3000 # port can change, check your node.js config
http://<your_pc_ip:3000>:3000 # you can check it in the preferences or terminal -> ipconfig

安卓

http://10.0.2.2:3000
http://localhost:3000 # port can change, check your node.js config
http://<your_pc_ip:3000>:3000 # you can check it in the preferences or terminal -> ipconfig

解决方案 #2

我的node.js项目使用的是socket.io 3.0.0版（最新的），但是我的flutter客户端好像不支持，所以尝试降级到2.3.0版（不要这样做手动，也就是说不要手动修改文件）

npm uninstall socket.io
npm install socket.io@2.3.0

你的 package.json 将是（在你的 node.js 项目中）

"dependencies": {
    "dotenv": "^8.2.0",
    "express": "^4.17.1",
    "socket.io": "^2.3.0"
}

注意：如果您想继续使用 socket.io 3.0 版本而不是 v2.3.0 版本，那么您应该使用新版本的 Flutter 客户端（目前处于测试阶段）：Flutter Client for Socket.io v3.0

解决方案 #3

由于某种原因，“autoConnect” 并不总是有效，因此请尝试手动连接。

IO.Socket socket = IO.io('http://localhost:3000', <String, dynamic>{
    'transports': ['websocket'],
    'autoConnect': true,
});
    
// Dart client
socket.on('connect', (_) {
    print('connect');
});
socket.on('event', (data) => print(data));
socket.on('disconnect', (_) => print('disconnect'));
socket.on('fromServer', (_) => print(_));

// add this line
socket.connect();

解决方案 #4

可能有防火墙或其他东西阻止了您的端口（我的 3000），尝试使用另一个端口运行它。您需要更改服务器中的配置，并更改颤振应用程序中的 url（也使用您的模拟器/模拟器浏览器对其进行测试）

就是这样......它应该可以工作。

您应该会看到如下内容： 颤动

服务器

Answer 2

我在使用 socket_io_client 时遇到了同样的问题。 使用：Socket socket = io(SERVER_ADRESS, <String, dynamic> { 'transports':['websocket'], 'autoConnect' : true}); 而不是：Socket socket = io(SERVER_ADRESS);。