HubConnection failed to start successfully due to 'Server timeout elapsed without receiving a message from the server' error

[officialismailshah]

HubConnection failed to start successfully because of error 'Server timeout elapsed without receiving a message from the server.'

This occurs when the client is trying to establish a connection with the SignalR server, but the server doesn't respond in time, causing the client to timeout and disconnect.

Logs
I/flutter (27056): FINER: 2025-01-02 12:29:40.824777: Selecting transport 'HttpTransportType.ServerSentEvents'.
I/flutter (27056): FINEST: 2025-01-02 12:29:40.831242: (SSE transport) Connecting
I/flutter (27056): FINER: 2025-01-02 12:29:40.838173: (SSE transport) connected to https://api.wappz.online/chatHub?id=00Un5q5Eb40JrGDsrqMWGw
I/flutter (27056): FINER: 2025-01-02 12:29:40.842983: The HttpConnection connected successfully.
I/flutter (27056): FINER: 2025-01-02 12:29:40.843633: Sending handshake request.
I/flutter (27056): FINEST: 2025-01-02 12:29:40.848666: (SSE transport) sending data.
I/flutter (27056): FINEST: 2025-01-02 12:29:40.870254: HTTP send: url 'https://api.wappz.online/chatHub?id=00Un5q5Eb40JrGDsrqMWGw', method: 'POST' content: '{"protocol":"json","version":1}�' content length = '32' headers: '{ content-type: application/json;charset=UTF-8 }, { X-Requested-With: FlutterHttpClient }'
I/flutter (27056): FINEST: 2025-01-02 12:29:41.413976: (SSE transport) request complete. Response status: 200.
I/flutter (27056): INFO: 2025-01-02 12:29:41.414832: Using HubProtocol 'json'.
I/flutter (27056): FINER: 2025-01-02 12:30:41.424272: HttpConnection.stopConnection(Unknown) called while in state ConnectionState.Disconnecting.
I/flutter (27056): SEVERE: 2025-01-02 12:30:41.425502: Connection disconnected with error 'Server timeout elapsed without receiving a message from the server.'.
I/flutter (27056): FINER: 2025-01-02 12:30:41.427793: HubConnection.connectionClosed(Server timeout elapsed without receiving a message from the server.) called while in state HubConnectionState.Connecting.
I/flutter (27056): FINER: 2025-01-02 12:30:41.429445: Hub handshake failed with error 'Server timeout elapsed without receiving a message from the server.' during start(). Stopping HubConnection.
I/flutter (27056): FINER: 2025-01-02 12:30:41.430845: Call to HttpConnection.stop(Exception: Server timeout elapsed without receiving a message from the server.) ignored because the connection is already in the disconnected state.
I/flutter (27056): FINER: 2025-01-02 12:30:41.435507: HubConnection failed to start successfully because of error 'Server timeout elapsed without receiving a message from the server.'.

[itsoftteam]

@officialismailshah Have you found the solution?

[officialismailshah]

@officialismailshah Have you found the solution?

The solution that I have found is that to make signalR socket alive by long polling.

If you want I can share you the code.

[itsoftteam]

yes if you can ...

[officialismailshah]

yes if you can ...

