React Academy · leksjon

Bruke Socket.IO med React

Koble React til en Socket.IO-server, lytt etter events og send meldinger fra hooks.

Leksjon 2 av 413 trinn

Bruke Socket.IO med React er en gratis leksjon i React Academy på CoddyKit. Dette er leksjon 2 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i React Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i React Academy inneholder totalt 4 leksjoner.

Hvorfor Socket.IO?

Socket.IO legger til rom, namespaces, automatisk tilkobling på nytt og hendelsesbasert meldingsutveksling oppå WebSockets, med en reserve for HTTP long-polling – langt mer brukervennlig enn rå WebSocket.

Installere klienten

Installer Socket.IO-klientpakken.

npm install socket.io-client

Opprette en socket-instans

Kall io(url) utenfor React-komponenter slik at tilkoblingen deles og ikke opprettes på nytt ved hver rendering. Eksporter 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,
});

Koble til i useEffect

Koble til når komponenten monteres, og koble fra når den avmonteres, for å unngå hengende tilkoblinger.

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

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

Lytte etter hendelser

Bruk socket.on('event', handler) for å abonnere. Fjern lytteren i cleanup-funksjonen for å hindre dupliserte behandlere ved ny rendering.

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

  socket.on('message', onMessage);

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

Sende hendelser

Kall socket.emit('event', data) for å sende data til serveren. Du kan eventuelt oppgi en callback (bekreftelse) som siste argument.

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

Egen useSocket-hook

Samle logikken for socket-tilkoblingen i en egen hook, slik at den kan gjenbrukes på tvers av 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]));

Rooms og namespaces

Bli med i et rom ved å sende ut en join-hendelse (som håndteres på serversiden). Bruk namespaces (io('/chat')) for å segmentere socket-trafikken på tilkoblingsnivå.

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

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

Tilkoblingsstatus

Følg med på tilkoblingstilstanden ved hjelp av connect-, disconnect- og connect_error-hendelsene.

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

Bruk socket.volatile.emit() for meldinger der det er akseptabelt å miste enkelte pakker, for eksempel pekerposisjoner eller spilltilstand.

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

Socket.IO kontra rå WebSocket

Socket.IO legger til romhåndtering, namespaces, automatisk tilkobling på nytt og støtte for binærdata oppå WebSocket. Bruk rå WebSocket hvis du trenger minst mulig overhead, eller hvis serveren ikke støtter Socket.IO.

Kort sjekk

Hvorfor bør du fjerne Socket.IO-lyttere i cleanup-funksjonen til useEffect?

Besvar den i den interaktive leksjonen

Oppsummering

Opprett en singleton-socket-instans med io(url, { autoConnect: false }). Koble til og fra i useEffect, fjern alltid lyttere i cleanup, og send hendelser med socket.emit(). Samle logikken i en egen hook for gjenbruk.

Gratis å komme i gang

Lær deg React med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 88
Leksjoner: 324

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Bruke Socket.IO med React» gratis?

Ja – hele teksten i «Bruke Socket.IO med React» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av React Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i React Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Bruke Socket.IO med React»?

Koble React til en Socket.IO-server, lytt etter events og send meldinger fra hooks. Du øver på React Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med React Academy?

Ingen tidligere erfaring er nødvendig. React Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 2 av 4.

Hvor lang tid tar leksjonen «Bruke Socket.IO med React»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne React Academy-leksjonen?

Ja. Alle React Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

Grunnleggende om WebSocket i nettleseren
Bruke Socket.IO med React
Bygge en chatkomponent i sanntid
Gjenoppretting av tilkobling, feilhåndtering og opprydding

← Tilbake til React Academy