heartbeat seems not working as expected

[harikt]

Hey,

I have been experimenting with the heartbeat feature and as reported on comment https://github.com/robtaussig/react-use-websocket/pull/206#issuecomment-1867894798 , this seems not sending any messages via websocket.

const {
    sendMessage,
    sendJsonMessage,
    lastJsonMessage,
    readyState,
    getWebSocket,
} = useWebSocket(socketUrl, {
    onClose: (event) => {  console.log("onClose : " + event) },
    onError: (event) => {  console.log("onError : " + event) },
    onOpen: () => {
        console.log("Connection opened.");      
    },
    // share: true,
    skipAssert: true,
    retryOnError: true,
    //Will attempt to reconnect on all close events, such as server shutting down
    shouldReconnect: (closeEvent) => {
        return true;
    },
    // Defaults to 20, so increased to 10000
    reconnectAttempts: 10000,
    //attemptNumber will be 0 the first time it attempts to reconnect, so this equation results in a reconnect pattern of 1 second, 2 seconds, 4 seconds, 8 seconds, and then caps at 10 seconds until the maximum number of attempts is reached
    reconnectInterval: (attemptNumber) => {
        const maxTime = 300; // Maximum time for reconnection
        const baseTime = 2; // Base time for exponential backoff

        // Calculate reconnect time using exponential backoff
        const reconnectTime = Math.min(maxTime, Math.pow(baseTime, attemptNumber)) * 1000;

        console.log("Reconnect attempt will be made in : " + reconnectTime + " ms");

        return reconnectTime;
    },
    // Default
    heartbeat: true,
}, connect);

Option 2 for heartbeat

heartbeat: {
    message: 'ping',
    returnMessage: 'pong',
    timeout: 60000, // 1 minute, if no response is received, the connection will be closed
    interval: 2500, // every 25 seconds, a ping message will be sent
},

Option 3 for heartbeat

heartbeat: {
    message: function () {
        return JSON.stringify({
            type: 'ping'
        });
    },

    returnMessage: function () {
        return JSON.stringify({
            status: 'success',
            message: 'pong',
        });
    },
    timeout: 60000, // 1 minute, if no response is received, the connection will be closed
    interval: 2500, // every 25 seconds, a ping message will be sent
}

Note : You can see one of the option I choose is skipAssert: true, . This was because of error I was getting

app.js:22773 Uncaught (in promise) Error
    at assertIsWebSocket (app.js:22773:17)
    at bindCloseHandler (app.js:22836:38)
    at attachListeners (app.js:22897:34)
    at createOrJoinSocket (app.js:23097:56)
    at app.js:23507:85
    at step (app.js:23387:25)
    at Object.next (app.js:23334:20)
    at fulfilled (app.js:23305:30)

So using skipAssert: true, has fixed the error. The note probably is another issue I should open.

[harikt]

As an alternative approach this is what I did. If this helps anyone.

// Ping every 60 second
const HEARTBEAT_INTERVAL = 60000;

useEffect(() => {
    // Start heartbeat interval
    const heartbeatInterval = setInterval(() => {
        sendJsonMessage({
            type: 'ping'
        });
    }, HEARTBEAT_INTERVAL);

    // Clean up interval on component unmount
    return () => clearInterval(heartbeatInterval);
}, [sendJsonMessage]);