class SignalRService extends ChangeNotifier {
static final SignalRService _instance = SignalRService._internal();
late HubConnection connection;
bool isConnected = false;

factory SignalRService() {
return _instance;
}

SignalRService._internal() {
connection = HubConnectionBuilder()
.withUrl(
'your URL goes here',
HttpConnectionOptions(
transport: HttpTransportType.longPolling,
client: io.IOClient(
HttpClient()..badCertificateCallback = (x, y, z) => true),
logging: (level, message) {
// print('SignalR: $level - $message');
},
skipNegotiation: false,
logMessageContent: true))
.withHubProtocol(JsonHubProtocol())
.withAutomaticReconnect([2000, 5000, 10000, 15000, 20000]).build();
initializeSignalR();
}

void listenToEvent(String eventName, Function(dynamic) callback) {
if (!isConnected) return;
connection.on(eventName, (arguments) {
callback(arguments?.first);
});
}

initializeSignalR() async {
Timer? keepAliveTimer;

try {
  // print('Setting up connection parameters...');
  // Increase timeouts to be more lenient
  connection.serverTimeoutInMilliseconds = 120000; // 2 minutes
  connection.keepAliveIntervalInMilliseconds = 60000; // 1 minute

  connection.onreconnecting((error) {
    // print(
    //     'Connection reconnecting: ${error?.toString() ?? 'Unknown error'}');
    isConnected = false;
    keepAliveTimer?.cancel();
  });

  connection.onreconnected((connectionId) {
    // print('Connection reestablished. ID: $connectionId');
    isConnected = true;
    // setupKeepAlive();
  });

  connection.on('Send', (message) {
    print(message);
    // print('Received message: ${message.toString()}');
    // String id = getResponse(message.toString());
    // if (id == context.read<StorageNotifier>().userId.toString()) {
    //   // debugPrint(
    //   //     "--------------------------is it working--------------------------");

    //   customers = context.read<ServiceNotifier>().getAllCustomers(
    //       context: context,
    //       token: context.read<StorageNotifier>().token.toString(),
    //       userID: int.parse(context.read<StorageNotifier>().userType!));
    //   setState(() {});
    // }
  });

  connection.onclose((error) {
    // print('Connection closed: ${error?.toString() ?? 'Unknown error'}');
    isConnected = false;
    keepAliveTimer?.cancel();
  });

  // Function to setup keep-alive mechanism
  void setupKeepAlive() {
    keepAliveTimer?.cancel();
    keepAliveTimer = Timer.periodic(Duration(seconds: 45), (timer) async {
      if (isConnected && connection.state == HubConnectionState.connected) {
        try {
          // Send a ping to keep the connection alive
          await connection.invoke("AddToGroup", args: ["SignalRGroupChat"]);
          await connection.invoke('SendMessageToGroup',
              args: ["SignalRGroupChat", "1001", "1001"]);
          // print('Keep-alive ping sent successfully');
        } catch (e) {
          // print('Keep-alive ping failed: ${e.toString()}');
        }
      }
    });
  }

  // print('Starting connection...');
  // if ((connection.state == HubConnectionState.connected)) {
  // if (!isConnected) {
  await connection.start();
  // }

  // }

  if (connection.state == HubConnectionState.connected) {
    // print('Connection established successfully');
    isConnected = true;
    setupKeepAlive();

    try {
      // print('Testing connection with ping...');
      await connection.invoke("AddToGroup",
          args: ["SignalRGroupChat"]); // Only if your hub has this method
      await connection.invoke('SendMessageToGroup',
          args: ["SignalRGroupChat", "1001", "1001"]);

      // print('Ping successful');
    } catch (e) {
      // print('Ping failed: ${e.toString()}');
      rethrow;
    }

    // Only proceed with group operations if ping succeeds
    try {
      // print('Joining group...');
      await connection.invoke("AddToGroup", args: ["SignalRGroupChat"]);
      await connection.invoke('SendMessageToGroup',
          args: ["SignalRGroupChat", "1001", "1001"]);
      // print('Group joined successfully');
    } catch (e) {
      // print('Failed to join group: ${e.toString()}');

      rethrow;
    }
  } else {
    print(
        'Connection failed to establish. Current state: ${connection.state}');
  }

  // Keep the connection alive
  await Future.delayed(
      Duration(hours: 1)); // Adjust this duration as needed
} catch (e) {
  print('Connection error: ${e.toString()}');
  print('Connection state: ${connection.state}');
} finally {
  // Cleanup
  keepAliveTimer?.cancel();
}

}

Future stop() async {
if (connection.state == HubConnectionState.connected) {
await connection.stop();
}
}

({
String? id,
String? msg,
String? attachment,
String? chatType,
String? clientID,
String? attachmentFile,
}) getResponse(String data, String h) {
// [{"msg":"ChatMessageNotify","data":"Msgtesting#ChatType1#Attachmentchat#AttachmentFileName#AttachmentURL~#CustomerMobNo923236045838#CustomerProfileImage#CustomerNameOfficialIsmailShah#ClientIDF75#DepartmentIDF11#EmployeeIDF19"}]}
// Create a map to store the parsed data
print("------------$h-----------------$data");
data = data.substring(2, data.length - 2); // Remove outer brackets

// Step 2: Split into msg and data parts
List<String> parts = data.split(', data: ');
String msgPart = '${parts[0].replaceAll('msg: ', '"msg": "')}"';
// if (parts.isNotEmpty && parts.length > 1) {
  String dataPart = parts[1];

  // Step 3: Process the data part
  dataPart = dataPart.replaceAll('~', ': ').replaceAll('#', ', ');

  // Step 4: Create a proper JSON structure
  Map<String, String> dataMap = {};
  List<String> pairs = dataPart.split(', ');
  for (String pair in pairs) {
    List<String> keyValue = pair.split(': ');
    if (keyValue.length == 2) {
      dataMap[keyValue[0]] = keyValue[1];
    }
  }

  // Step 5: Construct the final JSON string
  String jsonString = '[{$msgPart, "data": ${jsonEncode(dataMap)}}]';

  print('Final JSON string: $jsonString');

  // Step 6: Parse the JSON
  List<dynamic> result = jsonDecode(jsonString);
  // print('Successfully parsed JSON:');
  // print(result);

  // Step 7: Access the parsed data
  Map<String, dynamic> messageData = result[0];
  // print('\nParsed Message: ${messageData['msg']}');
  // print('Parsed Data:');
  Map<String, dynamic> parsedData = messageData['data'];
  // parsedData.forEach((key, value) {
  //   print('$key: $value');
  // });
  // print('Customer Name: ${parsedData['CustomerName']}');
  // print('Customer Mobile: ${parsedData['CustomerMobNo']}');
  // print('Employee ID: ${parsedData['EmployeeIDF']}');
  // print('Client ID: ${parsedData["ClientIDF"]}');
  // print('ChatType ID: ${parsedData["ChatType"]}');
  // print('Attachment ID: ${parsedData["Attachment"]}');
  // print('Message ID: ${parsedData["msg: ChatMessageNotify, data: Msg"]}');
  return (
    id: parsedData['EmployeeIDF'].toString(),
    clientID: parsedData["ClientIDF"].toString(),
    attachment: parsedData["Attachment"],
    chatType: parsedData["ChatType"].toString(),
    msg: parsedData["Msg"].toString(),
    attachmentFile: parsedData["AttachmentFileName"].toString()
  );
// }
// return (
//   id: null,
//   clientID: null,
//   attachment: null,
//   chatType: null,
//   msg: null,
//   attachmentFile: null
// );

}
}

[officialismailshah]

So what you have to do is to make server live for maximum time use this code.