React Academy · Ders

React ile Socket.IO Kullanımı

React'tan bir Socket.IO sunucusuna bağlanın, olayları dinleyin ve hook'lar üzerinden mesaj yayınlayın.

React ile Socket.IO Kullanımı, CoddyKit'te ücretsiz bir React Academy dersidir. Bu, 4 dersinin 2. 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.

Socket.IO Neden Kullanılır?

Socket.IO, WebSockets üzerine odalar, ad alanları, otomatik yeniden bağlanma ve olay tabanlı mesajlaşma ekler; ayrıca HTTP uzun yoklamasına geri dönüş sağlar. Bu, ham WebSocket'ten çok daha kullanışlıdır.

İstemciyi Yükleme

Socket.IO istemci paketini yükleyin.

npm install socket.io-client

Socket Örneği Oluşturma

Bağlantının paylaşılması ve her oluşturmada yeniden oluşturulmaması için React bileşenlerinin dışında io(url) çağrısını yapın. Bunu tekil örnek olarak dışa aktarın.

// src/lib/socket.ts
import { io } from 'socket.io-client';

export const socket = io('https://api.example.com', {
  autoConnect: false, // connect manually
  withCredentials: true,
});

Bir useEffect İçinde Bağlanma

Sarkan bağlantıları önlemek için bileşen bağlandığında bağlanın ve kaldırıldığında bağlantıyı kesin.

useEffect(() => {
  socket.connect();

  return () => {
    socket.disconnect();
  };
}, []);

Olayları Dinleme

Abone olmak için socket.on('event', handler) kullanın. Yeniden oluşturmada yinelenen işleyicileri önlemek için dinleyiciyi temizleme işlevinde kaldırın.

useEffect(() => {
  function onMessage(data) {
    setMessages(prev => [...prev, data]);
  }

  socket.on('message', onMessage);

  return () => {
    socket.off('message', onMessage);
  };
}, []);

Olayları Yayınlama

Sunucuya veri göndermek için socket.emit('event', data) çağrısını yapın. İsteğe bağlı olarak son bağımsız değişken olarak bir geri çağırma işlevi (onay) sağlayabilirsiniz.

function sendMessage(text) {
  socket.emit('message', { text, timestamp: Date.now() }, (ack) => {
    console.log('Server acknowledged:', ack);
  });
}

Özel useSocket Kancası

Yeniden kullanım için socket bağlantısı mantığını özel bir kancada kapsülleyin.

function useSocket(event, handler) {
  useEffect(() => {
    socket.on(event, handler);
    return () => socket.off(event, handler);
  }, [event, handler]);
}

// Usage:
useSocket('message', (data) => setMessages(m => [...m, data]));

Odalar ve Ad Alanları

Bir katılma olayını yayınlayarak bir odaya katılın (bu olay sunucu tarafında ele alınır). Socket trafiğini bağlantı düzeyinde bölümlere ayırmak için ad alanlarını (io('/chat')) kullanın.

// Join a room
socket.emit('join-room', 'room-123');

// Connect to a namespace
const chatSocket = io('https://api.example.com/chat');

Bağlantı Durumu

Bağlantı durumunu connect, disconnect ve connect_error olaylarıyla izleyin.

const [isConnected, setIsConnected] = useState(socket.connected);

useEffect(() => {
  socket.on('connect', () => setIsConnected(true));
  socket.on('disconnect', () => setIsConnected(false));
  return () => {
    socket.off('connect');
    socket.off('disconnect');
  };
}, []);

Geçici Yayınlar

Ara sıra paket kaybının kabul edilebilir olduğu iletiler için socket.volatile.emit() kullanın (örneğin imleç konumları veya oyun durumu).

// Position updates — OK to lose some
function onMouseMove(e) {
  socket.volatile.emit('cursor', { x: e.clientX, y: e.clientY });
}

Socket.IO ve Ham WebSocket

Socket.IO, WebSocket üzerine oda yönetimi, ad alanları, otomatik yeniden bağlanma ve ikili veri desteği ekler. Ek yükün en az düzeyde olmasına ihtiyacınız varsa veya sunucu Socket.IO'yu desteklemiyorsa ham WebSocket kullanın.

Hızlı Kontrol

Socket.IO olay dinleyicilerini useEffect temizleme işlevinde neden kaldırmalısınız?

Özet

io(url, { autoConnect: false }) ile tekil bir socket örneği oluşturun. useEffect içinde bağlanın ve bağlantıyı kesin, temizleme sırasında dinleyicileri her zaman kaldırın ve olayları socket.emit() ile yayınlayın. Yeniden kullanım için mantığı özel bir kancada kapsülleyin.

Sıkça Sorulan Sorular

“React ile Socket.IO Kullanımı” dersi ücretsiz mi?

Evet — “React ile Socket.IO Kullanımı” 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.

“React ile Socket.IO Kullanımı” dersinde ne öğreneceğim?

React'tan bir Socket.IO sunucusuna bağlanın, olayları dinleyin ve hook'lar üzerinden mesaj yayınlayın. 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 2. dersidir.

“React ile Socket.IO Kullanımı” 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