Handling Connection States and Errors

# CHAPTER 10

Handling Connection States and Errors #

1. Introduction #

2. Learning Objectives #

• Identify common reasons for WebSocket disconnections.

• Implement an automatic reconnection script using setTimeout.

• Utilize Exponential Backoff to prevent server flooding.

• Build a user-friendly UI that accurately reflects connection states.

3. Beginner-Friendly Explanation #

4. Real-World Examples #

• Slack Desktop App: If you unplug your ethernet cable, Slack shows a grey banner at the top saying "Connecting...". The moment you plug it back in, the banner turns green and disappears. The app automatically re-established the socket without requiring you to refresh the page.

5. Step-by-Step Tutorial #

Step 1: Create a function called connect(). Step 2: Inside connect(), initialize the WebSocket. Step 3: Inside the onclose event, call setTimeout() to run connect() again after a short delay. Step 4: Implement Exponential Backoff to increase the delay if the server is offline.

6. The Reconnection Strategy #

7. JavaScript Examples #

const serverUrl = "wss://echo.websocket.events";
let socket;
let reconnectInterval = 1000; // Start at 1 second
let maxReconnectInterval = 30000; // Max out at 30 seconds

function connect() {
    console.log("Attempting to connect...");
    socket = new WebSocket(serverUrl);

    socket.onopen = function() {
        console.log("🟢 Connected!");
        // Reset the interval upon successful connection
        reconnectInterval = 1000; 
        updateUI(true);
    };

    socket.onmessage = function(event) {
        console.log("Message:", event.data);
    };

    socket.onclose = function(event) {
        console.log("🔴 Disconnected.");
        updateUI(false);
        
        // Exponential Backoff: double the interval each time it fails
        // but don't exceed the max interval.
        reconnectInterval = Math.min(reconnectInterval * 1.5, maxReconnectInterval);
        
        console.log(`Will try to reconnect in ${reconnectInterval / 1000} seconds...`);
        
        // Try to connect again
        setTimeout(connect, reconnectInterval);
    };

    socket.onerror = function(error) {
        console.error("Socket error occurred. Close event will fire next.");
        // We do not call connect() here, because onclose will fire immediately after onerror.
    };
}

// Function to update the User Interface
function updateUI(isConnected) {
    const banner = document.getElementById('status-banner');
    if (isConnected) {
        banner.style.display = 'none';
    } else {
        banner.style.display = 'block';
        banner.innerText = "Connection lost. Reconnecting...";
    }
}

// Start the initial connection
connect();

8. What is Exponential Backoff? #

9. Heartbeats (Ping/Pong) #

let pingInterval;

socket.onopen = function() {
    // Send a 'ping' every 30 seconds
    pingInterval = setInterval(() => {
        if(socket.readyState === WebSocket.OPEN) {
            socket.send(JSON.stringify({ type: 'ping' }));
        }
    }, 30000);
};

socket.onclose = function() {
    // Stop pinging if closed
    clearInterval(pingInterval);
};

10. Best Practices #

• Never put reconnect logic in onerror: Because onerror is immediately followed by onclose, putting connect() in both places will spawn two sockets simultaneously, creating a memory leak.

• Max Retry Limits: Consider stopping the reconnection attempts after 5 minutes and showing the user a button that says "Click to Reconnect manually" to save CPU.

11. Common Mistakes #

• Losing References: When you create a new socket = new WebSocket(), the old socket object is gone. Ensure any external functions relying on socket check that it exists and is OPEN before trying to use it.

12. Mini Exercises #

1. 1. Implement the code from Section 7 in an HTML file.

1. 2. Turn off your Wi-Fi.

1. 3. Watch the console. You will see it try to reconnect, and the time between attempts will grow longer and longer.

13. Coding Challenges #

14. MCQs with Answers #

15. Interview Questions #

• Q: Describe how you would implement a heartbeat system to detect "zombie" WebSocket connections.

• Q: If a WebSocket connection drops, why shouldn't the client attempt to reconnect every 100 milliseconds?

16. FAQs #

17. Summary #

18. Next Chapter Recommendation #