0Pricing
React Academy · Ders

Gerçek Zamanlı Sohbet Bileşeni Oluşturma

WebSocket olaylarını ve React durumunu kullanarak canlı mesajları kayan bir sohbet listesinde görüntüleyin.

Gerçek Zamanlı Sohbet Bileşeni Oluşturma, CoddyKit'te ücretsiz bir React Academy dersidir. Bu, 4 dersinin 3. 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.

Sohbet Bileşeni Mimarisi

Gerçek zamanlı bir sohbetin üç bölümü vardır: bir mesaj listesi (görüntüleme), bir mesaj girdisi (gönderme) ve WebSocket/Socket.IO bağlantı katmanı. Socket mantığını özel bir kancada tutun.

Mesaj Veri Yapısı

Sohbet mesajlarının baştan sona tür güvenli kalması için bir TypeScript arayüzü tanımlayın.

interface Message {
  id: string;
  text: string;
  sender: string;
  timestamp: number;
}

const [messages, setMessages] = useState<Message[]>([]);

useChat Kancası

Bağlantıyı, mesaj durumunu ve gönderme işlevini tek bir kancada kapsülleyin.

function useChat(roomId: string) {
  const [messages, setMessages] = useState<Message[]>([]);

  useEffect(() => {
    socket.connect();
    socket.emit('join-room', roomId);
    socket.on('message', (msg: Message) => setMessages(m => [...m, msg]));
    return () => {
      socket.off('message');
      socket.emit('leave-room', roomId);
      socket.disconnect();
    };
  }, [roomId]);

  const sendMessage = useCallback((text: string) => {
    const msg: Message = { id: crypto.randomUUID(), text, sender: 'me', timestamp: Date.now() };
    socket.emit('message', msg);
  }, []);

  return { messages, sendMessage };
}

Mesaj Listesi Bileşeni

Mesajları kaydırılabilir bir listede oluşturun. Alt işaretçi üzerinde useRef kullanın ve yeni mesajlar geldiğinde listeyi ona kaydırın.

function MessageList({ messages }: { messages: Message[] }) {
  const bottomRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    bottomRef.current?.scrollIntoView({ behavior: 'smooth' });
  }, [messages]);

  return (
    <div className="message-list">
      {messages.map(msg => (
        <div key={msg.id} className={`msg ${msg.sender === 'me' ? 'mine' : 'theirs'}`}>
          <span>{msg.sender}</span>
          <p>{msg.text}</p>
        </div>
      ))}
      <div ref={bottomRef} />
    </div>
  );
}

Mesaj Girdisi Bileşeni

Enter tuşuna basıldığında veya button tıklandığında gönderim yapan denetimli bir girdi. Gönderdikten sonra girdiyi temizleyin.

function MessageInput({ onSend }: { onSend: (text: string) => void }) {
  const [text, setText] = useState('');

  const handleSend = () => {
    if (!text.trim()) return;
    onSend(text.trim());
    setText('');
  };

  return (
    <div className="input-row">
      <input
        value={text}
        onChange={e => setText(e.target.value)}
        onKeyDown={e => e.key === 'Enter' && handleSend()}
        placeholder="Type a message..."
      />
      <button onClick={handleSend}>Send</button>
    </div>
  );
}

Sohbet Arayüzünü Birleştirme

Kancayı ve alt bileşenleri bir ChatRoom bileşeninde birleştirin.

function ChatRoom({ roomId }: { roomId: string }) {
  const { messages, sendMessage } = useChat(roomId);

  return (
    <div className="chat-room">
      <h2>Room: {roomId}</h2>
      <MessageList messages={messages} />
      <MessageInput onSend={sendMessage} />
    </div>
  );
}

İyimser Güncellemeler

Sunucu onaylamadan önce mesajı yerel duruma hemen ekleyerek anında geri bildirim sağlayın. Sunucu hata döndürürse mesajı uzlaştırın veya kaldırın.

const sendMessage = useCallback((text: string) => {
  const optimistic: Message = { id: crypto.randomUUID(), text, sender: 'me', timestamp: Date.now() };
  setMessages(m => [...m, optimistic]); // instant feedback
  socket.emit('message', optimistic, (err) => {
    if (err) setMessages(m => m.filter(msg => msg.id !== optimistic.id));
  });
}, []);

Yazıyor Göstergeleri

Girdi değiştiğinde (gecikme uygulanarak) bir typing olayı yayınlayın ve bir gösterge görüntülemek için diğer kullanıcıların yazıyor olaylarını dinleyin.

const emitTyping = useMemo(() => debounce(() => socket.emit('typing'), 300), []);

useEffect(() => {
  socket.on('user-typing', (user) => setTypingUser(user));
  return () => socket.off('user-typing');
}, []);

Mesaj Zaman Damgaları

Zaman damgalarını yerel ayara uygun görüntülemek için Intl.DateTimeFormat ile biçimlendirin.

function formatTime(ts: number) {
  return new Intl.DateTimeFormat('en', { hour: '2-digit', minute: '2-digit' }).format(ts);
}

<span className="timestamp">{formatTime(msg.timestamp)}</span>

Okundu Bilgileri

Kullanıcı mesajları görüntülediğinde bir read olayı yayınlayın ve onay işaretlerini göstermek için sunucudan gelen okundu onaylarını dinleyin.

Sanallaştırılmış Mesaj Listesi

Uzun sohbet geçmişleri için mesaj listesini sanallaştırmak ve yalnızca görünür satırları oluşturmak üzere react-window veya react-virtual kullanın.

Mesaj Geçmişini Sınırlandırma

Uzun oturumlarda belleğin sınırsız büyümesini önlemek için durumdaki mesaj dizisini sınırlandırın.

socket.on('message', (msg: Message) => {
  setMessages(prev => [...prev.slice(-499), msg]); // keep last 500
});

Hızlı Kontrol

Bir sohbet listesine yeni mesajlar geldiğinde alt işaretçi öğesine kaydırmanın amacı nedir?

Özet

Socket mantığını kapsülleyen bir useChat kancası, kendiliğinden kaydırılan bir MessageList ve gönderimden sonra temizlenen bir MessageInput ile gerçek zamanlı sohbet oluşturun. Anında geri bildirim için iyimser güncellemeler kullanın ve bellek sızıntılarını önlemek üzere mesaj geçmişini sınırlandırın.

Sıkça Sorulan Sorular

“Gerçek Zamanlı Sohbet Bileşeni Oluşturma” dersi ücretsiz mi?

Evet — “Gerçek Zamanlı Sohbet Bileşeni Oluşturma” 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.

“Gerçek Zamanlı Sohbet Bileşeni Oluşturma” dersinde ne öğreneceğim?

WebSocket olaylarını ve React durumunu kullanarak canlı mesajları kayan bir sohbet listesinde görüntüleyin. 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 3. dersidir.

“Gerçek Zamanlı Sohbet Bileşeni Oluşturma” 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

  1. Tarayıcıda WebSocket Temelleri
  2. React ile Socket.IO Kullanımı
  3. Gerçek Zamanlı Sohbet Bileşeni Oluşturma
  4. Yeniden Bağlanma, Hata Yönetimi ve Temizleme
← React Academy Sayfasına Dön