JavaScript Academy · Pelajaran

Strategi Koneksi Ulang

Sambungkan kembali dengan andal setelah koneksi terputus.

Strategi Koneksi Ulang adalah pelajaran JavaScript Academy gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar JavaScript Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus JavaScript Academy mencakup 4 pelajaran total.

Mengapa Melakukan Koneksi Ulang?

Jaringan tidak selalu dapat diandalkan — Wi-Fi dapat terputus, laptop dapat masuk mode tidur, dan server dapat dimulai ulang. Klien WebSocket yang tangguh mendeteksi penutupan lalu secara otomatis membangun kembali koneksi agar pengalaman pengguna tetap lancar.

Koneksi Ulang Sederhana

Pendekatan paling sederhana langsung membuka kembali koneksi saat ditutup. Bahayanya: jika server sedang tidak aktif, pendekatan ini akan membebaninya dengan percobaan berulang dalam perulangan yang sangat cepat.

function connect() {
  const socket = new WebSocket(url);
  socket.onclose = () => connect(); // too aggressive!
}

Penundaan Tetap

Menambahkan penundaan konstan memang lebih lembut, tetapi tetap mengirim aliran percobaan secara teratur dan dapat membuat banyak klien tersinkronisasi (gerombolan yang menyerbu secara bersamaan).

socket.onclose = () => {
  setTimeout(connect, 3000);
};

Penundaan Eksponensial

Lipatgandakan waktu tunggu setelah setiap percobaan yang gagal: 1 d, 2 d, 4 d, 8 d… hingga dibatasi pada nilai maksimum. Cara ini menyebarkan percobaan ulang dan mengurangi beban server yang sedang kesulitan.

let attempt = 0;
function reconnect() {
  const delay = Math.min(1000 * 2 ** attempt, 30000);
  attempt++;
  setTimeout(connect, delay);
}

Menambahkan Keacakan

Acak sedikit penundaan agar ribuan klien tidak melakukan koneksi ulang pada saat yang sama. Keacakan penuh memilih nilai acak antara 0 dan batas yang telah dihitung.

function backoffWithJitter(attempt) {
  const cap = Math.min(1000 * 2 ** attempt, 30000);
  return Math.random() * cap;
}

Mengatur Ulang Saat Berhasil

Saat onopen dijalankan, atur ulang penghitung percobaan agar pemutusan berikutnya memulai penundaan dari awal.

socket.onopen = () => {
  attempt = 0;
  console.log("reconnected");
};

Klien dengan Koneksi Ulang Lengkap

Gabungkan semua bagian: sambungkan, atur ulang saat terbuka, dan gunakan penundaan saat ditutup.

let attempt = 0, socket;
function connect() {
  socket = new WebSocket(url);
  socket.onopen = () => { attempt = 0; };
  socket.onclose = () => {
    const delay = Math.min(1000 * 2 ** attempt++, 30000);
    setTimeout(connect, delay + Math.random() * 1000);
  };
}
connect();

Menangani Status Online/Offline

Dengarkan kejadian online/offline dari peramban. Jeda koneksi ulang saat offline dan picu percobaan segera ketika konektivitas kembali.

window.addEventListener("online", () => {
  attempt = 0;
  connect();
});
window.addEventListener("offline", () => {
  if (socket) socket.close();
});

Membatasi Percobaan

Secara opsional, batasi jumlah percobaan ulang dan tampilkan kegagalan permanen kepada pengguna, alih-alih mencoba selamanya.

const MAX = 10;
socket.onclose = () => {
  if (attempt >= MAX) { showOfflineBanner(); return; }
  setTimeout(connect, backoffWithJitter(attempt++));
};

Menyinkronkan Ulang Status Setelah Koneksi Kembali

Koneksi baru tidak memiliki konteks di sisi server. Saat koneksi dibuka kembali, berlangganan ulang ke kanal dan minta pesan apa pun yang terlewat selama terputus.

socket.onopen = () => {
  attempt = 0;
  socket.send(JSON.stringify({ type: "resubscribe", channels }));
  socket.send(JSON.stringify({ type: "sync", since: lastSeenId }));
};

Menghindari Socket Duplikat

Cegah pembukaan beberapa socket jika logika koneksi ulang dijalankan dua kali. Lacak socket saat ini dan abaikan penangan yang sudah usang.

function connect() {
  if (socket && socket.readyState <= WebSocket.OPEN) return;
  socket = new WebSocket(url);
}

Pemeriksaan Cepat

Uji rancangan koneksi ulang.

Rangkuman: Koneksi Ulang

Anda telah beralih dari koneksi ulang sederhana ke penundaan eksponensial dengan keacakan, mengatur ulang percobaan saat berhasil, menangani kejadian online/offline, membatasi percobaan ulang, menyinkronkan ulang status setelah koneksi kembali, dan menghindari socket duplikat. Klien Anda kini tangguh.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Strategi Koneksi Ulang” gratis?

Ya — teks lengkap “Strategi Koneksi Ulang” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus JavaScript Academy, upgrade ke CoddyKit PRO. Kursus JavaScript Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Strategi Koneksi Ulang”?

Sambungkan kembali dengan andal setelah koneksi terputus. Kamu berlatih JavaScript Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai JavaScript Academy?

Tidak diperlukan pengalaman sebelumnya. JavaScript Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.

Berapa lama pelajaran “Strategi Koneksi Ulang” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran JavaScript Academy ini?

Ya. Setiap pelajaran JavaScript Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke JavaScript Academy