Flutter物理设备中Socket.io客户端无法连接服务器问题求助

问题描述 #

在Flutter物理设备上，Socket.io客户端无法连接到Socket.io服务器：服务器端显示已连接，但客户端报错。仅模拟器可正常运行，已尝试更换Socket.io客户端/服务端版本、关闭防火墙，均无效。

客户端代码 #

import 'package:flutter/material.dart';
import 'package:socket_io_client/socket_io_client.dart' as Io;
void main() {
runApp(const MyApp());
}

class MyApp extends StatelessWidget {
const MyApp({super.key});

@override
Widget build(BuildContext context) {
return MaterialApp(
      home:  MyHomePage(),
    );
}
}

class MyHomePage extends StatefulWidget {
@override
State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
@override
void initState() {
connect();
super.initState();
}

void connect(){
Io.Socket socket = Io.io('http://192.168.0.197:6969',<String,dynamic>{
'transports':['websocket'],
'autoConnect':false,
});
socket.connect();

socket.onConnect((data) => print("Connection Established"));
socket.onConnectError((data) => print("Error"));
}
@override
Widget build(BuildContext context) {
return Scaffold();
}}

服务端代码 #

const express = require('express');
const http = require('http');

const { Socket } = require('socket.io');
const app = express();
const port = process.env.PORT || 6969;
var server = http.createServer(app);
var iO = require('socket.io')(server,{

});

app.use(express.json());
app.route('/').get((req,res)=>{
res.json("Hello");
})

iO.on("connection",(socket)=>{
console.log("Connected");
socket.on('sendMsg',(message)=>{
console.log("Your message ",message);
    });
});

server.listen(port,"0.0.0.0",()=>{
console.log('Server Started');
});

解决建议 #

1. 验证网络连通性 #

• 确保物理设备与服务器处于同一局域网，在设备浏览器中访问http://192.168.0.197:6969，确认能返回"Hello"，排除基础网络不通的问题。
• 若使用手机流量，局域网IP无法访问，需改用公网IP或内网穿透工具（如ngrok）。

2. 调整客户端配置 #

• 移除transports: ['websocket']强制配置，让客户端自动选择传输方式（Socket.io默认会先尝试polling再升级到websocket，部分物理设备网络对纯websocket支持有限）。
• 开启调试日志并监听详细错误，定位问题：

  Io.Socket socket = Io.io('http://192.168.0.197:6969', <String, dynamic>{
    'autoConnect': false,
    'debug': true, // 开启调试日志
  });
  socket.connect();
  
  socket.onConnect((data) => print("Connection Established"));
  socket.onConnectError((data) => print("Connect Error: $data"));
  socket.onError((error) => print("Error Detail: $error"));
  socket.onDisconnect((data) => print("Disconnected: $data"));
  

3. 服务端添加跨域配置 #

物理设备作为独立客户端，需服务端允许跨域请求：

var iO = require('socket.io')(server,{
  cors: {
    origin: "*", // 开发环境可放宽，生产环境指定具体域名
    methods: ["GET", "POST"]
  }
});

4. 检查平台网络权限 #

• Android：在AndroidManifest.xml中添加网络权限：

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

• iOS：在Info.plist中允许HTTP请求（因使用非HTTPS地址，iOS默认阻止）：

  <key>NSAppTransportSecurity</key>
  <dict>
      <key>NSAllowsArbitraryLoads</key>
      <true/>
  </dict>
  

内容的提问来源于stack exchange，提问作者Saimon Kabir Chowdhury