Socket closes when tab is in background – is ping/pong paused?

[yasmanets]

Hi! I'm experiencing an issue where the WebSocket connection gets closed when the browser tab is left in the background for a while.

I’m using the following config:

const { sendMessage } = useWebSocket(socketUrl,
	{
		heartbeat: {
			message: encodeMsg({ action: 'ping' }),
			returnMessage: `pong`,
			timeout: 3000,
			interval: 500
		},
		shouldReconnect: () => {
			return true;
		},
		reconnectInterval: 300,
		reconnectAttempts: 10
	},
);

What happens:

When I leave the tab inactive (e.g., switch to another tab or minimize the browser), after some time the WebSocket connection closes.
This seems to happen because the ping/pong messages stop being sent or received.
When I return to the tab, a new socket is created, triggering a reconnection.

My question:

Does react-use-websocket pause activity (like sending/receiving ping/pong or timers) when the tab is in the background or suspended by the browser?

If so, is there a recommended way to keep the connection alive or resume it properly once the tab becomes active again?

Thanks in advance!

[yasmanets]

I have found the answer here:

https://github.com/robtaussig/react-use-websocket/blob/master/src/lib/heartbeat.ts#L29-L32

[happier2]

I have found the answer here:

https://github.com/robtaussig/react-use-websocket/blob/master/src/lib/heartbeat.ts#L29-L32

Hi Yasmanets, We just have this same issue. Could you please tell us that how you solved this problem?

[happier2]

I have found the answer here:
https://github.com/robtaussig/react-use-websocket/blob/master/src/lib/heartbeat.ts#L29-L32

Hi Yasmanets, We just have this same issue. Could you please tell us that how you solved this problem?

I have found the answer. From the chrome 88 release, setInterval throttling will be done more intensively, at 1 minute.
Overcoming browser throttling of setInterval executions | Medium

[MaZZly]

Seems browser throttling setInterval on tab inactivity is problematic for heartbeat since pings won't be sent, and when coming back to the tab (or browser allows intervals to execute throttled) it will consider WS connection stale and reconnect..

We managed to solve this by moving the interval tick into a web worker & sending the ping manually:

const pingInterval = 10000;
const createPingIntervalWorker = () => {
    // Ensures that we send ping commands on the websocket even when browser inactivity wants to throttle it.
    const workerCode = `setInterval(() => self.postMessage(''), ${pingInterval});`;
    const url = URL.createObjectURL(new Blob([workerCode], { type: 'application/javascript' }));
    const worker = new Worker(url);
    URL.revokeObjectURL(url);
    return worker;
};

const { sendMessage, readyState } = useWebSocket(wsUrl, {
    // ...
    heartbeat: {
        timeout: 60000,
        interval: pingInterval,
    },
});

useEffect(() => {
    let pingIntervalWorker: Worker;
    if (readyState === ReadyState.OPEN) {
        pingIntervalWorker = createPingIntervalWorker();
        pingIntervalWorker.onmessage = () => sendMessage('ping');
    }
    return () => {
        if (pingIntervalWorker) {
            pingIntervalWorker.terminate();
        }
    };
}, [readyState]);

Caveat: This will always send ping at the specified interval, even if recent messages have been received (relevant issue: #261)

[MaZZly]

Update: It seems that webworkers will also be throttled at some point when a browser tab is inactive...

Our solution now is to make the WS server send pings instead, so that the heartbeat timeout checks then see messages have come in recently...