Membangun Koneksi WebSocket yang Tangguh: Strategi Heartbeat dan Reconnection Otomatis

1. Pendahuluan

WebSocket adalah teknologi revolusioner yang memungkinkan komunikasi dua arah real-time antara klien (browser) dan server melalui satu koneksi persisten. Ini menjadi fondasi bagi banyak aplikasi modern seperti chat, live dashboard, game online, dan notifikasi instan. Namun, membangun aplikasi real-time yang benar-benar andal dengan WebSocket tidak semudah hanya membuka koneksi dan mengirim data.

⚠️ Masalahnya: Koneksi WebSocket, meskipun persisten, tidak kebal terhadap gangguan. Jaringan bisa putus, server bisa restart, atau bahkan idle timeout dari proxy atau load balancer di tengah jalan bisa memutuskan koneksi tanpa pemberitahuan eksplisit. Jika ini terjadi, aplikasi Anda akan kehilangan kemampuan real-time-nya, dan pengguna akan mendapatkan pengalaman yang buruk.

🎯 Tujuan artikel ini: Kita akan menyelami dua strategi kunci untuk membangun koneksi WebSocket yang tangguh:

Heartbeat (Ping-Pong): Mekanisme untuk menjaga koneksi tetap hidup dan mendeteksi disonnect yang “diam-diam”.
Reconnection Otomatis: Cara cerdas untuk mencoba menyambungkan kembali koneksi yang terputus, memastikan aplikasi Anda pulih dan terus berjalan.

Dengan memahami dan mengimplementasikan strategi ini, Anda bisa membangun aplikasi real-time yang lebih stabil dan memberikan pengalaman pengguna yang mulus, bahkan di tengah ketidaksempurnaan jaringan.

2. Mengapa Koneksi WebSocket Sering Putus?

Sebelum kita masuk ke solusi, mari pahami dulu akar masalahnya. Koneksi WebSocket bisa terputus karena berbagai alasan:

Jaringan Tidak Stabil: Ini adalah penyebab paling umum. Pengguna mungkin beralih dari WiFi ke data seluler, melewati area dengan sinyal buruk, atau hanya mengalami gangguan sesaat pada koneksi internet mereka.
Idle Timeout: Banyak proxy, firewall, atau load balancer di antara klien dan server memiliki timeout untuk koneksi yang tidak aktif. Jika tidak ada data yang mengalir melalui koneksi WebSocket selama periode tertentu, perangkat ini bisa memutuskan koneksi untuk menghemat sumber daya.
Server Restart/Maintenance: Server Anda mungkin mengalami restart terjadwal, deployment baru, atau bahkan crash yang tidak terduga. Ini akan menyebabkan semua koneksi WebSocket yang terhubung ke server tersebut terputus.
Perubahan IP/Jaringan Klien: Saat perangkat klien berpindah jaringan (misalnya dari WiFi kantor ke WiFi rumah), alamat IP-nya bisa berubah, yang seringkali memutus koneksi yang ada.
Klien Menutup Tab/Browser: Ini adalah disconnect yang disengaja, tetapi aplikasi Anda tetap perlu menanganinya dengan baik.

Memahami skenario ini akan membantu kita merancang solusi yang efektif.

3. Strategi Heartbeat (Ping-Pong) untuk Menjaga Koneksi Tetap Hidup

Salah satu masalah terbesar adalah ketika koneksi terputus secara “diam-diam”. Artinya, baik klien maupun server tidak menyadari bahwa koneksi sebenarnya sudah mati karena tidak ada error yang langsung muncul. Di sinilah strategi heartbeat berperan.

💡 Konsep Heartbeat: Heartbeat adalah mekanisme di mana klien dan/atau server secara berkala mengirim pesan kecil (biasanya ping) ke sisi lain. Jika sisi lain menerima ping, ia akan membalas dengan pesan pong. Jika ping dikirim dan tidak ada pong yang diterima dalam waktu tertentu, maka koneksi dianggap mati.

✅ Manfaat Heartbeat:

Mencegah Idle Timeout: Dengan mengirim pesan secara berkala, koneksi tidak akan dianggap idle oleh proxy atau load balancer.
Mendeteksi Disconnect Diam-diam: Jika salah satu pihak gagal membalas ping, itu indikasi kuat bahwa koneksi telah terputus, bahkan jika event onclose belum terpicu.

