0Pricing
React Academy · Lektion

Eine Echtzeit-Chat-Component erstellen

Zeigen Sie Live-Nachrichten in einer scrollbaren Chatliste an, die WebSocket-Events und React-State verwendet.

Eine Echtzeit-Chat-Component erstellen ist eine kostenlose React Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des React Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der React Academy-Kurs umfasst insgesamt 4 Lektionen.

Architektur einer Chat-Komponente

Ein Echtzeit-Chat besteht aus drei Teilen: einer Nachrichtenliste (Anzeige), einem Nachrichteneingabefeld (Senden) und der WebSocket-/Socket.IO-Verbindungsschicht. Halten Sie die Socket-Logik in einem benutzerdefinierten Hook.

Struktur der Nachrichtendaten

Definieren Sie ein TypeScript-Interface für Chatnachrichten, damit die Komponente durchgehend typsicher bleibt.

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

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

useChat-Hook

Kapseln Sie Verbindung, Nachrichtenstatus und Sendefunktion in einem einzigen Hook.

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

Komponente für die Nachrichtenliste

Rendern Sie Nachrichten in einer scrollbaren Liste. Verwenden Sie useRef für das untere Sentinel-Element und scrollen Sie dorthin, wenn neue Nachrichten eintreffen.

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

Komponente für die Nachrichteneingabe

Verwenden Sie ein kontrolliertes Eingabefeld, das bei Enter oder einem Button-Klick ein Ereignis auslöst. Leeren Sie das Eingabefeld nach dem Senden.

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

Die Chat-UI zusammensetzen

Setzen Sie den Hook und die Unterkomponenten zu einer ChatRoom-Komponente zusammen.

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

Optimistische Aktualisierungen

Fügen Sie die Nachricht sofort zum lokalen Status hinzu, bevor der Server sie bestätigt, und geben Sie so direktes Feedback. Stimmen Sie den Status ab oder entfernen Sie die Nachricht, wenn der Server einen Fehler zurückgibt.

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));
  });
}, []);

Schreibindikatoren

Lösen Sie bei einer Änderung der Eingabe (mit Debouncing) ein typing-Ereignis aus und hören Sie auf die Schreibereignisse anderer Benutzer, um einen Indikator anzuzeigen.

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

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

Zeitstempel von Nachrichten

Formatieren Sie Zeitstempel mit Intl.DateTimeFormat, um sie an die jeweilige Region angepasst anzuzeigen.

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

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

Lesebestätigungen

Lösen Sie ein read-Ereignis aus, wenn der Benutzer Nachrichten ansieht, und hören Sie auf Lesebestätigungen vom Server, um Häkchen anzuzeigen.

Virtualisierte Nachrichtenliste

Verwenden Sie bei langen Chatverläufen react-window oder react-virtual, um die Nachrichtenliste zu virtualisieren und nur sichtbare Zeilen zu rendern.

Nachrichtenverlauf begrenzen

Begrenzen Sie das Nachrichtenarray im Status, um ein unbeschränktes Anwachsen des Speicherbedarfs in langen Sitzungen zu verhindern.

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

Kurztest

Welchen Zweck hat es, bei neuen Nachrichten in einer Chatliste zum unteren Sentinel-div zu scrollen?

Zusammenfassung

Erstellen Sie einen Echtzeit-Chat mit einem useChat-Hook, der die Socket-Logik kapselt, einer MessageList mit automatischem Scrollen und einer MessageInput, die beim Senden geleert wird. Verwenden Sie optimistische Aktualisierungen für direktes Feedback und begrenzen Sie den Nachrichtenverlauf, um Speicherlecks zu vermeiden.

Häufig gestellte Fragen

Ist die Lektion „Eine Echtzeit-Chat-Component erstellen“ kostenlos?

Ja — der vollständige Text von „Eine Echtzeit-Chat-Component erstellen“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des React Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der React Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Eine Echtzeit-Chat-Component erstellen“?

Zeigen Sie Live-Nachrichten in einer scrollbaren Chatliste an, die WebSocket-Events und React-State verwendet. Du übst React Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um React Academy zu starten?

Keine Vorkenntnisse erforderlich. React Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 4.

Wie lange dauert die Lektion „Eine Echtzeit-Chat-Component erstellen“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser React Academy-Lektion Code schreiben und ausführen?

Ja. Jede React Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

  1. WebSocket-Grundlagen im Browser
  2. Socket.IO mit React verwenden
  3. Eine Echtzeit-Chat-Component erstellen
  4. Wiederverbindung, Fehlerbehandlung und Cleanup
← Zurück zu React Academy