Flutter应用Socket.io连接异常：on connection未触发、emit无效

问题现象 #

• 服务端index.js中io.on("connection")回调无控制台输出，数据库连接状态正常
• 点击页面Test Connection按钮可正常打印Line 18日志，但socket emit事件未被服务端接收触发

问题根因 #

连接失败核心为客户端本地服务地址配置错误：代码中写的http://localhost:3000指向运行Flutter应用的设备自身，而非运行Node服务的开发机，socket实际未成功连接到服务端，因此不会触发connection回调，emit事件也无法送达服务端。
此外安卓默认禁止明文HTTP请求，未添加对应配置时也会阻断HTTP连接。

修复步骤 #

1. 替换客户端连接地址 #

根据调试使用的设备类型，替换socket_client.dart中的连接地址：

• 安卓模拟器：使用http://10.0.2.2:3000，这是安卓模拟器专门映射宿主开发机本地服务的固定地址
• iOS模拟器：可直接使用http://localhost:3000，iOS模拟器默认和宿主共用网络栈
• 真机调试：将手机和电脑接入同一局域网，用开发机的局域网IP替换localhost，例如http://192.168.3.12:3000

修改后的socket_client.dart初始化代码参考：

SocketClient._internal() {
  // 按调试设备类型替换对应连接地址
  socket = IO.io('http://10.0.2.2:3000', <String, dynamic>{
    'transports': ['websocket'],
    'autoConnect': false,
  });
  // 可添加连接状态日志方便排查问题
  socket!.onConnect((_) {
    print('Socket连接成功，id: ${socket!.id}');
  });
  socket!.onConnectError((err) {
    print('Socket连接错误: $err');
  });
  socket!.onDisconnect((_) => print('Socket断开连接'));
  socket!.connect();
}

2. 安卓端添加网络配置（仅安卓调试需要） #

打开安卓项目路径下的android/app/src/main/AndroidManifest.xml文件，在<manifest>标签下添加网络权限：

<uses-permission android:name="android.permission.INTERNET" />

同时在<application>标签中添加允许明文请求的属性：

<application
  android:usesCleartextTraffic="true"
  // 保留原有其他配置属性不变
>

3. 校验Socket.io版本兼容性 #

确认Flutter端socket_io_client和服务端socket.io npm包的大版本匹配，大版本不一致会直接导致连接失败：

• 服务端socket.io v2.x 对应客户端 socket_io_client v1.x
• 服务端socket.io v3.x/v4.x 对应客户端 socket_io_client v2.x

可在对应项目目录下运行命令查看版本：

# 查看服务端socket.io版本
npm list socket.io
# 查看Flutter客户端socket_io_client版本
flutter pub deps | grep socket_io_client

如果版本不匹配，统一升级到对应大版本即可。

所有配置修改完成后重启Node服务，重新编译运行Flutter应用，点击测试按钮即可在服务端控制台看到连接id和emit上报的测试数据。

注意：真机调试时请确认电脑防火墙放开了3000端口的入站规则，避免被防火墙拦截连接。

内容的提问来源于stack exchange，提问作者Tasnim Ur Rahaman Anas