Flutter中WebSocket连接未升级报错的排查与解决求助

问题描述 #

尝试在Flutter应用与运行于http://192.168.100.10:6001的WebSocket服务器建立连接时，控制台报错：

flutter (10118): WebSocketException: Connection to 'http://192.168.100.10:6001/socket.io/?EIO=4&transport=websocket#' was not upgraded to websocket

已确认服务器地址正确且正常监听6001端口，使用以下代码创建连接但无法触发Connection established日志：

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

socket.connect();
socket.onConnect((_) {
    print('Connection established');
});

/*socket.on('App\\Events\\NewMessageEvent', (data) {
    print('event reached');
    print(data);
});*/

socket.onDisconnect((_) => print('Connection Disconnection'));
socket.onConnectError((err) => print(err));
socket.onError((err) => print(err));

错误成因 #

• 版本不兼容：Flutter端socket_io_client版本与服务器端Socket.IO版本不匹配，协议握手逻辑冲突，导致无法完成WebSocket升级。
• 服务器配置缺失：服务器端未启用WebSocket传输支持，或未正确配置CORS、路径映射等规则，阻止了连接升级请求。
• 路径/参数不匹配：服务器Socket.IO监听的路径与客户端请求路径不一致，或请求参数（如EIO版本）不兼容。

修复方案 #

1. 对齐Socket.IO版本 #

根据服务器端Socket.IO版本，选择对应版本的socket_io_client依赖：

• 服务器为v2.x → 客户端用socket_io_client: ^2.0.0
• 服务器为v3.x/v4.x → 客户端用socket_io_client: ^4.0.0+

2. 修正服务器配置 #

以Node.js Socket.IO服务器为例，确保启用WebSocket传输并配置正确的CORS：

const io = require('socket.io')(server, {
  transports: ['websocket', 'polling'], // 明确包含websocket传输
  cors: {
    origin: "*", // 开发环境临时放开，生产环境指定允许的域名
    methods: ["GET", "POST"]
  }
});

3. 调整客户端连接参数 #

补充路径、额外头信息等配置，匹配服务器规则：

IO.Socket socket = IO.io('http://192.168.100.10:6001', <String, dynamic>{
  'transports': ['websocket'],
  'autoConnect': false,
  'path': '/socket.io', // 匹配服务器Socket.IO监听路径，默认值可省略，修改过则需对应
  'extraHeaders': {'Origin': 'http://your-app-origin'} // Web端需匹配CORS配置，移动端可省略
});

4. 测试基础WebSocket连接 #

先用Flutter原生WebSocket类测试服务器基础WebSocket服务是否正常，排除Socket.IO层的问题：

import 'package:web_socket_channel/web_socket_channel.dart';

final channel = WebSocketChannel.connect(
  Uri.parse('ws://192.168.100.10:6001/socket.io/?EIO=4&transport=websocket'),
);

channel.stream.listen(
  (message) => print('Received: $message'),
  onDone: () => print('Connection closed'),
  onError: (error) => print('Error: $error'),
);

如果基础连接也失败，需排查服务器端口防火墙、网络路由或WebSocket服务本身的启动问题。

内容的提问来源于stack exchange，提问作者rahil