WebSocket Connection Keeps Cloud Run Active—Need Auto-Disconnect Mechanism after specific timeout

[streamcfd]

Question

I am using Google Cloud Run for my app, which follows per-second billing as long as the app is in use, a client is connected, and the CPU is not idle.

I've noticed that if I leave a tab open in the browser, the CPU never goes idle because WebSocket messages are continuously sent.

Expected Behavior

• WebSocket should automatically disconnect after a period of inactivity to allow the Cloud Run instance to go idle.
• Users should be required to refresh the page to reconnect if they wish to use the app again.

Question

Is there any recommended approach to disconnect the WebSocket after a set period of inactivity on the client side? Or is there a way to require a manual page refresh for reconnection?

#2075 is similar, but I require complete disconnection after timeout so that CPU is idle.

Possible Solutions Considered

• Implementing a client-side inactivity timer that closes the WebSocket.
• Enforcing server-side WebSocket disconnection after a timeout.
• Using Cloud Run session timeout settings, if applicable.

Any guidance or best practices would be appreciated!

[falkoschindler]

Hi @streamcfd,

A client-side inactivity timer sounds reasonable:

ui.add_body_html('''
<script>
    let inactivityTimer;
    function resetInactivityTimer() {
        clearTimeout(inactivityTimer);
        inactivityTimer = setTimeout(() => {
            console.log('User has been inactive for 10 seconds');
            window.socket.disconnect();
        }, 10 * 1000);
    }
    document.addEventListener('DOMContentLoaded', () => {
        resetInactivityTimer();
        document.addEventListener('mousemove', resetInactivityTimer);
        document.addEventListener('mousedown', resetInactivityTimer);
        document.addEventListener('click', resetInactivityTimer);
        document.addEventListener('keypress', resetInactivityTimer);
        document.addEventListener('keydown', resetInactivityTimer);
        document.addEventListener('touchstart', resetInactivityTimer);
        document.addEventListener('touchmove', resetInactivityTimer);
        document.addEventListener('scroll', resetInactivityTimer);
    });
</script>
''')

Is this what you're looking for?

[streamcfd]

Thanks for quick response. This seems to work fine. Client disconnects after 10 seconds.

With WebSocket auto-disconnection working (clients disconnect after 10 seconds of inactivity), I now need to ensure that the NiceGUI server shuts down when no clients are connected.

On the server side, I need a way to:

Check how many clients are connected.
If the number of clients is 0 for more than 1 minute, automatically shut down NiceGUI.

Question
Is there a built-in way to monitor active connections in NiceGUI and trigger a shutdown when all clients have disconnected for a set duration? If not, what would be the best approach to implement this?

[falkoschindler]

You can count the number of clients using the Client.instances dictionary. But if you use the auto-index client, which always exists and can have multiple connections, you can use the private (and undocumented) _num_connections field:

import time
from nicegui import Client, app, ui

last_connection = time.time()

def check_connections() -> None:
    global last_connection
    total = sum(sum(client._num_connections.values()) for client in Client.instances.values())
    if total > 0:
        last_connection = time.time()
    if time.time() - last_connection > 10:
        app.shutdown()

app.timer(1.0, check_connections)

ui.run()

[streamcfd]

Thanks a lot. Both works perfectly!

I later realized that shutting down NiceGUI isn't necessary—simply closing the WebSocket is sufficient.

[streamcfd]

I modify to let user know he is disconnected and need to refresh page

<script>
    let inactivityTimer;

    function resetInactivityTimer() {
        clearTimeout(inactivityTimer);
        inactivityTimer = setTimeout(() => {
            console.log('User inactive');
            window.socket.disconnect();
            
            // Create full-screen translucent overlay with refresh button
            const overlay = document.createElement('div');
            overlay.id = 'inactivity-overlay';
            overlay.style.position = 'fixed';
            overlay.style.top = 0;
            overlay.style.left = 0;
            overlay.style.width = '100%';
            overlay.style.height = '100%';
            overlay.style.backgroundColor = 'rgba(0, 0, 0, 0.7)';
            overlay.style.display = 'flex';
            overlay.style.justifyContent = 'center';
            overlay.style.alignItems = 'center';
            overlay.style.zIndex = '9999';

            const refreshButton = document.createElement('button');
            refreshButton.innerText = 'Refresh Page';
            refreshButton.style.padding = '10px 20px';
            refreshButton.style.backgroundColor = '#007BFF';
            refreshButton.style.color = '#fff';
            refreshButton.style.borderRadius = '5px';
            refreshButton.style.border = 'none';
            refreshButton.style.cursor = 'pointer';

            // Append button to overlay and overlay to body
            overlay.appendChild(refreshButton);
            document.body.appendChild(overlay);

            // Add event listener for the refresh button
            refreshButton.addEventListener('click', () => {
                window.location.reload();
                document.getElementById('inactivity-overlay').remove();  // Remove overlay after click
            });

        }, 10 * 1000); // 10 seconds of inactivity before showing overlay
    }

    document.addEventListener('DOMContentLoaded', () => {
        resetInactivityTimer();

        const activityEvents = [
            'mousemove',
            'mousedown',
            'click',
            'keypress',
            'keydown',
            'touchstart',
            'touchmove',
            'scroll'
        ];

        // Add event listeners for user activities
        activityEvents.forEach(event => {
            document.addEventListener(event, resetInactivityTimer);
        });
    });
</script>