Maison > Article > interface Web > 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 :
2. Paramètres du projet
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
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
3. Paramètres du serveur
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'); });
Démarrez le serveur
Exécutez la commande suivante dans la ligne de commande pour Démarrez le serveur :
node server.js
IV. Paramètres du client
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;
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;
Exécutez l'application
Exécutez la commande suivante dans la ligne de commande pour démarrer l'application React :
npm start
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!