Integration af Socket.io-klienten
Forbind Socket.io-klienten, lyt efter navngivne hændelser, send data til serveren, håndtér genforbindelseslogik, og administrér rooms fra klientsiden.
Integration af Socket.io-klienten er en gratis Frontend Academy-lektion på CoddyKit. Dette er lektion 2 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i Frontend Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Frontend Academy-kurset indeholder 4 lektioner i alt.
Hvad Socket.io tilføjer i forhold til rå WebSocket
Socket.io er et populært bibliotek oven på WebSocket. Det tilføjer: automatisk genforbindelse, alternativ transport med long-polling, rum/navnerum, kvitterings-callbacks og navngivne hændelser. Det kombinerer et klientbibliotek med et serverbibliotek (Node.js).
Installere klienten
Installér socket.io-client. Den skal passe med serverens hovedversion.
npm install socket.io-clientOprette forbindelse
Importér io, og opret forbindelse til en server-URL. Det returnerer en Socket-instans.
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));Udsende hændelser
socket.emit(eventName, payload) sender en navngiven hændelse med data — meget renere end rå send + JSON.parse.
socket.emit('chat-message', {
room: 'general',
text: 'Hello everyone!'
});
socket.emit('typing', { user: 'Alice' });Lytte til hændelser
socket.on(eventName, handler) registrerer en lytter. Hændelser, som serveren udsender, modtages her.
socket.on('chat-message', (msg) => {
console.log(`${msg.user}: ${msg.text}`);
appendMessage(msg);
});
socket.on('user-joined', (user) => {
console.log(`${user.name} joined`);
});Kvitteringer (ack-callbacks)
Overfør en callback som det sidste argument til emit — serveren kan kalde den med et svar. Det minder om RPC.
socket.emit('create-post', { title: 'Hello' }, (response) => {
if (response.error) {
console.error(response.error);
} else {
console.log('Created post', response.id);
}
});Promise-baseret emitWithAck
Moderne Socket.io har emitWithAck, som returnerer et promise.
try {
const response = await socket.emitWithAck('create-post', { title: 'Hello' });
console.log('Created', response.id);
} catch (err) {
console.error('Failed', err);
}Rum
Rum er serverbaserede grupperinger af sockets. Klienten går ind i og forlader rum ved at udsende hændelser; serveren bruger io.to(room).emit() til at udsende til alle.
// 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' });Navnerum
Navnerum er separate kommunikationskanaler på den samme server — f.eks. /chat og /admin. Opret forbindelse til et navnerum ved at tilføje det som suffiks til URL'en.
const chatSocket = io('https://api/chat');
const adminSocket = io('https://api/admin');Indbygget genforbindelse
Socket.io opretter automatisk forbindelse igen med eksponentiel ventetid. Det konfigureres via indstillinger.
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));Håndtering af afbrydelser
Lyt efter afbrydelse for at opdatere brugerfladen (vis et banner med teksten 'opretter forbindelse igen...').
socket.on('disconnect', (reason) => {
console.log('Disconnected:', reason);
if (reason === 'io server disconnect') {
// Server kicked us — must reconnect manually
socket.connect();
}
});Integration med React
Indkapsl socket-livscyklussen i et brugerdefineret hook eller en 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 };
}Hvornår skal du bruge Socket.io i stedet for rå WebSocket
Socket.io: når du vil have rum, kvitterings-callbacks, automatisk genforbindelse og alternativ transport indbygget fra start. Rå WebSocket: når du har brug for direkte kontrol over protokollen, en minimal bundle-størrelse eller interoperabilitet med en server, der ikke bruger Socket.io.
Hurtigt tjek
Hvad muliggør Socket.io's emit(event, payload, callback)-callback som tredje argument?
Opsummering: Socket.io-klient
Bibliotek oven på WebSocket med rum, navnerum, kvitteringer, automatisk genforbindelse og polling som alternativ transport. io(url, options) opretter forbindelse. emit(event, payload) sender navngivne hændelser; on(event, handler) lytter. En callback som tredje argument eller emitWithAck til RPC-lignende kommunikation. Rum håndteres via serveren, navnerum via URL-suffiks. Genforbindelse er indbygget. Indkapsl livscyklussen i et React-hook.
Lær HTML med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 41
- Lektioner
- 163
Ofte stillede spørgsmål
Er lektionen “Integration af Socket.io-klienten” gratis?
Ja — hele teksten til “Integration af Socket.io-klienten” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af Frontend Academy-kurset, skal du opgradere til CoddyKit PRO. Frontend Academy-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “Integration af Socket.io-klienten”?
Forbind Socket.io-klienten, lyt efter navngivne hændelser, send data til serveren, håndtér genforbindelseslogik, og administrér rooms fra klientsiden. Du øver dig i Frontend Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på Frontend Academy?
Der kræves ingen tidligere erfaring. Frontend Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 2 af 4.
Hvor lang tid tager lektionen “Integration af Socket.io-klienten”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne Frontend Academy-lektion?
Ja. Alle Frontend Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- WebSocket API: open, message, close og error
- Integration af Socket.io-klienten
- Server-Sent Events til envejs-streaming
- Mønstre til realtids-UI