Använda Socket.IO med React
Anslut till en Socket.IO-server från React, lyssna på events och skicka meddelanden från hooks.
Använda Socket.IO med React är en gratis lektion i React Academy på CoddyKit. Detta är lektion 2 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för React Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i React Academy innehåller totalt 4 lektioner.
Varför Socket.IO?
Socket.IO lägger till rum, namnrymder, automatisk återanslutning och händelsebaserad meddelandehantering ovanpå WebSockets, med HTTP long-polling som reserv — betydligt smidigare än rå WebSocket.
Installera klienten
Installera Socket.IO-klientpaketet.
npm install socket.io-clientSkapa en socket-instans
Anropa io(url) utanför React-komponenter så att anslutningen delas och inte skapas på nytt vid varje rendering. Exportera den som en 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,
});Ansluta i en useEffect
Anslut när komponenten monteras och koppla från när den avmonteras för att undvika kvarvarande anslutningar.
useEffect(() => {
socket.connect();
return () => {
socket.disconnect();
};
}, []);Lyssna på händelser
Använd socket.on('event', handler) för att prenumerera. Ta bort lyssnaren i rensningsfunktionen för att förhindra dubbla hanterare vid omrendering.
useEffect(() => {
function onMessage(data) {
setMessages(prev => [...prev, data]);
}
socket.on('message', onMessage);
return () => {
socket.off('message', onMessage);
};
}, []);Emitera händelser
Anropa socket.emit('event', data) för att skicka data till servern. Du kan även ange en callback (bekräftelse) som sista argument.
function sendMessage(text) {
socket.emit('message', { text, timestamp: Date.now() }, (ack) => {
console.log('Server acknowledged:', ack);
});
}Anpassad useSocket-hook
Samla logiken för socket-anslutningen i en anpassad hook så att den kan återanvändas i flera komponenter.
function useSocket(event, handler) {
useEffect(() => {
socket.on(event, handler);
return () => socket.off(event, handler);
}, [event, handler]);
}
// Usage:
useSocket('message', (data) => setMessages(m => [...m, data]));Rum och namnrymder
Gå med i ett rum genom att emitera en join-händelse (som hanteras på serversidan). Använd namnrymder (io('/chat')) för att segmentera socket-trafik på anslutningsnivå.
// Join a room
socket.emit('join-room', 'room-123');
// Connect to a namespace
const chatSocket = io('https://api.example.com/chat');Anslutningsstatus
Följ anslutningens tillstånd med händelserna connect, disconnect och 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-emitteringar
Använd socket.volatile.emit() för meddelanden där det är acceptabelt att enstaka paket går förlorade (till exempel markörpositioner eller spelstatus).
// Position updates — OK to lose some
function onMouseMove(e) {
socket.volatile.emit('cursor', { x: e.clientX, y: e.clientY });
}Socket.IO jämfört med rå WebSocket
Socket.IO lägger till rumshantering, namnrymder, automatisk återanslutning och stöd för binär data ovanpå WebSocket. Använd rå WebSocket om du behöver minimala omkostnader eller om servern inte stöder Socket.IO.
Snabbkontroll
Varför ska händelselyssnare för Socket.IO tas bort i rensningsfunktionen i useEffect?
Sammanfattning
Skapa en singleton-instans av socket med io(url, { autoConnect: false }). Anslut och koppla från i useEffect, ta alltid bort lyssnare i rensningsfunktionen och emitera händelser med socket.emit(). Samla logiken i en anpassad hook så att den kan återanvändas.
Lär dig React med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 88
- Lektioner
- 324
Vanliga frågor
Är lektionen ”Använda Socket.IO med React” gratis?
Ja – hela texten till ”Använda Socket.IO med React” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i React Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i React Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”Använda Socket.IO med React”?
Anslut till en Socket.IO-server från React, lyssna på events och skicka meddelanden från hooks. Ni övar på React Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig React Academy?
Du behöver inga förkunskaper. Utbildningen i React Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 2 av 4.
Hur lång tid tar lektionen ”Använda Socket.IO med React”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här React Academy-lektionen?
Ja. Varje React Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- Grunderna i WebSocket i webbläsaren
- Använda Socket.IO med React
- Bygga en realtidschattkomponent
- Återanslutning, felhantering och rensning