Implementasi Heartbeat di Sisi Server (Node.js dengan `ws` library)

Kebanyakan library WebSocket modern sudah memiliki fitur heartbeat bawaan atau setidaknya API untuk mengimplementasikannya.

// server.js
const WebSocket = require('ws');

const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', function connection(ws) {
  ws.isAlive = true; // Menandai koneksi sebagai aktif

  ws.on('pong', function heartbeat() {
    ws.isAlive = true; // Reset status isAlive saat menerima pong
  });

  ws.on('message', function incoming(message) {
    console.log('received: %s', message);
    ws.send(`Echo: ${message}`);
  });

  ws.on('close', () => {
    console.log('Client disconnected');
  });

  ws.on('error', (error) => {
    console.error('WebSocket error:', error);
  });
});

// Interval untuk mengirim ping ke semua klien dan memeriksa status
const interval = setInterval(function ping() {
  wss.clients.forEach(function each(ws) {
    if (ws.isAlive === false) {
      console.log('Client did not respond to ping, terminating connection.');
      return ws.terminate(); // Jika tidak merespons, putuskan koneksi
    }

    ws.isAlive = false; // Set isAlive ke false, menunggu pong
    ws.ping(); // Kirim ping
  });
}, 30000); // Setiap 30 detik

wss.on('close', function close() {
  clearInterval(interval);
});

console.log('WebSocket server started on port 8080');

Keterangan: Server akan mengirim ping setiap 30 detik. Jika klien tidak membalas dengan pong sebelum interval berikutnya, server akan menganggap koneksi mati dan memutuskan paksa.

Implementasi Heartbeat di Sisi Klien (JavaScript)

Di sisi klien, kita juga bisa mengirim ping dan menerima pong.

// client.js (bagian dari kelas atau fungsi helper WebSocket)
let ws;
let heartbeatInterval;

function startHeartbeat(socket) {
  heartbeatInterval = setInterval(() => {
    if (socket.readyState === WebSocket.OPEN) {
      socket.send(JSON.stringify({ type: 'ping' })); // Kirim pesan ping
    }
  }, 25000); // Kirim ping setiap 25 detik (sedikit lebih cepat dari server)
}

function stopHeartbeat() {
  clearInterval(heartbeatInterval);
}

function connectWebSocket() {
  ws = new WebSocket('ws://localhost:8080');

  ws.onopen = () => {
    console.log('WebSocket Connected');
    startHeartbeat(ws); // Mulai heartbeat saat koneksi terbuka
  };

  ws.onmessage = (event) => {
    const message = JSON.parse(event.data);
    if (message.type === 'pong') {
      // console.log('Received pong from server');
      // Tidak perlu tindakan khusus, karena ini hanya menjaga koneksi tetap hidup
    } else {
      console.log('Received message:', message);
      // Proses pesan aplikasi lainnya
    }
  };

  ws.onclose = (event) => {
    console.log('WebSocket Disconnected:', event.code, event.reason);
    stopHeartbeat(); // Hentikan heartbeat saat koneksi tertutup
    // Di sini kita akan menambahkan logika reconnection
  };

  ws.onerror = (error) => {
    console.error('WebSocket Error:', error);
    // onclose akan dipanggil setelah onerror
  };
}

connectWebSocket();

Keterangan: Klien juga mengirim ping dan mendengarkan pong. Jika server tidak membalas pong atau jika koneksi tiba-tiba terputus, onclose akan terpicu.

📌 Tips Memilih Interval Heartbeat:

Pilih interval yang cukup sering untuk mencegah idle timeout (misalnya, di bawah 60 detik), tetapi tidak terlalu sering hingga membanjiri jaringan dengan pesan yang tidak perlu.
Sisi klien bisa mengirim ping sedikit lebih cepat dari server, atau sebaliknya, untuk saling memastikan koneksi tetap hidup.

4. Mendeteksi Disconnect dan Mengelola Status Koneksi

Setelah kita memiliki heartbeat untuk menjaga koneksi, langkah selanjutnya adalah mendeteksi ketika koneksi benar-benar terputus dan mengelola statusnya di aplikasi kita.

