So erstellen Sie eine Echtzeit-Chat-App mit React und WebSocket

So erstellen Sie eine Echtzeit-Chat-Anwendung mit React und WebSocket

Einführung:
Mit der rasanten Entwicklung des Internets hat die Echtzeitkommunikation immer mehr Aufmerksamkeit auf sich gezogen. Live-Chat-Apps sind aus dem modernen Sozial- und Arbeitsleben nicht mehr wegzudenken. In diesem Artikel wird erläutert, wie Sie mit React und WebSocket eine einfache Echtzeit-Chat-Anwendung erstellen, und es werden spezifische Codebeispiele bereitgestellt.

1. Technische Vorbereitung
Bevor wir mit der Erstellung einer Echtzeit-Chat-Anwendung beginnen, müssen wir die folgenden Technologien und Tools vorbereiten:

1. React: eine JavaScript-Bibliothek zum Erstellen von Benutzeroberflächen.
2. WebSocket: Ein TCP-basiertes Protokoll, das für die Echtzeitkommunikation zwischen Clients und Servern verwendet wird.
3. Node.js: Eine JavaScript-Ausführungsumgebung basierend auf der Chrome V8-Engine.
4. Express.js: Ein einfaches und flexibles Node.js-Webanwendungs-Framework.
5. Socket.IO: Eine WebSocket-basierte Bibliothek für bidirektionale Kommunikation in Echtzeit. 2. Projekteinstellungen: React-Anwendung erstellen Abhängigkeiten:

npx create-react-app chat-app

Nach dem Login kopieren

3. Servereinstellungen

1. 
   Serverdatei erstellen

   Erstellen Sie eine Datei mit dem Namen server.js und fügen Sie den folgenden Code hinzu:

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

Nach dem Login kopieren

2. 
   Starten Sie den Server

   Führen Sie den folgenden Befehl in der Befehlszeile aus Server starten:

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');
});

Nach dem Login kopieren

Fügen Sie in der App.js-Datei im src-Verzeichnis den folgenden Code zum Originalcode hinzu:

1. node server.js

   Nach dem Login kopieren

   
   

   Führen Sie die Anwendung aus
Führen Sie den folgenden Befehl in der Befehlszeile aus, um die React-Anwendung zu starten:

2. 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;

   Nach dem Login kopieren

   
   

   5 . TestanwendungÖffnen Sie http://localhost:3000 im Browser. Sie können eine einfache Echtzeit-Chat-Oberfläche sehen. Geben Sie eine Nachricht in das Eingabefeld ein und klicken Sie auf die Schaltfläche „Senden“, um die Nachricht zu senden und in Echtzeit auf der Chat-Oberfläche anzuzeigen.

Fazit:

In diesem Artikel wird erläutert, wie Sie mit React und WebSocket eine Echtzeit-Chat-Anwendung erstellen. Indem wir React zum Aufbau der Front-End-Schnittstelle verwenden und in Echtzeit über WebSocket kommunizieren, können wir ganz einfach eine einfache Echtzeit-Chat-Anwendung erstellen. Ich hoffe, dieser Artikel hilft Ihnen zu verstehen, wie Sie eine Echtzeit-Chat-Anwendung erstellen.

Das obige ist der detaillierte Inhalt vonSo erstellen Sie eine Echtzeit-Chat-App mit React und WebSocket. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!