Création d'une application de discussion en temps réel avec WebSockets dans React

La communication en temps réel est devenue une fonctionnalité intégrante des applications Web modernes, en particulier dans les applications de chat. Les WebSockets offrent un moyen puissant de permettre une communication bidirectionnelle en temps réel entre un client et un serveur. Dans ce guide, nous expliquerons le processus de création d'une application de chat en temps réel à l'aide de WebSockets et React.

Prérequis
Avant de vous lancer, assurez-vous d'avoir les éléments suivants :

• Compréhension de base de React.
• Node.js installé sur votre machine.
• Un gestionnaire de paquets comme npm ou Yarn.
• Familiarité avec les concepts WebSocket.

Étape 1 : Configuration du backend
Nous avons besoin d'un serveur WebSocket pour gérer la communication en temps réel. Nous utiliserons Node.js avec le package ws.

1. Initialiser un projet Node.js :

mkdir chat-backend  
cd chat-backend  
npm init -y  

1. Installez le package ws :

npm install ws 

1. Créez un serveur WebSocket :

// server.js  
const WebSocket = require('ws');  

const wss = new WebSocket.Server({ port: 8080 });  

wss.on('connection', (ws) => {
    console.log('Client connected');  

    ws.on('message', (message) => {
        console.log(`Received: ${message}`);  
        // Broadcast the message to all clients
        wss.clients.forEach((client) => {
            if (client.readyState === WebSocket.OPEN) {
                client.send(message);  
            }
        });
    });  

    ws.on('close', () => {
        console.log('Client disconnected');  
    });
});  

console.log('WebSocket server running on ws://localhost:8080');  

1. Exécutez le serveur :

node server.js

Étape 2 : Configuration de l'interface React

1. Créez une nouvelle application React :

npx create-react-app chat-frontend  
cd chat-frontend  

1. Installer les dépendances pour WebSocket : Aucune dépendance supplémentaire n'est requise car l'API WebSocket native du navigateur sera utilisée.

Étape 3 : Création de l'interface de discussion

1. Créez un composant Chat :

// src/components/Chat.js  
import React, { useState, useEffect, useRef } from 'react';  

const Chat = () => {
    const [messages, setMessages] = useState([]);  
    const [input, setInput] = useState('');  
    const ws = useRef(null);  

    useEffect(() => {
        ws.current = new WebSocket('ws://localhost:8080');  

        ws.current.onmessage = (event) => {
            setMessages((prev) => [...prev, event.data]);  
        };  

        return () => {
            ws.current.close();  
        };
    }, []);  

    const sendMessage = () => {
        if (input.trim()) {
            ws.current.send(input);  
            setInput('');  
        }
    };  

    return (
        <div>



<ol>
<li>Use the Chat component in your App.js:
</li>
</ol>

<pre class="brush:php;toolbar:false">import React from 'react';  
import Chat from './components/Chat';  

function App() {
    return <Chat />;  
}  

export default App;  

1. Démarrez l'application React :

npm start  

Étape 4 : tester l'application

• Ouvrez votre application React dans plusieurs onglets ou appareils.
• Commencez à saisir des messages dans un seul onglet et observez-les apparaître en temps réel sur tous les clients connectés !

Améliorations supplémentaires
Pour préparer l'application pour la production, pensez à :

• Ajout de l'authentification utilisateur pour les messages personnalisés.
• Intégration d'une base de données pour stocker l'historique des discussions.
• Déploiement du serveur WebSocket et de l'application React sur des plateformes comme Vercel, Heroku ou AWS.

Conclusion
En tirant parti des WebSockets, nous avons créé une application de chat légère en temps réel à l'aide de React. Ce projet démontre la puissance des WebSockets pour la communication dynamique, utile dans diverses applications telles que les plateformes de messagerie, les jeux et les notifications en direct. Plongez plus profondément dans les protocoles WebSocket pour améliorer davantage votre application !

Bon codage ! ?

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!