0Pricing
React Academy · Lezione

Creazione di un componente chat in tempo reale

Visualizzi messaggi in tempo reale in una lista chat scorrevole utilizzando eventi WebSocket e lo stato React.

Creazione di un componente chat in tempo reale è una lezione React Academy gratuita su CoddyKit. Questa è la lezione 3 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.

Architettura del componente chat

Una chat in tempo reale ha tre parti: un elenco dei messaggi (visualizzazione), un input dei messaggi (invio) e il livello di connessione WebSocket/Socket.IO. Mantenga la logica del socket in un hook personalizzato.

Struttura dei dati dei messaggi

Definisca un’interfaccia TypeScript per i messaggi della chat, così da mantenere il componente tipizzato in modo sicuro.

interface Message {
  id: string;
  text: string;
  sender: string;
  timestamp: number;
}

const [messages, setMessages] = useState<Message[]>([]);

Hook useChat

Incapsuli connessione, stato dei messaggi e funzione di invio in un unico hook.

function useChat(roomId: string) {
  const [messages, setMessages] = useState<Message[]>([]);

  useEffect(() => {
    socket.connect();
    socket.emit('join-room', roomId);
    socket.on('message', (msg: Message) => setMessages(m => [...m, msg]));
    return () => {
      socket.off('message');
      socket.emit('leave-room', roomId);
      socket.disconnect();
    };
  }, [roomId]);

  const sendMessage = useCallback((text: string) => {
    const msg: Message = { id: crypto.randomUUID(), text, sender: 'me', timestamp: Date.now() };
    socket.emit('message', msg);
  }, []);

  return { messages, sendMessage };
}

Componente dell’elenco dei messaggi

Visualizzi i messaggi in un elenco scorrevole. Utilizzi useRef sull’elemento sentinella in fondo e scorra fino a esso quando arrivano nuovi messaggi.

function MessageList({ messages }: { messages: Message[] }) {
  const bottomRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    bottomRef.current?.scrollIntoView({ behavior: 'smooth' });
  }, [messages]);

  return (
    <div className="message-list">
      {messages.map(msg => (
        <div key={msg.id} className={`msg ${msg.sender === 'me' ? 'mine' : 'theirs'}`}>
          <span>{msg.sender}</span>
          <p>{msg.text}</p>
        </div>
      ))}
      <div ref={bottomRef} />
    </div>
  );
}

Componente di input dei messaggi

Utilizzi un input controllato che emette il messaggio alla pressione di Invio o al clic sul pulsante. Svuoti l’input dopo l’invio.

function MessageInput({ onSend }: { onSend: (text: string) => void }) {
  const [text, setText] = useState('');

  const handleSend = () => {
    if (!text.trim()) return;
    onSend(text.trim());
    setText('');
  };

  return (
    <div className="input-row">
      <input
        value={text}
        onChange={e => setText(e.target.value)}
        onKeyDown={e => e.key === 'Enter' && handleSend()}
        placeholder="Type a message..."
      />
      <button onClick={handleSend}>Send</button>
    </div>
  );
}

Assemblaggio dell’interfaccia della chat

Componi l’hook e i sottocomponenti in un componente ChatRoom.

function ChatRoom({ roomId }: { roomId: string }) {
  const { messages, sendMessage } = useChat(roomId);

  return (
    <div className="chat-room">
      <h2>Room: {roomId}</h2>
      <MessageList messages={messages} />
      <MessageInput onSend={sendMessage} />
    </div>
  );
}

Aggiornamenti ottimistici

Aggiunga immediatamente il messaggio allo stato locale, prima che il server lo confermi, per fornire un riscontro istantaneo. Corregga lo stato o rimuova il messaggio se il server restituisce un errore.

const sendMessage = useCallback((text: string) => {
  const optimistic: Message = { id: crypto.randomUUID(), text, sender: 'me', timestamp: Date.now() };
  setMessages(m => [...m, optimistic]); // instant feedback
  socket.emit('message', optimistic, (err) => {
    if (err) setMessages(m => m.filter(msg => msg.id !== optimistic.id));
  });
}, []);

Indicatori di digitazione

Emetta un evento typing quando cambia l’input (con debounce) e ascolti gli eventi di digitazione degli altri utenti per visualizzare un indicatore.

const emitTyping = useMemo(() => debounce(() => socket.emit('typing'), 300), []);

useEffect(() => {
  socket.on('user-typing', (user) => setTypingUser(user));
  return () => socket.off('user-typing');
}, []);

Timestamp dei messaggi

Formatti i timestamp con Intl.DateTimeFormat per visualizzarli in modo conforme alla lingua e alla regione.

function formatTime(ts: number) {
  return new Intl.DateTimeFormat('en', { hour: '2-digit', minute: '2-digit' }).format(ts);
}

<span className="timestamp">{formatTime(msg.timestamp)}</span>

Conferme di lettura

Emetta un evento read quando l’utente visualizza i messaggi e ascolti le conferme di lettura dal server per mostrare i segni di spunta.

Elenco virtualizzato dei messaggi

Per cronologie della chat molto lunghe, utilizzi react-window o react-virtual per virtualizzare l’elenco dei messaggi e visualizzare solo le righe visibili.

Limitazione della cronologia dei messaggi

Limiti l’array dei messaggi nello stato per prevenire una crescita illimitata dell’utilizzo di memoria nelle sessioni lunghe.

socket.on('message', (msg: Message) => {
  setMessages(prev => [...prev.slice(-499), msg]); // keep last 500
});

Verifica rapida

Qual è lo scopo di scorrere fino all’elemento div sentinella in fondo quando arrivano nuovi messaggi in un elenco della chat?

Riepilogo

Costruisca una chat in tempo reale con un hook useChat che incapsula la logica del socket, un MessageList con scorrimento automatico e un MessageInput che si svuota dopo l’invio. Utilizzi aggiornamenti ottimistici per un riscontro istantaneo e limiti la cronologia dei messaggi per evitare perdite di memoria.

Domande Frequenti

La lezione «Creazione di un componente chat in tempo reale» è gratuita?

Sì — il testo completo di «Creazione di un componente chat in tempo reale» è 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 «Creazione di un componente chat in tempo reale»?

Visualizzi messaggi in tempo reale in una lista chat scorrevole utilizzando eventi WebSocket e lo stato React. 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 3 di 4.

Quanto tempo richiede la lezione «Creazione di un componente chat in tempo reale»?

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