0Pricing
React Academy · Lezione

Utilizzo di Socket.IO con React

Si connetta a un server Socket.IO da React, ascolti gli eventi ed emetta messaggi dagli hook.

Utilizzo di Socket.IO con React è una lezione React Academy gratuita su CoddyKit. Questa è la lezione 2 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento React Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso React Academy include 4 lezioni in totale.

Perché Socket.IO

Socket.IO aggiunge room, namespace, riconnessione automatica e messaggistica basata sugli eventi sopra WebSocket, con un fallback al long polling HTTP: è molto più pratico rispetto a WebSocket utilizzato direttamente.

Installazione del client

Installi il pacchetto client di Socket.IO.

npm install socket.io-client

Creazione di un’istanza socket

Chiami io(url) al di fuori dei componenti React, in modo che la connessione sia condivisa e non venga ricreata a ogni rendering. La esporti come 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,
});

Connessione in un useEffect

Si connetta quando il componente viene montato e disconnetta quando viene smontato, per evitare connessioni lasciate aperte.

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

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

Ascolto degli eventi

Utilizzi socket.on('event', handler) per effettuare la sottoscrizione. Rimuova l’ascoltatore nella funzione di cleanup per evitare gestori duplicati dopo un nuovo rendering.

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

  socket.on('message', onMessage);

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

Emissione degli eventi

Chiami socket.emit('event', data) per inviare dati al server. Facoltativamente, fornisca una callback (acknowledgement) come ultimo argomento.

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

Hook useSocket personalizzato

Incapsuli la logica della connessione socket in un hook personalizzato per poterla riutilizzare tra più componenti.

function useSocket(event, handler) {
  useEffect(() => {
    socket.on(event, handler);
    return () => socket.off(event, handler);
  }, [event, handler]);
}

// Usage:
useSocket('message', (data) => setMessages(m => [...m, data]));

Room e namespace

Entri in una room emettendo un evento di join, gestito lato server. Utilizzi i namespace (io('/chat')) per segmentare il traffico socket a livello di connessione.

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

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

Stato della connessione

Rilevi lo stato della connessione tramite gli eventi connect, disconnect e 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');
  };
}, []);

Emissioni volatile

Utilizzi socket.volatile.emit() per i messaggi per i quali è accettabile perdere occasionalmente alcuni pacchetti (ad esempio, posizioni del cursore o stato del gioco).

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

Socket.IO e WebSocket diretto

Socket.IO aggiunge la gestione delle room, i namespace, la riconnessione automatica e il supporto binario sopra WebSocket. Utilizzi WebSocket diretto se ha bisogno del minimo overhead o se il server non supporta Socket.IO.

Verifica rapida

Perché è necessario rimuovere gli ascoltatori degli eventi Socket.IO nel cleanup di useEffect?

Riepilogo

Crei un’istanza singleton socket con io(url, { autoConnect: false }). Si connetta e disconnetta in useEffect, rimuova sempre gli ascoltatori nel cleanup ed emetta gli eventi con socket.emit(). Incapsuli la logica in un hook personalizzato per poterla riutilizzare.

Domande Frequenti

La lezione «Utilizzo di Socket.IO con React» è gratuita?

Sì — il testo completo di «Utilizzo di Socket.IO con React» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso React Academy, passa a CoddyKit PRO. Il corso React Academy include 4 lezioni in totale.

Cosa imparerò in «Utilizzo di Socket.IO con React»?

Si connetta a un server Socket.IO da React, ascolti gli eventi ed emetta messaggi dagli hook. Eserciti React Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare React Academy?

Non è richiesta alcuna esperienza precedente. React Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 4.

Quanto tempo richiede la lezione «Utilizzo di Socket.IO con React»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione React Academy?

Sì. Ogni lezione React Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

  1. Fondamenti dei WebSocket nel browser
  2. Utilizzo di Socket.IO con React
  3. Creazione di un componente chat in tempo reale
  4. Riconnessione, gestione degli errori e pulizia
← Torna a React Academy