Comment utiliser React et WebSocket pour implémenter des fonctions de communication en temps réel

Comment implémenter une fonction de communication en temps réel à l'aide de React et WebSocket

Aperçu :
Dans les applications Web modernes, la communication en temps réel est devenue très importante. De nombreuses applications doivent pouvoir obtenir et mettre à jour des données en temps réel afin d'afficher les dernières informations aux utilisateurs en temps opportun. Dans cet article, nous présenterons comment utiliser React et WebSocket pour implémenter des capacités de communication en temps réel. Nous montrerons comment créer une application de chat en temps réel à l'aide de WebSocket et fournirons des exemples de code spécifiques.

Qu'est-ce que WebSocket ?
WebSocket est un protocole de communication réseau moderne qui fournit une méthode simple et efficace de communication bidirectionnelle entre les clients et les serveurs. Le protocole WebSocket permet de longues connexions entre les clients et les serveurs et peut transmettre ces mises à jour au client en temps réel au fur et à mesure que les données sont mises à jour. Les WebSockets sont plus efficaces que le modèle requête-réponse HTTP traditionnel et permettent des notifications push et des communications instantanées dans les applications en temps réel.

Créez une application de chat simple à l'aide de React :
Tout d'abord, nous devons créer une application React. Nous pouvons utiliser l'outil Create React App pour créer une nouvelle application React. Exécutez la commande suivante dans le terminal pour créer une nouvelle application React :

npx create-react-app realtime-chat-app

Une fois créée, nous pouvons aller dans le dossier et lancer notre application :

cd realtime-chat-app
npm start

Nous avons maintenant une application React de base. Nous ajouterons WebSocket sur cette base pour réaliser une fonction de communication en temps réel.

Implémentation de la fonction de communication WebSocket :
Tout d'abord, nous devons installer la bibliothèque websocket. Exécutez la commande suivante dans le terminal pour installer la bibliothèque websocket :

npm install --save websocket

Dans le composant React, nous pouvons utiliser le hook useState pour gérer notre liste de messages de discussion. Nous utiliserons également le hook useEffect pour initialiser la connexion WebSocket et gérer les messages reçus. Voici un exemple de code pour un simple composant de boîte de discussion :

import React, { useState, useEffect } from "react";
import WebSocket from "websocket";

const ChatBox = () => {
  const [messages, setMessages] = useState([]);
  const [inputValue, setInputValue] = useState("");
  let ws;

  useEffect(() => {
    ws = new WebSocket("ws://localhost:8000/ws"); // WebSocket服务器地址

    ws.onopen = () => {
      console.log("WebSocket连接已建立");
    };

    ws.onmessage = (event) => {
      const message = JSON.parse(event.data);
      setMessages((messages) => [...messages, message]);
    };

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

  const sendMessage = () => {
    ws.send(JSON.stringify({ content: inputValue }));
    setInputValue("");
  };

  return (
    <div>
      <div>
        {messages.map((message, index) => (
          <p key={index}>{message.content}</p>
        ))}
      </div>
      <input
        type="text"
        value={inputValue}
        onChange={(event) => setInputValue(event.target.value)}
      />
      <button onClick={sendMessage}>发送</button>
    </div>
  );
};

export default ChatBox;

Dans le code ci-dessus, nous utilisons useState pour gérer la liste des messages de discussion (messages) et la valeur de la zone de saisie (inputValue). Nous déclarons également une connexion WebSocket (ws) et l'initialisons lors du chargement du composant. Lorsque de nouveaux messages sont reçus, nous utilisons setMessages pour mettre à jour la liste des messages. Lorsque le composant est sur le point d'être déchargé, nous fermons la connexion WebSocket.

Dans la fonction de rendu, nous afficherons la liste des messages et une zone de saisie. Lorsque l'utilisateur clique sur le bouton d'envoi, nous enverrons le contenu du texte dans la zone de saisie au serveur WebSocket.

Démarrez le serveur WebSocket :
Pour que notre application WebSocket fonctionne correctement, nous devons également démarrer un serveur WebSocket. Dans cet exemple, nous utiliserons Node.js et la bibliothèque ws pour créer un simple serveur WebSocket. Exécutez la commande suivante dans le terminal pour installer la bibliothèque ws :

npm install --save ws

Ensuite, nous pouvons créer un fichier appelé server.js et utiliser le code suivant pour créer le serveur WebSocket :

const WebSocket = require('ws');

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

wss.on('connection', (ws) => {
  ws.on('message', (message) => {
    // 处理接收到的消息
    wss.clients.forEach((client) => {
      if (client.readyState === WebSocket.OPEN) {
        client.send(message);
      }
    });
  });
});

Nous pouvons maintenant démarrer le WebSocket en exécutant le Serveur de commande suivant :

node server.js

Enfin, il nous suffit d'ajouter le composant ChatBox à App.js et d'exécuter notre application React. Lorsque nous saisissons un message dans la zone de saisie et cliquons sur le bouton d'envoi, le message sera transmis au serveur via WebSocket et renvoyé à tous les clients connectés en temps réel.

Résumé :
Dans cet article, nous avons présenté comment utiliser React et WebSocket pour implémenter des capacités de communication en temps réel. Nous utilisons les hooks useState et useEffect pour gérer et mettre à jour l'état des composants React. Nous créons également une connexion WebSocket et mettons à jour l'interface utilisateur lorsque de nouveaux messages sont reçus. Enfin, nous avons créé un simple serveur WebSocket pour gérer et transférer les messages. J'espère que cet article vous a aidé à comprendre comment implémenter la fonctionnalité de communication en temps réel dans les applications React.

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!