📌 Event Penting pada WebSocket API:

ws.onopen: Dipanggil ketika koneksi berhasil dibuat.
ws.onmessage: Dipanggil ketika pesan diterima dari server.
ws.onclose: Dipanggil ketika koneksi ditutup, baik secara sengaja oleh klien/server, maupun karena error jaringan. Event ini menyediakan code dan reason yang bisa membantu diagnosis.
ws.onerror: Dipanggil ketika terjadi error komunikasi. Biasanya, onclose akan mengikuti onerror.

⚠️ Pentingnya State Management: Dalam aplikasi yang kompleks, sangat penting untuk mengetahui status koneksi WebSocket saat ini. Apakah sedang terhubung? Terputus? Atau sedang mencoba menyambung kembali? Mengelola state ini akan memungkinkan Anda memberikan feedback yang tepat kepada pengguna (misalnya, menampilkan pesan “Connecting…” atau “Disconnected”) dan mencegah aplikasi mencoba mengirim data saat tidak ada koneksi.

Contoh state dasar: CONNECTED, DISCONNECTED, RECONNECTING.

5. Implementasi Reconnection Otomatis yang Cerdas

Ketika koneksi terputus, kita tidak bisa hanya pasrah. Kita perlu mencoba menyambungkannya kembali secara otomatis. Namun, melakukan reconnection secara naif bisa menimbulkan masalah baru.

❌ Masalah Reconnection Naif: Jika Anda mencoba menyambung kembali setiap 1 detik setelah disconnect, dan masalah jaringan sebenarnya belum teratasi, Anda akan:

Membajiri server: Setiap klien yang disconnect akan terus-menerus mencoba reconnect, menciptakan burst permintaan ke server.
Menguras baterai/data: Klien akan terus menggunakan sumber daya untuk mencoba koneksi yang gagal.

✅ Solusi: Exponential Backoff dengan Jitter

Ini adalah strategi yang umum dan efektif untuk reconnection:

Exponential Backoff: Alih-alih mencoba reconnect dengan interval tetap, kita meningkatkan waktu tunggu secara eksponensial setelah setiap percobaan yang gagal. Misalnya, 1 detik, lalu 2 detik, 4 detik, 8 detik, dan seterusnya, hingga batas maksimal. Ini memberikan waktu bagi jaringan untuk pulih dan mengurangi beban pada server.
Jitter: Untuk mencegah “thundering herd” (banyak klien mencoba reconnect pada saat yang sama setelah backoff yang sama), kita bisa menambahkan sedikit randomness (jitter) ke interval backoff. Misalnya, jika backoff adalah 8 detik, kita bisa mencoba reconnect antara 7,5 hingga 8,5 detik.

🎯 Contoh Implementasi Exponential Backoff di Klien:

// ... dalam fungsi connectWebSocket() atau kelas WebSocketClient
const MAX_RECONNECT_ATTEMPTS = 10;
const INITIAL_RECONNECT_DELAY_MS = 1000; // 1 detik
let reconnectAttempts = 0;
let reconnectTimeoutId;

function scheduleReconnect() {
  if (reconnectAttempts >= MAX_RECONNECT_ATTEMPTS) {
    console.warn('Max reconnect attempts reached. Giving up.');
    // Mungkin tampilkan pesan ke pengguna atau coba lagi nanti
    return;
  }

  const delay = Math.min(
    INITIAL_RECONNECT_DELAY_MS * Math.pow(2, reconnectAttempts),
    30000 // Batas maksimal delay 30 detik
  );
  const jitter = Math.random() * 0.5 * delay; // Tambahkan jitter hingga 50% dari delay
  const finalDelay = Math.floor(delay + jitter);

  console.log(`Attempting to reconnect in ${finalDelay / 1000} seconds... (Attempt ${reconnectAttempts + 1})`);
  reconnectTimeoutId = setTimeout(() => {
    reconnectAttempts++;
    connectWebSocket(); // Panggil ulang fungsi koneksi
  }, finalDelay);
}

function resetReconnectAttempts() {
  clearTimeout(reconnectTimeoutId);
  reconnectAttempts = 0;
}

