0Pricing
React Academy · Lektion

Socket.IO mit React verwenden

Verbinden Sie React mit einem Socket.IO-Server, empfangen Sie Events und senden Sie Nachrichten aus Hooks.

Socket.IO mit React verwenden ist eine kostenlose React Academy-Lektion auf CoddyKit. Dies ist Lektion 2 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.

Warum Socket.IO?

Socket.IO ergänzt WebSockets um Räume, Namespaces, automatische Wiederverbindung und ereignisbasierte Nachrichtenübertragung. Bei Bedarf kann auf HTTP-Long-Polling zurückgegriffen werden – das ist deutlich komfortabler als ein unveränderter WebSocket.

Den Client installieren

Installieren Sie das Socket.IO-Client-Paket.

npm install socket.io-client

Eine Socket-Instanz erstellen

Rufen Sie io(url) außerhalb von React-Komponenten auf, damit die Verbindung gemeinsam genutzt und nicht bei jedem Rendern neu erstellt wird. Exportieren Sie sie als Singleton.

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

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

In einem useEffect verbinden

Stellen Sie die Verbindung her, wenn die Komponente eingebunden wird, und trennen Sie sie, wenn sie entfernt wird, um verwaiste Verbindungen zu vermeiden.

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

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

Auf Ereignisse hören

Verwenden Sie socket.on('event', handler), um sich zu registrieren. Entfernen Sie den Listener in der Cleanup-Funktion, um bei erneuten Renderings doppelte Handler zu verhindern.

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

  socket.on('message', onMessage);

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

Ereignisse auslösen

Rufen Sie socket.emit('event', data) auf, um Daten an den Server zu senden. Optional können Sie als letztes Argument einen Callback (eine Bestätigung) übergeben.

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

Benutzerdefinierter useSocket-Hook

Kapseln Sie die Logik für die Socket-Verbindung in einem benutzerdefinierten Hook, damit sie in mehreren Komponenten wiederverwendet werden kann.

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

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

Räume und Namespaces

Treten Sie einem Raum bei, indem Sie ein Join-Ereignis auslösen (serverseitig verarbeitet). Verwenden Sie Namespaces (io('/chat')), um den Socket-Datenverkehr auf Verbindungsebene zu segmentieren.

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

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

Verbindungsstatus

Verfolgen Sie den Verbindungsstatus mit den Ereignissen connect, disconnect und connect_error.

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

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

Volatile Emits

Verwenden Sie socket.volatile.emit() für Nachrichten, bei denen der gelegentliche Verlust von Paketen akzeptabel ist (z. B. Cursorpositionen oder Spielstatus).

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

Socket.IO im Vergleich zu unverändertem WebSocket

Socket.IO ergänzt WebSocket um Raumverwaltung, Namespaces, automatische Wiederverbindung und Binärunterstützung. Verwenden Sie einen unveränderten WebSocket, wenn Sie möglichst wenig Overhead benötigen oder der Server Socket.IO nicht unterstützt.

Kurztest

Warum sollten Sie Socket.IO-Event-Listener im Cleanup von useEffect entfernen?

Zusammenfassung

Erstellen Sie mit io(url, { autoConnect: false }) eine Singleton-Instanz von socket. Verbinden und trennen Sie die Verbindung in useEffect, entfernen Sie Listener immer im Cleanup und lösen Sie Ereignisse mit socket.emit() aus. Kapseln Sie die Logik zur Wiederverwendung in einem benutzerdefinierten Hook.

Häufig gestellte Fragen

Ist die Lektion „Socket.IO mit React verwenden“ kostenlos?

Ja — der vollständige Text von „Socket.IO mit React verwenden“ 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 „Socket.IO mit React verwenden“?

Verbinden Sie React mit einem Socket.IO-Server, empfangen Sie Events und senden Sie Nachrichten aus Hooks. 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 2 von 4.

Wie lange dauert die Lektion „Socket.IO mit React verwenden“?

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