Erstellen einer Echtzeit-Chat-Anwendung mit WebSockets in React

Echtzeitkommunikation ist zu einem festen Bestandteil moderner Webanwendungen geworden, insbesondere in Chatanwendungen. WebSockets bieten eine leistungsstarke Möglichkeit, eine bidirektionale Echtzeitkommunikation zwischen einem Client und einem Server zu ermöglichen. In diesem Leitfaden gehen wir durch den Prozess der Erstellung einer Echtzeit-Chat-Anwendung mit WebSockets und React.

Voraussetzungen
Stellen Sie vor dem Eintauchen sicher, dass Sie über Folgendes verfügen:

• Grundlegendes Verständnis von React.
• Node.js ist auf Ihrem Computer installiert.
• Ein Paketmanager wie npm oder Yarn.
• Vertrautheit mit WebSocket-Konzepten.

Schritt 1: Einrichten des Backends
Für die Echtzeitkommunikation benötigen wir einen WebSocket-Server. Wir verwenden Node.js mit dem ws-Paket.

1. Initialisieren Sie ein Node.js-Projekt:

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

1. Installieren Sie das ws-Paket:

npm install ws 

1. Erstellen Sie einen WebSocket-Server:

// 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. Führen Sie den Server aus:

node server.js

Schritt 2: Einrichten des React-Frontends

1. Erstellen Sie eine neue React-App:

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

1. Abhängigkeiten für WebSocket installieren: Es sind keine zusätzlichen Abhängigkeiten erforderlich, da die native WebSocket-API des Browsers verwendet wird.

Schritt 3: Erstellen der Chat-Schnittstelle

1. Erstellen Sie eine Chat-Komponente:

// 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. Starten Sie die React-App:

npm start  

Schritt 4: Testen der Anwendung

• Öffnen Sie Ihre React-App auf mehreren Registerkarten oder Geräten.
• Beginnen Sie mit der Eingabe von Nachrichten in einer Registerkarte und beobachten Sie, wie sie in Echtzeit auf allen verbundenen Clients angezeigt werden!

Zusätzliche Verbesserungen
Um die App produktionsbereit zu machen, berücksichtigen Sie Folgendes:

• Benutzerauthentifizierung für personalisierte Nachrichten hinzufügen.
• Integration einer Datenbank zum Speichern des Chatverlaufs.
• Bereitstellung des WebSocket-Servers und der React-App auf Plattformen wie Vercel, Heroku oder AWS.

Fazit
Durch die Nutzung von WebSockets haben wir mit React eine schlanke Echtzeit-Chat-Anwendung erstellt. Dieses Projekt demonstriert die Leistungsfähigkeit von WebSockets für dynamische Kommunikation, die in verschiedenen Anwendungen wie Messaging-Plattformen, Spielen und Live-Benachrichtigungen nützlich ist. Tauchen Sie tiefer in die WebSocket-Protokolle ein, um Ihre Anwendung weiter zu verbessern!

Viel Spaß beim Codieren! ?

Das obige ist der detaillierte Inhalt vonErstellen einer Echtzeit-Chat-Anwendung mit WebSockets in React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!