React Academy · Ders

Yeniden Bağlanma, Hata Yönetimi ve Temizleme

Bağlantı kesilmelerini düzgün biçimde yönetin ve useEffect içinde socket dinleyicilerini temizleyin.

Yeniden Bağlanma, Hata Yönetimi ve Temizleme, CoddyKit'te ücretsiz bir React Academy dersidir. Bu, 4 dersinin 4. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, React Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. React Academy kursu toplamda 4 dersten oluşur.

Yeniden Bağlanma Neden Önemlidir?

Mobil cihazlarda ağ kesintileri yaygındır. Yeniden bağlanma mantığı olmadığında kullanıcılar gerçek zamanlı bağlantılarını sessizce kaybeder. İyi bir strateji, kademeli beklemeyle otomatik olarak yeniden denemektir.

Socket.IO ile Otomatik Yeniden Bağlanma

Socket.IO varsayılan olarak otomatik yeniden bağlanır. io() seçeneklerinde reconnectionAttempts, reconnectionDelay ve reconnectionDelayMax değerlerini yapılandırın.

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

React'te Bağlantı Durumunu İzleme

connect, disconnect ve connect_error olaylarını dinleyin ve status bilgisini bileşen durumuna yansıtın.

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;
}

Yeniden Bağlanma Bildirim Bandını Gösterme

Kullanıcıların çevrimdışı olduklarını ve yeniden bağlanma işleminin sürdüğünü bilmeleri için socket bağlantısı kesildiğinde bir bildirim bandı görüntüleyin.

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

Elle Yeniden Bağlanma

Yeniden denemeler tükendikten sonra kullanıcıların bir button aracılığıyla elle yeniden bağlanmasını sağlayın.

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

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

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

Ham WebSocket ile Yeniden Bağlanma

Ham WebSocket yerleşik yeniden bağlanma özelliğine sahip değildir. Üstel kademeli beklemeyi elle uygulayın: kapatma sonrasında yeni bir bağlantı denemeden önce Math.min(delay * 2, maxDelay) kadar bekleyin.

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;
}

useEffect İçinde Temizleme

Bir useEffect içinde eklenen her socket dinleyicisi temizleme işlevinde kaldırılmalıdır. Bunu yapmamak bellek sızıntılarına ve olayların yinelenen biçimde ele alınmasına neden olur.

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

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

İşleyicilerde Eski Kapanımlardan Kaçınma

Bir socket işleyicisi duruma veya özelliklere başvurduğunda eski bir kapanımı yakalar. En güncel değere her zaman erişmek için bir referans kullanın.

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

Yeniden Bağlanırken Bekleyen Mesajları Gönderme

Bağlantı kesikken giden iletileri queue'ya alın ve bağlantı yeniden kurulduğunda queue'yu boşaltın.

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);
}

Yeniden Bağlandıktan Sonra Odalara Yeniden Katılma

Socket.IO, bağlantı kesildiğinde oda üyeliklerini temizler. Abonelikleri geri yüklemek için socket yeniden bağlandığında odalara yeniden katılın.

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

Genel Hata İşleme

Kurtarılamayan hataları düzgün bir şekilde ele alın: bir hata arayüzü gösterin ve son çare olarak sayfayı yeniden yükleme seçeneği sunun.

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

Hızlı Kontrol

useEffect temizleme işlevinde bir socket olay dinleyicisini kaldırmamanın riski nedir?

Özet

Socket.IO yeniden bağlanmasını kademeli bekleme seçenekleriyle yapılandırın. Bağlantı status bilgisini React durumuna yansıtın, bir yeniden bağlanma bildirim bandı gösterin, yeniden bağlandıktan sonra odalara yeniden katılın ve useEffect temizleme sırasında dinleyicileri her zaman kaldırın. Çevrimdışıyken bekleyen iletileri queue'ya alın ve yeniden bağlanınca queue'yu boşaltın.

Sıkça Sorulan Sorular

“Yeniden Bağlanma, Hata Yönetimi ve Temizleme” dersi ücretsiz mi?

Evet — “Yeniden Bağlanma, Hata Yönetimi ve Temizleme” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve React Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. React Academy kursu toplamda 4 dersten oluşur.

“Yeniden Bağlanma, Hata Yönetimi ve Temizleme” dersinde ne öğreneceğim?

Bağlantı kesilmelerini düzgün biçimde yönetin ve useEffect içinde socket dinleyicilerini temizleyin. React Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

React Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te React Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 4. dersidir.

“Yeniden Bağlanma, Hata Yönetimi ve Temizleme” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu React Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her React Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

Tarayıcıda WebSocket Temelleri
React ile Socket.IO Kullanımı
Gerçek Zamanlı Sohbet Bileşeni Oluşturma
Yeniden Bağlanma, Hata Yönetimi ve Temizleme

← React Academy Sayfasına Dön