Comment créer une application de chat en temps réel avec React et WebSocket-js tutoriel-php.cn

Maison

interface Web

js tutoriel

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

PHPz

Sep 26, 2023 pm 07:46 PM

react websocket Chat en direct

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 :

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

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!

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undress AI Tool

Images de déshabillage gratuites

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Clothoff.io

Dissolvant de vêtements AI

Video Face Swap

Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !

Afficher plus

Article chaud

Porce de variable PHP expliquée

1 Il y a quelques mois By 百草

Commentant le code en php

4 Il y a quelques semaines By 百草

<🎜>: Grow A Garden - Guide complet des marchands itinérants

4 Il y a quelques semaines By Jack chen

Conseils pour écrire des commentaires PHP

4 Il y a quelques semaines By 百草

Destiny 2: The Edge of Fate - Comment fonctionnent les modificateurs de difficulté

4 Il y a quelques semaines By DDD

Afficher plus

Outils chauds

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Afficher plus

Sujets chauds

Tutoriel Laravel

1605

Tutoriel PHP

1510

276

Afficher plus

Related knowledge

L'écosystème de React: bibliothèques, outils et meilleures pratiques Apr 18, 2025 am 12:23 AM

L'écosystème React comprend des bibliothèques de gestion d'État (telles que Redux), des bibliothèques de routage (telles que Reactrouter), des bibliothèques de composants d'interface utilisateur (telles que Material-UI), des outils de test (tels que la plaisanterie) et de la construction d'outils (tels que WebPack). Ces outils fonctionnent ensemble pour aider les développeurs à développer et à maintenir efficacement les applications, à améliorer la qualité du code et l'efficacité de développement.

Frontend de Netflix: Exemples et applications de React (ou Vue) Apr 16, 2025 am 12:08 AM

Netflix utilise React comme cadre frontal. 1) Le modèle de développement composant de React et un écosystème fort sont les principales raisons pour lesquelles Netflix l'a choisi. 2) Grâce à la composante, Netflix divise les interfaces complexes en morceaux gérables tels que les lecteurs vidéo, les listes de recommandations et les commentaires des utilisateurs. 3) Le cycle de vie virtuel et composant virtuel de React optimise l'efficacité du rendu et la gestion de l'interaction des utilisateurs.

React: La puissance d'une bibliothèque JavaScript pour le développement Web Apr 18, 2025 am 12:25 AM

React est une bibliothèque JavaScript développée par Meta pour la création d'interfaces utilisateur, avec son cœur étant le développement des composants et la technologie DOM virtuelle. 1. Gestion des composants et de l'État: React gère l'état à travers les composants (fonctions ou classes) et les crochets (tels que UseState), améliorant la réutilisabilité et la maintenance du code. 2. Dom virtuel et optimisation des performances: via Virtual Dom, React met à jour efficacement le DOM réel pour améliorer les performances. 3. Cycle de vie et crochets: les crochets (tels que l'utilisation d'effet) permettent aux composants de la fonction de gérer les cycles de vie et d'effectuer des opérations à effet secondaire. 4. Exemple d'utilisation: des composants de Basic Helloworld à la gestion avancée de l'État mondial (UseContext et

L'avenir de React: Tendances et innovations dans le développement Web Apr 19, 2025 am 12:22 AM

L'avenir de React se concentrera sur l'ultime dans le développement des composants, l'optimisation des performances et l'intégration profonde avec d'autres piles technologiques. 1) React simplifiera encore la création et la gestion des composants et promouvra l'ultime dans le développement des composants. 2) L'optimisation des performances deviendra le centre d'attention, en particulier dans les grandes applications. 3) React sera profondément intégré à des technologies telles que GraphQL et TypeScript pour améliorer l'expérience de développement.

Développement frontal avec React: Avantages et techniques Apr 17, 2025 am 12:25 AM

Les avantages de React sont sa flexibilité et son efficacité, qui se reflètent dans: 1) la conception basée sur les composants améliore la réutilisabilité du code; 2) La technologie DOM virtuelle optimise les performances, en particulier lors de la gestion de grandes quantités de mises à jour de données; 3) L'écosystème riche fournit un grand nombre de bibliothèques et d'outils tiers. En comprenant comment React fonctionne et utilise des exemples, vous pouvez maîtriser ses concepts principaux et les meilleures pratiques pour créer une interface utilisateur efficace et maintenable.

Comprendre la fonction principale de React: la perspective du frontend Apr 18, 2025 am 12:15 AM

Les principales fonctions de React incluent la pensée composante, la gestion de l'État et le DOM virtuel. 1) L'idée de la composante permet de diviser l'interface utilisateur en parties réutilisables pour améliorer la lisibilité et la maintenabilité du code. 2) La gestion de l'État gère les données dynamiques via l'état et les accessoires, et les modifications déclenchent des mises à jour de l'interface utilisateur. 3) Performances d'optimisation virtuelle DOM, mettez à jour l'interface utilisateur à travers le calcul du fonctionnement minimum de la réplique DOM en mémoire.

React and Frontend Development: un aperçu complet Apr 18, 2025 am 12:23 AM

React est une bibliothèque JavaScript développée par Facebook pour créer des interfaces utilisateur. 1. Il adopte la technologie DOM composinalisée et virtuelle pour améliorer l'efficacité et les performances du développement de l'interface utilisateur. 2. Les concepts de base de la réact incluent la composante, la gestion de l'État (comme UseState et UseEffect) et le principe de travail du DOM virtuel. 3. Dans les applications pratiques, réagir les supports du rendu de base des composants au traitement avancé des données asynchrones. 4. Les erreurs courantes telles que l'oubli pour ajouter des attributs clés ou des mises à jour de statut incorrectes peuvent être déboguées via ReactDevTools et les journaux. 5. L'optimisation des performances et les meilleures pratiques incluent l'utilisation de react.memo, la segmentation du code et le maintien du code lisible et le maintien de la fiabilité

Utilisation de React avec HTML: Rendre des composants et des données Apr 19, 2025 am 12:19 AM

L'utilisation de HTML pour rendre les composants et les données dans React peut être réalisée via les étapes suivantes: L'utilisation de la syntaxe JSX: React utilise la syntaxe JSX pour intégrer les structures HTML dans du code JavaScript et exploite le DOM après compilation. Les composants sont combinés avec HTML: les composants React transmettent des données via des accessoires et générent dynamiquement le contenu HTML, tel que. Gestion du flux de données: le flux de données de React est unidirectionnel, passé du composant parent au composant enfant, garantissant que le flux de données est contrôlable, tels que les composants de l'application qui passent le nom à la salutation. Exemple d'utilisation de base: utilisez la fonction MAP pour rendre une liste, vous devez ajouter un attribut clé, tel que le rendu d'une liste de fruits. Exemple d'utilisation avancée: utilisez le crochet USESTATE pour gérer la dynamique de l'état et implémenter

See all articles