Comment créer une application de chat en temps réel avec React et WebSocket

Comment créer une application de chat en temps réel à l'aide de React et WebSocket

Introduction :
Avec le développement rapide d'Internet, la communication en temps réel a attiré de plus en plus d'attention. Les applications de chat en direct font désormais partie intégrante de la vie sociale et professionnelle moderne. Cet article expliquera comment créer une application simple de chat en temps réel à l'aide de React et WebSocket, et fournira des exemples de code spécifiques.

1. Préparation technique
Avant de commencer à créer une application de chat en temps réel, nous devons préparer les technologies et outils suivants :

1. React : une bibliothèque JavaScript pour créer des interfaces utilisateur.
2. WebSocket : un protocole basé sur TCP utilisé pour la communication en temps réel entre les clients et les serveurs.
3. Node.js : un environnement d'exécution JavaScript basé sur le moteur Chrome V8.
4. Express.js : Un framework d'application Web Node.js simple et flexible.
5. Socket.IO : une bibliothèque basée sur WebSocket pour une communication bidirectionnelle en temps réel.

2. Paramètres du projet

1. Créer une application React
   Utilisez la commande create-react-app dans la ligne de commande pour créer une nouvelle application React :

   npx create-react-app chat-app

   Copier après la connexion

2. Installation des dépendances
   Entrez le répertoire du projet et installez ce qui suit dépendances :

   cd chat-app
   npm install socket.io-client express

   Copier après la connexion

3. Paramètres du serveur

1. Créer un fichier serveur
   Créez un fichier nommé server.js et ajoutez le code suivant :

   const express = require('express');
   const http = require('http');
   const app = express();
   const server = http.createServer(app);
   const io = require('socket.io')(server);
   
   io.on('connection', (socket) => {
     console.log('a user connected');
   
     socket.on('disconnect', () => {
    console.log('user disconnected');
     });
   
     socket.on('chat message', (msg) => {
    io.emit('chat message', msg);
     });
   });
   
   server.listen(4000, () => {
     console.log('listening on *:4000');
   });

   Copier après la connexion

2. Démarrez le serveur
   Exécutez la commande suivante dans la ligne de commande pour Démarrez le serveur ：

   node server.js

   Copier après la connexion

IV. Paramètres du client

1. Créer un composant de chat
   Créez un fichier nommé Chat.js dans le répertoire src et ajoutez le code suivant :

   import React, { useState, useEffect } from 'react';
   import io from 'socket.io-client';
   
   const socket = io('http://localhost:4000');
   
   const Chat = () => {
     const [messages, setMessages] = useState([]);
     const [message, setMessage] = useState('');
   
     useEffect(() => {
    socket.on('chat message', (msg) => {
      setMessages([...messages, msg]);
    });
     }, [messages]);
   
     const handleSendMessage = () => {
    socket.emit('chat message', message);
    setMessage('');
     };
   
     return (
    <div>
      <div>
        {messages.map((msg, index) => (
          <p key={index}>{msg}</p>
        ))}
      </div>
      <input
        type="text"
        value={message}
        onChange={(e) => setMessage(e.target.value)}
      />
      <button onClick={handleSendMessage}>Send</button>
    </div>
     );
   };
   
   export default Chat;

   Copier après la connexion

2. Utiliser le chat dans App.js Composant
   Dans le fichier App.js du répertoire src, ajoutez le code suivant au code d'origine :

   import React from 'react';
   import Chat from './Chat';
   
   const App = () => {
     return (
    <div>
      <h1>Real-time Chat Application</h1>
      <Chat />
    </div>
     );
   };
   
   export default App;

   Copier après la connexion

3. Exécutez l'application
   Exécutez la commande suivante dans la ligne de commande pour démarrer l'application React :

   npm start

   Copier après la connexion

5 . Application de test
Ouvrez http://localhost:3000 dans le navigateur, vous pouvez voir une interface de discussion simple en temps réel. Saisissez un message dans la zone de saisie et cliquez sur le bouton Envoyer pour envoyer le message et l'afficher sur l'interface de chat en temps réel.

Conclusion :
Cet article explique comment créer une application de chat en temps réel à l'aide de React et WebSocket. En utilisant React pour créer l'interface frontale et en communiquant en temps réel via WebSocket, nous pouvons facilement créer une simple application de chat en temps réel. J'espère que cet article vous aidera à comprendre comment créer une application de chat en temps réel.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!