Flutter集成Laravel Socket.io接口报错，求解决方案

报错信息翻译 #

Socket错误：WebSocketException: 连接到'http://192.168.42.48:8000/api/users/?EIO=4&transport=websocket#'未被升级为WebSocket

问题根源 #

你的代码错误地将Socket连接路径设置为API接口路径/api/users，但Laravel Echo + Socket.io的默认Socket服务路径是/socket.io，导致请求无法被后端Socket服务处理，进而无法完成WebSocket协议升级。

解决方案 #

1. 修正Flutter端Socket配置

移除错误的API路径计算，直接使用Laravel Echo默认的Socket路径，同时去掉不必要的手动请求头（Socket.io客户端会自动处理这些协议头）：

void connectToSocket() {
    try {
      String localhostIp = '192.168.42.48';
      String socketUrl = 'http://$localhostIp:8000';

      socket = IO.io(
        socketUrl,
        <String, dynamic>{
          'transports': ['websocket'],
          'autoConnect': false,
          'path': '/socket.io', // 正确的Laravel Echo Socket路径
        },
      );

      socket!.onConnect((_) {
        log('Connected to socket!');
      });

      socket!.onError((error) {
        log('Socket error: $error');
      });

      socket!.on('newMessage', (data) {
        log('New message: $data');
      });

      socket!.connect();
    } catch (e) {
      log('Error connecting to socket: $e');
    }
  }

2. 检查后端Laravel配置

• 确认Laravel Echo Server配置文件中path字段为/socket.io（默认配置即为该值），自定义修改后需与客户端保持一致。
• 确保后端配置正确的跨域规则，允许Flutter客户端IP/域名发起WebSocket请求：在Laravel的config/cors.php中，将客户端地址加入allowed_origins，并设置supports_credentials为true。
• 验证Laravel广播配置（config/broadcasting.php）中，pusher驱动的options参数里，host和port正确指向Laravel Echo Server的运行地址与端口。

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