Flutter: Received error message "Pong reply not received in time" when using WebSockets

Question

I'm developing a Flutter application that connects to a Laravel REVERB backend using WebSockets. I'm using the IOWebSocketChannel.connect method to establish the connection and the sink.add method to send a subscription message to the server.

Here's the relevant code from my main.dart file:

final channel = IOWebSocketChannel.connect(
    'ws://localhost:8080/app/wdkuwjwxw78hbp6sax2c');

@override
void initState() {
  super.initState();
  channel.sink.add(json.encode({
    "event": "pusher:subscribe",
    "data": {"channel": "home"},
  }));
}

every thing work ok , but after a delay im receiving the following error message:

{"event":"pusher:error","data":"{\"code\":4201,\"message\":\"Pong reply not received in time\"}"}

here is my debug console

I understand that this error message indicates that the server did not respond to a ping message within a certain time frame. However, I'm not sure how to fix this issue.

Does anyone know why I might be receiving this error message and how I can resolve it? Any help would be greatly appreciated.

Answer 1

the answer is that i have to listen to the websocket and respond to the ping message like this

channel.stream.listen((message) {
  // Print the received message for debugging purposes
  debugPrint(message);

  // Check if the message contains the string 'ping'
  if (message.toString().contains('ping')) {
    // If it does, send a response with the string 'pong'
    channel.sink.add(json.encode(
      {"event": "pusher:pong"},
    ));
    debugPrint('pong');
  }

});