0Pricing
React Academy · Leçon

Créer un composant de discussion en temps réel

Affichez les messages en direct dans une liste de discussion déroulante avec les événements WebSocket et l’état React.

Créer un composant de discussion en temps réel est une leçon React Academy gratuite sur CoddyKit. Ceci est la leçon 3 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage React Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours React Academy comprend 4 leçons au total.

Architecture d’un composant de conversation

Une conversation en temps réel comporte trois parties : une liste de messages (affichage), un champ de saisie des messages (envoi) et une couche de connexion WebSocket/Socket.IO. Conservez la logique du socket dans un hook personnalisé.

Structure des données des messages

Définissez une interface TypeScript pour les messages de conversation afin de garantir la sûreté des types du composant partout.

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

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

Hook useChat

Encapsulez la connexion, l’état des messages et la fonction d’envoi dans un seul 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 };
}

Composant de liste de messages

Affichez les messages dans une liste déroulante. Utilisez useRef sur le marqueur sentinelle inférieur et faites défiler la liste jusqu’à lui lorsque de nouveaux messages arrivent.

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

Composant de saisie des messages

Un champ contrôlé qui émet un événement lorsque l’utilisateur appuie sur Entrée ou clique sur un bouton. Effacez le champ après l’envoi.

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

Assembler l’interface de conversation

Composez le hook et les sous-composants dans un composant 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>
  );
}

Mises à jour optimistes

Ajoutez immédiatement le message à l’état local, avant que le serveur ne le confirme, afin de fournir un retour instantané. Réconciliez-le ou supprimez-le si le serveur renvoie une erreur.

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));
  });
}, []);

Indicateurs de saisie

Émettez un événement typing lors de la modification du champ (après temporisation) et écoutez les événements de saisie des autres utilisateurs pour afficher un indicateur.

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

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

Horodatages des messages

Formatez les horodatages avec Intl.DateTimeFormat pour un affichage adapté aux paramètres régionaux.

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

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

Accusés de lecture

Émettez un événement read lorsque l’utilisateur consulte les messages et écoutez les confirmations de lecture du serveur pour afficher des coches.

Liste de messages virtualisée

Pour les longues historiques de conversation, utilisez react-window ou react-virtual afin de virtualiser la liste des messages et de ne rendre que les lignes visibles.

Limiter l’historique des messages

Limitez le tableau de messages dans l’état afin d’empêcher une croissance illimitée de la mémoire lors des longues sessions.

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

Vérification rapide

À quoi sert le défilement jusqu’à la div sentinelle inférieure lorsque de nouveaux messages arrivent dans une liste de conversation ?

Récapitulatif

Construisez une conversation en temps réel avec un hook useChat qui encapsule la logique du socket, un composant MessageList avec défilement automatique et un composant MessageInput qui s’efface après l’envoi. Utilisez des mises à jour optimistes pour un retour instantané et limitez l’historique des messages afin d’éviter les fuites de mémoire.

Questions Fréquemment Posées

La leçon « Créer un composant de discussion en temps réel » est-elle gratuite ?

Oui — le texte complet de « Créer un composant de discussion en temps réel » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours React Academy, passe à CoddyKit PRO. Le cours React Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Créer un composant de discussion en temps réel » ?

Affichez les messages en direct dans une liste de discussion déroulante avec les événements WebSocket et l’état React. Tu pratiques React Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer React Academy ?

Aucune expérience préalable n'est requise. React Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 4.

Combien de temps prend la leçon « Créer un composant de discussion en temps réel » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon React Academy ?

Oui. Chaque leçon React Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

  1. Fondamentaux de WebSocket dans le navigateur
  2. Utiliser Socket.IO avec React
  3. Créer un composant de discussion en temps réel
  4. Reconnexion, gestion des erreurs et nettoyage
← Retour à React Academy