Socket.io-Client-Integration
Verbinden Sie den Socket.io-Client, reagieren Sie auf benannte Ereignisse, senden Sie Daten an den Server, behandeln Sie die Wiederverbindungslogik und verwalten Sie Räume clientseitig.
Socket.io-Client-Integration ist eine kostenlose Frontend 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 Frontend Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.
Was Socket.io gegenüber einem unveränderten WebSocket bietet
Socket.io ist eine beliebte Bibliothek auf Basis von WebSocket. Sie bietet automatische Wiederverbindung, Fallback auf Long-Polling, Räume/Namespaces, Bestätigungs-Callbacks und benannte Ereignisse. Client- und Server-Bibliothek (Node.js) werden als Paar verwendet.
Client installieren
Installieren Sie socket.io-client. Die Hauptversion muss mit der des Servers übereinstimmen.
npm install socket.io-clientVerbindung herstellen
Importieren Sie io und stellen Sie eine Verbindung zu einer Server-URL her. Gibt eine Socket-Instanz zurück.
import { io } from 'socket.io-client';
const socket = io('https://api.example.com', {
transports: ['websocket'], // skip polling fallback for speed
auth: { token: localStorage.getItem('jwt') }
});
socket.on('connect', () => console.log('connected', socket.id));Ereignisse auslösen
socket.emit(eventName, payload) sendet ein benanntes Ereignis mit Daten – deutlich übersichtlicher als unverändertes send + JSON.parse.
socket.emit('chat-message', {
room: 'general',
text: 'Hello everyone!'
});
socket.emit('typing', { user: 'Alice' });Ereignisse empfangen
socket.on(eventName, handler) registriert einen Listener. Vom Server ausgelöste Ereignisse kommen hier an.
socket.on('chat-message', (msg) => {
console.log(`${msg.user}: ${msg.text}`);
appendMessage(msg);
});
socket.on('user-joined', (user) => {
console.log(`${user.name} joined`);
});Bestätigungen (Ack-Callbacks)
Übergeben Sie als letztes Argument von emit einen Callback – der Server kann ihn mit einer Antwort aufrufen. Ähnlich wie bei RPC.
socket.emit('create-post', { title: 'Hello' }, (response) => {
if (response.error) {
console.error(response.error);
} else {
console.log('Created post', response.id);
}
});Promise-basiertes emitWithAck
Modernes Socket.io stellt emitWithAck bereit, das ein Promise zurückgibt.
try {
const response = await socket.emitWithAck('create-post', { title: 'Hello' });
console.log('Created', response.id);
} catch (err) {
console.error('Failed', err);
}Räume
Räume sind serverseitige Gruppierungen von Sockets. Der Client tritt ihnen bei bzw. verlässt sie, indem er Ereignisse sendet; der Server verwendet io.to(room).emit() zum Broadcast.
// Client:
socket.emit('join-room', { roomId: 'general' });
// Listen to messages in any room you've joined:
socket.on('room-message', ({ room, message }) => {
if (room === activeRoom) appendMessage(message);
});
// Leave:
socket.emit('leave-room', { roomId: 'general' });Namespaces
Namespaces sind separate Kommunikationskanäle auf demselben Server – z. B. /chat und /admin. Verbinden Sie sich mit einem Namespace, indem Sie die URL um das entsprechende Suffix ergänzen.
const chatSocket = io('https://api/chat');
const adminSocket = io('https://api/admin');Wiederverbindung integriert
Socket.io stellt automatisch mit exponentiellem Backoff die Verbindung wieder her. Konfigurieren Sie dies über Optionen.
const socket = io({
reconnection: true,
reconnectionAttempts: Infinity,
reconnectionDelay: 1000,
reconnectionDelayMax: 30000,
randomizationFactor: 0.5
});
socket.on('reconnect', (attempt) => console.log('reconnected after', attempt));
socket.on('reconnect_attempt', (attempt) => console.log('trying...', attempt));Trennungen behandeln
Hören Sie auf disconnect, um die UI zu aktualisieren, z. B. mit einem Banner „Wiederverbindung wird hergestellt …“.
socket.on('disconnect', (reason) => {
console.log('Disconnected:', reason);
if (reason === 'io server disconnect') {
// Server kicked us — must reconnect manually
socket.connect();
}
});React-Integration
Kapseln Sie den Lebenszyklus des Sockets in einem benutzerdefinierten Hook oder einem Context-Provider.
// useSocket.ts
import { useEffect, useState } from 'react';
import { io, Socket } from 'socket.io-client';
let socket: Socket;
export function useSocket() {
const [connected, setConnected] = useState(false);
useEffect(() => {
if (!socket) socket = io('/');
socket.on('connect', () => setConnected(true));
socket.on('disconnect', () => setConnected(false));
return () => { /* keep socket alive across remounts */ };
}, []);
return { socket, connected };
}Wann Socket.io und wann ein unveränderter WebSocket?
Socket.io: wenn Sie Räume, Ack-Callbacks, automatische Wiederverbindung und Transport-Fallback direkt integriert benötigen. Unveränderter WebSocket: wenn Sie die volle Kontrolle über das Protokoll, eine minimale Bundle-Größe oder Interoperabilität mit einem Server benötigen, der nicht Socket.io verwendet.
Kurze Wissensprüfung
Was ermöglicht der Callback als drittes Argument von Socket.ios emit(event, payload, callback)?
Zusammenfassung: Socket.io-Client
Bibliothek auf Basis von WebSocket: Räume, Namespaces, Acks, automatische Wiederverbindung und Polling-Fallback. io(url, options) stellt die Verbindung her. emit(event, payload) sendet benannte Ereignisse; on(event, handler) empfängt sie. Ein Callback als drittes Argument oder emitWithAck ermöglicht RPC-ähnliche Kommunikation. Räume werden serverseitig verwaltet, Namespaces über ein URL-Suffix festgelegt. Die Wiederverbindung ist integriert. Kapseln Sie den Lebenszyklus in einem React-Hook.
Lerne HTML mit einem KI-Tutor — kostenlos
Schreibe und führe echten Code in deinem Browser aus, bekomme sofortige Hilfe von einem 24/7 KI-Tutor und setze dein Lernen im Web oder in der App fort.
- Kurse
- 41
- Lektionen
- 163
Häufig gestellte Fragen
Ist die Lektion „Socket.io-Client-Integration“ kostenlos?
Ja — der vollständige Text von „Socket.io-Client-Integration“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Frontend Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Socket.io-Client-Integration“?
Verbinden Sie den Socket.io-Client, reagieren Sie auf benannte Ereignisse, senden Sie Daten an den Server, behandeln Sie die Wiederverbindungslogik und verwalten Sie Räume clientseitig. Du übst Frontend 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 Frontend Academy zu starten?
Keine Vorkenntnisse erforderlich. Frontend 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-Client-Integration“?
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 Frontend Academy-Lektion Code schreiben und ausführen?
Ja. Jede Frontend 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
- WebSocket API: open, message, close und error
- Socket.io-Client-Integration
- Server-Sent Events für unidirektionales Streaming
- Muster für Echtzeit-UIs