close

Erstellen eines Basisservers WebSocket mit Node.js

Eine real-time Chat-Anwendung ist ein hervorragendes Beispiel dafür, wie man WebSocket sie nutzen kann Node.js, um ein interaktives und ansprechendes Benutzererlebnis zu schaffen. In diesem Artikel erfahren Sie, wie Sie mit und eine real-time Chat-Anwendung erstellen. WebSocket Node.js

Schritt 1: Einrichten der Umgebung

Stellen Sie zunächst sicher, dass Sie es Node.js auf Ihrem Computer installiert haben. Terminal Erstellen Sie einen neuen Ordner für Ihr Projekt und navigieren Sie mit oder dorthin Command Prompt.

Schritt 2: Installation der WebSocket Bibliothek

Verwenden Sie wie zuvor die Bibliothek „ws“, um die WebSocket Bibliothek zu installieren:

npm install ws

Schritt 3: Aufbau des WebSocket Servers

Erstellen Sie eine Datei mit dem Namen server.js  und schreiben Sie den folgenden Code:

// Import the WebSocket library  
const WebSocket = require('ws');  
  
// Create a WebSocket server  
const server = new WebSocket.Server({ port: 8080 });  
  
// List of connections(clients)  
const clients = new Set();  
  
// Handle new connections  
server.on('connection',(socket) => {  
    console.log('Client connected.');  
  
    // Add connection to the list  
    clients.add(socket);  
  
    // Handle incoming messages from the client  
    socket.on('message',(message) => {  
        // Send the message to all other connections  
        for(const client of clients) {  
            if(client !== socket) {  
                client.send(message);  
            }  
        }  
    });  
  
    // Handle connection close  
    socket.on('close',() => {  
        console.log('Client disconnected.');  
        // Remove the connection from the list  
        clients.delete(socket);  
    });  
});

Schritt 4: Erstellen der Benutzeroberfläche(Client)

Erstellen Sie eine Datei mit dem Namen index.html und schreiben Sie den folgenden Code:

<!DOCTYPE html>  
<html>  
<head>  
    <title>Real-Time Chat</title>  
</head>  
<body>  
    <input type="text" id="message" placeholder="Type a message">  
    <button onclick="send()">Send</button>  
    <div id="chat"></div>  
      
    <script>  
        const socket = new WebSocket('ws://localhost:8080');  
        socket.onmessage =(event) => {  
            const chat = document.getElementById('chat');  
            chat.innerHTML += '<p>' + event.data + '</p>';  
        };  
  
        function send() {  
            const messageInput = document.getElementById('message');  
            const message = messageInput.value;  
            socket.send(message);  
            messageInput.value = '';  
        }  
    </script>  
</body>  
</html>

Schritt 5: Ausführen des Servers und Öffnen des Browsers

Führen Sie im Terminal folgenden Befehl aus, um den WebSocket Server zu starten:

node server.js

Öffnen Sie einen Webbrowser und navigieren Sie zu „ http://localhost:8080 “, um die real-time Chat-Anwendung zu verwenden.

 

Abschluss

Glückwunsch! Sie haben erfolgreich eine real-time Chat-Anwendung mit WebSocket und erstellt Node.js. Mit dieser Anwendung können Benutzer interagieren und Nachrichten senden/empfangen real-time. Sie können diese Anwendung weiter erweitern und anpassen, um verschiedene aufregende Funktionen zu erstellen!