# Implementing Resilient WebSocket Reconnection with Exponential Backoff for Mobile WebApps

Kapag nagpapatakbo ng mga real-time telemetry dashboards sa mobile browser, ang biglaang paglipat sa pagitan ng Wi-Fi at cellular network (tulad ng 4G/5G handoffs) ay madalas na nagdudulot ng socket disconnects. Kung susubukan ng application na mag-reconnect nang sabay-sabay at walang pagitan, maaari nitong ma-overwhelm ang client thread at maging sanhi ng network spam.

Upang mapanatili ang matatag na koneksyon nang hindi nasasayang ang battery life ng smartphone, gumamit ng exponential backoff algorithm na may jitter:

```plaintext
// transport/socketManager.js
class ResilientSocket {
  constructor(endpointUrl) {
    this.url = endpointUrl;
    this.reconnectAttempts = 0;
    this.maxDelayMs = 15000;
    this.socket = null;
    this.connect();
  }

  connect() {
    this.socket = new WebSocket(this.url);

    this.socket.onopen = () => {
      console.info('Konektado ang WebSocket channel.');
      this.reconnectAttempts = 0;
    };

    this.socket.onclose = () => {
      this.scheduleReconnect();
    };

    this.socket.onerror = (err) => {
      console.warn('Socket error naitala:', err);
      this.socket.close();
    };
  }

  scheduleReconnect() {
    this.reconnectAttempts++;
    // Kalkulahin ang delay gamit ang exponential formula na may randomization
    const baseDelay = Math.min(1000 * Math.pow(1.5, this.reconnectAttempts), this.maxDelayMs);
    const randomizedDelay = baseDelay + Math.random() * 500;

    setTimeout(() => {
      this.connect();
    }, randomizedDelay);
  }
}

export const liveSocket = new ResilientSocket('wss://stream.phcash.org.ph/feed');
```

## **Mga Benepisyo sa Mobile Performance:**

Proteksyon sa Device Battery: Umiiwas sa walang tigil na reconnection loops kapag mahina o nawala ang cellular signal.

*   Throttled Traffic Spikes: Pinipigilan ang biglaang pagdagsa ng sabay-sabay na network requests sa edge servers matapos ang network interruption.
    

Para sa isang operational reference ng decoupled client-side data streaming in production, review this [reference node](https://phcash.org.ph/).

#javascript, #websockets, #performance, #web-development