PricingLoginStart free
React Academy · Pelajaran

Penyambungan Kembali, Penanganan Kesalahan & Pembersihan

Tangani pemutusan koneksi dengan baik dan bersihkan listener socket dalam useEffect.

Pelajaran 4 dari 413 langkah

Penyambungan Kembali, Penanganan Kesalahan & Pembersihan adalah pelajaran React 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 React Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus React Academy mencakup 4 pelajaran total.

Mengapa Penyambungan Ulang Penting

Gangguan jaringan umum terjadi pada perangkat seluler. Tanpa logika penyambungan ulang, pengguna dapat kehilangan koneksi waktu nyata tanpa menyadarinya. Strategi yang baik akan mencoba kembali secara otomatis dengan jeda bertahap.

Penyambungan Ulang Otomatis Socket.IO

Socket.IO tersambung kembali secara otomatis secara bawaan. Konfigurasikan reconnectionAttempts, reconnectionDelay, dan reconnectionDelayMax dalam opsi io().

const socket = io('https://api.example.com', {
  reconnectionAttempts: 5,
  reconnectionDelay: 1000,       // initial delay
  reconnectionDelayMax: 10000,   // max delay (exponential backoff)
  randomizationFactor: 0.5,
});

Melacak Status Koneksi dalam React

Dengarkan peristiwa connect, disconnect, dan connect_error, lalu cerminkan statusnya dalam status komponen.

function useConnectionStatus() {
  const [status, setStatus] = useState<'connected' | 'disconnected' | 'error'>(
    socket.connected ? 'connected' : 'disconnected'
  );

  useEffect(() => {
    socket.on('connect', () => setStatus('connected'));
    socket.on('disconnect', () => setStatus('disconnected'));
    socket.on('connect_error', () => setStatus('error'));
    return () => {
      socket.off('connect');
      socket.off('disconnect');
      socket.off('connect_error');
    };
  }, []);

  return status;
}

Menampilkan Spanduk Penyambungan Ulang

Tampilkan spanduk saat soket terputus agar pengguna mengetahui bahwa mereka sedang luring dan penyambungan ulang sedang berlangsung.

function ConnectionBanner() {
  const status = useConnectionStatus();
  if (status === 'connected') return null;
  return (
    <div className="banner warning">
      {status === 'error' ? 'Connection failed' : 'Reconnecting...'}
    </div>
  );
}

Penyambungan Ulang Manual

Setelah percobaan ulang habis, izinkan pengguna memicu penyambungan ulang manual melalui button.

const [failed, setFailed] = useState(false);

socket.on('reconnect_failed', () => setFailed(true));

if (failed) {
  return (
    <button onClick={() => { setFailed(false); socket.connect(); }}>
      Retry connection
    </button>
  );
}

Penyambungan Ulang WebSocket Mentah

WebSocket mentah tidak memiliki penyambungan ulang bawaan. Terapkan penundaan eksponensial secara manual: saat koneksi ditutup, tunggu Math.min(delay * 2, maxDelay) sebelum mencoba koneksi baru.

function connectWithBackoff(url, attempt = 0) {
  const ws = new WebSocket(url);
  ws.onclose = () => {
    const delay = Math.min(1000 * 2 ** attempt, 30000);
    setTimeout(() => connectWithBackoff(url, attempt + 1), delay);
  };
  return ws;
}

Pembersihan dalam useEffect

Setiap pendengar soket yang ditambahkan dalam useEffect harus dihapus dalam fungsi pembersihan. Jika tidak, dapat terjadi kebocoran memori dan penanganan peristiwa duplikat.

useEffect(() => {
  const onData = (d) => setState(d);
  socket.on('data', onData);

  return () => {
    socket.off('data', onData); // remove specific handler reference
  };
}, []);

Menghindari Closure Kedaluwarsa pada Penangan

Saat penangan soket merujuk status atau properti, penangan tersebut menangkap closure yang sudah usang. Gunakan referensi untuk selalu mengakses nilai terbaru.

const handlerRef = useRef(null);
handlerRef.current = (msg) => updateMessages(messages, msg); // fresh ref each render

useEffect(() => {
  const onMsg = (...args) => handlerRef.current(...args);
  socket.on('message', onMsg);
  return () => socket.off('message', onMsg);
}, []); // no deps needed

Mengirim Pesan Tertunda saat Tersambung Kembali

Masukkan pesan keluar ke antrean saat terputus, lalu kirimkan seluruh antrean ketika koneksi tersambung kembali.

const queue = useRef<string[]>([]);

socket.on('connect', () => {
  while (queue.current.length) {
    socket.emit('message', queue.current.shift());
  }
});

function send(text: string) {
  if (socket.connected) socket.emit('message', text);
  else queue.current.push(text);
}

Bergabung Kembali ke Ruang setelah Tersambung Kembali

Socket.IO menghapus keanggotaan ruang saat terputus. Bergabung kembali ke ruang ketika soket tersambung kembali untuk memulihkan langganan.

useEffect(() => {
  function rejoin() { socket.emit('join-room', roomId); }
  socket.on('connect', rejoin);
  return () => socket.off('connect', rejoin);
}, [roomId]);

Penanganan Kesalahan Global

Tangani kesalahan yang tidak dapat dipulihkan dengan baik: tampilkan UI kesalahan dan tawarkan pemuatan ulang halaman sebagai upaya terakhir.

socket.on('connect_error', (err) => {
  console.error('Socket error:', err.message);
  // Show user-friendly error
});

Pemeriksaan Singkat

Apa risiko jika tidak menghapus pendengar peristiwa soket dalam pembersihan useEffect?

Jawab di pelajaran interaktif

Rangkuman

Konfigurasikan penyambungan ulang Socket.IO dengan opsi jeda bertahap. Cerminkan status koneksi dalam status React, tampilkan spanduk penyambungan ulang, bergabung kembali ke ruang setelah tersambung, dan selalu hapus pendengar dalam pembersihan useEffect. Antrekan pesan yang tertunda saat luring dan kirimkan seluruhnya ketika tersambung kembali.

Gratis untuk memulai

Belajar React dengan tutor AI — gratis

Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.

Kursus
88
Pelajaran
324
Mulai belajar gratisLihat kursus lengkapnya

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Penyambungan Kembali, Penanganan Kesalahan & Pembersihan” gratis?

Ya — teks lengkap “Penyambungan Kembali, Penanganan Kesalahan & Pembersihan” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus React Academy, upgrade ke CoddyKit PRO. Kursus React Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Penyambungan Kembali, Penanganan Kesalahan & Pembersihan”?

Tangani pemutusan koneksi dengan baik dan bersihkan listener socket dalam useEffect. Kamu berlatih React 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 React Academy?

Tidak diperlukan pengalaman sebelumnya. React 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 “Penyambungan Kembali, Penanganan Kesalahan & Pembersihan” 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 React Academy ini?

Ya. Setiap pelajaran React 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

  1. Dasar-Dasar WebSocket di Browser
  2. Menggunakan Socket.IO dengan React
  3. Membangun Komponen Obrolan Waktu Nyata
  4. Penyambungan Kembali, Penanganan Kesalahan & Pembersihan
← Kembali ke React Academy