PricingLoginStart free
Frontend Academy · Lektion

Klientintegration med Socket.io

Anslut Socket.io-klienten, lyssna på namngivna händelser, skicka data till servern, hantera återanslutningslogik och administrera rum från klientsidan.

Lektion 2 av 415 steg

Klientintegration med Socket.io är en gratis lektion i Frontend 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 Frontend Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Frontend Academy innehåller totalt 4 lektioner.

Vad Socket.io lägger till jämfört med en ren WebSocket

Socket.io är ett populärt bibliotek ovanpå WebSocket. Det lägger till automatisk återanslutning, fallback till long-polling, rum och namnrymder, callback-funktioner för bekräftelser samt namngivna händelser. Ett klientbibliotek används tillsammans med ett serverbibliotek (Node.js).

Installera klienten

Installera socket.io-client. Huvudversionen måste vara samma som på servern.

npm install socket.io-client

Ansluta

Importera io och anslut till en server-URL. Det returnerar 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));

Skicka händelser

socket.emit(eventName, payload) skickar en namngiven händelse med data – betydligt renare än att använda raw send tillsammans med JSON.parse.

socket.emit('chat-message', {
  room: 'general',
  text: 'Hello everyone!'
});

socket.emit('typing', { user: 'Alice' });

Lyssna på händelser

socket.on(eventName, handler) registrerar en lyssnare. Händelser som servern skickar anländer här.

socket.on('chat-message', (msg) => {
  console.log(`${msg.user}: ${msg.text}`);
  appendMessage(msg);
});

socket.on('user-joined', (user) => {
  console.log(`${user.name} joined`);
});

Bekräftelser (ack-callbacks)

Skicka en callback-funktion som sista argument till emit – servern kan anropa den med ett svar. Det fungerar ungefär som RPC.

socket.emit('create-post', { title: 'Hello' }, (response) => {
  if (response.error) {
    console.error(response.error);
  } else {
    console.log('Created post', response.id);
  }
});

Promise-baserad emitWithAck

Moderna versioner av Socket.io tillhandahåller emitWithAck, som returnerar ett promise.

try {
  const response = await socket.emitWithAck('create-post', { title: 'Hello' });
  console.log('Created', response.id);
} catch (err) {
  console.error('Failed', err);
}

Rum

Rum är grupperingar av sockets på serversidan. Klienten går med i och lämnar rum genom att skicka händelser; servern använder io.to(room).emit() för att sända till alla i rummet.

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

Namnrymder

Namnrymder är separata kommunikationskanaler på samma server – till exempel /chat och /admin. Anslut till en namnrymd genom att lägga till dess suffix i URL:en.

const chatSocket = io('https://api/chat');
const adminSocket = io('https://api/admin');

Inbyggd återanslutning

Socket.io återansluter automatiskt med exponentiell backoff. Konfigurera detta via alternativen.

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

Hantera frånkoppling

Lyssna efter disconnect för att uppdatera gränssnittet (visa en banner med texten 'ansluter igen...').

socket.on('disconnect', (reason) => {
  console.log('Disconnected:', reason);
  if (reason === 'io server disconnect') {
    // Server kicked us — must reconnect manually
    socket.connect();
  }
});

React-integrering

Kapsla in socket-livscykeln i en egen 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 };
}

När ska Socket.io användas i stället för en ren WebSocket?

Socket.io: när rum, ack-callbacks, automatisk återanslutning och transport-fallback ska finnas direkt. Ren WebSocket: när detaljerad kontroll över protokollet, minimal paketstorlek eller interoperabilitet med en server som inte använder Socket.io behövs.

Snabbtest

Vad möjliggör callback-funktionen som är det tredje argumentet i Socket.io:s emit(event, payload, callback)?

Besvara frågan i den interaktiva lektionen

Sammanfattning: Socket.io-klienten

Bibliotek ovanpå WebSocket med rum, namnrymder, bekräftelser, automatisk återanslutning och polling-fallback. io(url, options) ansluter. emit(event, payload) skickar namngivna händelser och on(event, handler) lyssnar. Callback som tredje argument eller emitWithAck används för RPC-liknande anrop. Rum hanteras via servern och namnrymder anges som suffix i URL:en. Återanslutning är inbyggd. Kapsla in livscykeln i en React-hook.

Gratis att börja

Lär dig HTML 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
41
Lektioner
163
Börja lära dig gratisVisa hela kursen

Vanliga frågor

Är lektionen ”Klientintegration med Socket.io” gratis?

Ja – hela texten till ”Klientintegration med Socket.io” 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 Frontend Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i Frontend Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Klientintegration med Socket.io”?

Anslut Socket.io-klienten, lyssna på namngivna händelser, skicka data till servern, hantera återanslutningslogik och administrera rum från klientsidan. Ni övar på Frontend 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 Frontend Academy?

Du behöver inga förkunskaper. Utbildningen i Frontend 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 ”Klientintegration med Socket.io”?

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 Frontend Academy-lektionen?

Ja. Varje Frontend 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

  1. WebSocket API: open, message, close och error
  2. Klientintegration med Socket.io
  3. Server-Sent Events för enkelriktad strömning
  4. Mönster för realtidsgränssnitt
← Tillbaka till Frontend Academy