// Modifikasi ws.onclose
ws.onclose = (event) => {
  console.log('WebSocket Disconnected:', event.code, event.reason);
  stopHeartbeat();
  if (event.code !== 1000) { // Kode 1000 berarti penutupan normal/disengaja
    scheduleReconnect();
  } else {
    resetReconnectAttempts(); // Jika penutupan normal, reset upaya
  }
};

// Modifikasi ws.onopen
ws.onopen = () => {
  console.log('WebSocket Connected');
  resetReconnectAttempts(); // Reset upaya saat berhasil terkoneksi
  startHeartbeat(ws);
};

6. Contoh Kode Komprehensif: WebSocket Client yang Tangguh

Mari kita gabungkan semua konsep di atas ke dalam satu kelas RobustWebSocketClient yang praktis.

// RobustWebSocketClient.js
class RobustWebSocketClient {
  constructor(url, options = {}) {
    this.url = url;
    this.options = {
      pingInterval: 25000, // Client ping every 25s
      reconnectInterval: 1000, // Initial reconnect delay 1s
      maxReconnectAttempts: 10,
      maxReconnectDelay: 30000, // Max 30s delay
      debug: true,
      ...options,
    };

    this.ws = null;
    this.isConnected = false;
    this.reconnectAttempts = 0;
    this.reconnectTimeoutId = null;
    this.heartbeatIntervalId = null;

    // Event listeners kustom
    this.onOpenCallback = () => {};
    this.onMessageCallback = () => {};
    this.onCloseCallback = () => {};
    this.onErrorCallback = () => {};
  }

  log(...args) {
    if (this.options.debug) {
      console.log('[RobustWebSocket]', ...args);
    }
  }

  connect() {
    this.log('Attempting to connect...');
    this.ws = new WebSocket(this.url);

    this.ws.onopen = () => {
      this.log('Connected!');
      this.isConnected = true;
      this.reconnectAttempts = 0;
      clearTimeout(this.reconnectTimeoutId);
      this.startHeartbeat();
      this.onOpenCallback();
    };

    this.ws.onmessage = (event) => {
      const message = JSON.parse(event.data);
      if (message.type === 'pong') {
        // this.log('Received pong');
      } else {
        this.onMessageCallback(message);
      }
    };

    this.ws.onclose = (event) => {
      this.log('Disconnected:', event.code, event.reason);
      this.isConnected = false;
      this.stopHeartbeat();
      this.onCloseCallback(event);

      if (event.code !== 1000) { // 1000 = Normal Closure
        this.scheduleReconnect();
      }
    };

    this.ws.onerror = (error) => {
      this.log('Error:', error);
      this.onErrorCallback(error);
      // onclose akan dipanggil setelah onerror
    };
  }

  send(data) {
    if (this.isConnected) {
      this.ws.send(JSON.stringify(data));
    } else {
      this.log('Cannot send message, WebSocket is not connected.');
    }
  }

  close(code = 1000, reason = 'Normal Closure') {
    this.log('Closing connection...');
    if (this.ws) {
      this.ws.close(code, reason);
    }
    this.stopHeartbeat();
    clearTimeout(this.reconnectTimeoutId);
    this.isConnected = false;
  }

  startHeartbeat() {
    this.heartbeatIntervalId = setInterval(() => {
      if (this.ws && this.ws.readyState === WebSocket.OPEN) {
        this.send({ type: 'ping' });
      }
    }, this.options.pingInterval);
  }

  stopHeartbeat() {
    clearInterval(this.heartbeatIntervalId);
  }

  scheduleReconnect() {
    if (this.reconnectAttempts >= this.options.maxReconnectAttempts) {
      this.log('Max reconnect attempts reached. Giving up.');
      return;
    }

    const delay = Math.min(
      this.options.reconnectInterval * Math.pow(2, this.reconnectAttempts),
      this.options.maxReconnectDelay
    );
    const jitter = Math.random() * 0.5 * delay; // 0-50% jitter
    const finalDelay = Math.floor(delay + jitter);

    this.reconnectAttempts++;
    this.log(`Attempting to reconnect in ${finalDelay / 1000} seconds... (Attempt ${this.reconnectAttempts})`);

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

  // Metode untuk mendaftarkan callback
  onOpen(callback) { this.onOpenCallback = callback; }
  onMessage(callback) { this.onMessageCallback = callback; }
  onClose(callback) { this.on