WebSocket connection management

websocket-close.js

class WebSocketManager {
    constructor(url) {
        this.url = url;
        this.ws = null;
        this.setupWebSocket();
        this.setupCleanupEvents();
    }

    setupWebSocket() {
        this.ws = new WebSocket(this.url);
        
        // Optional: Handle connection events
        this.ws.onopen = () => console.log('Connected');
        this.ws.onclose = () => console.log('Disconnected');
    }

    setupCleanupEvents() {
        // Handle page hide/unload
        window.addEventListener('beforeunload', this.cleanup.bind(this));
        window.addEventListener('unload', this.cleanup.bind(this));
        
        // Handle tab visibility change
        document.addEventListener('visibilitychange', () => {
            if (document.hidden) {
                this.cleanup();
            } else {
                this.setupWebSocket(); // Reconnect when tab becomes visible
            }
        });

        // Handle mobile events
        document.addEventListener('pagehide', this.cleanup.bind(this));
        document.addEventListener('freeze', this.cleanup.bind(this));

        // Handle when browser minimizes or user switches apps
        window.addEventListener('blur', this.cleanup.bind(this));
    }

    cleanup() {
        if (this.ws) {
            // Close code 1000 indicates normal closure
            this.ws.close(1000, 'User navigated away');
            this.ws = null;
        }
    }

    // Method to manually close connection
    disconnect() {
        this.cleanup();
    }
}

// Usage
const wsManager = new WebSocketManager('wss://your-websocket-server.com');

// To manually disconnect
// wsManager.disconnect();