Hello all, I have an server app which is based on...

# ktor

[Arif Terzioğlu]

Hello all,

I have an server app which is based on import io.ktor.server.websocket.webSocket and this service communicates with the react application. Although the default web socket connection is expected to handle ping frames from browser, browser fails to get a response. Could you help me with this issue?

Server config

install(WebSockets) {
        contentConverter = KotlinxWebsocketSerializationConverter(Json)
        pingPeriod = Duration.ofSeconds(10)
        timeout = Duration.ofSeconds(45)
        maxFrameSize = Long.MAX_VALUE
        masking = false
    }
import io.ktor.server.websocket.webSocket
webSocket ("/api/public/orders/{orderId}/live-updates/v1") {

  //...
}

React Client config

heartbeat: {
      message: 'ping',
      returnMessage: 'pong',
      timeout: 30000, // 30 seconds, if no response is received, the connection will be closed
      interval: 20000 // every 20 seconds, a ping message will be sent
    }

Response from the browser

[Aleksei Tirman [JB]]

The problem might be that the browser doesn't support sending PONG messages in response to PING messages. Please see this answer for more details.

[Arif Terzioğlu]

In this case, server does not respond to client’s ping messages.

[Aleksei Tirman [JB]]

Can you please describe how the React client's heartbeat works in terms of the WebSockets protocol?

[Arif Terzioğlu]

It is explained here
https://www.npmjs.com/package/react-use-websocket#heartbeat

[Arif Terzioğlu]

If the heartbeat option is set to true or has additional options, the library will send a 'ping' message to the server every interval milliseconds. If no response is received within timeout milliseconds, indicating a potential connection issue, the library will close the connection. You can customize the 'ping' message by changing the message property in the heartbeat object. If a returnMessage is defined, it will be ignored so that it won't be set as the lastMessage.

const { sendMessage, lastMessage, readyState } = useWebSocket(
  '<ws://localhost:3000>',
  {
    heartbeat: {
      message: 'ping',
      returnMessage: 'pong',
      timeout: 60000, // 1 minute, if no response is received, the connection will be closed
      interval: 25000, // every 25 seconds, a ping message will be sent
    },
  }
);

[Aleksei Tirman [JB]]

It's not clear what the 'ping' message is. Is it just a text frame?