close

Δημιουργία βασικού WebSocket διακομιστή με Node.js

Μια real-time εφαρμογή συνομιλίας είναι ένα εξαιρετικό παράδειγμα για το πώς να WebSocket το χρησιμοποιήσετε Node.js για να δημιουργήσετε μια διαδραστική και συναρπαστική εμπειρία χρήστη. Σε αυτό το άρθρο, θα διερευνήσουμε πώς να δημιουργήσετε μια real-time εφαρμογή συνομιλίας χρησιμοποιώντας WebSocket και Node.js.

Βήμα 1: Ρύθμιση του περιβάλλοντος

Πρώτα, βεβαιωθείτε ότι έχετε Node.js εγκαταστήσει στον υπολογιστή σας. Δημιουργήστε έναν νέο φάκελο για το έργο σας και πλοηγηθείτε σε αυτόν χρησιμοποιώντας Terminal ή Command Prompt.

Βήμα 2: Εγκατάσταση της WebSocket Βιβλιοθήκης

Όπως και πριν, χρησιμοποιήστε τη βιβλιοθήκη "ws" για να εγκαταστήσετε τη WebSocket βιβλιοθήκη:

npm install ws

Βήμα 3: Δημιουργία WebSocket διακομιστή

Δημιουργήστε ένα αρχείο με όνομα server.js  και γράψτε τον ακόλουθο κώδικα:

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

Βήμα 4: Δημιουργία της διεπαφής χρήστη(Πελάτης)

Δημιουργήστε ένα αρχείο με όνομα index.html και γράψτε τον ακόλουθο κώδικα:

<!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>

Βήμα 5: Εκτέλεση του διακομιστή και άνοιγμα του προγράμματος περιήγησης

Στο Terminal, εκτελέστε την ακόλουθη εντολή για να ξεκινήσετε τον WebSocket διακομιστή:

node server.js

Ανοίξτε ένα πρόγραμμα περιήγησης ιστού και μεταβείτε στο " http://localhost:8080 " για να χρησιμοποιήσετε την real-time εφαρμογή συνομιλίας.

 

συμπέρασμα

Συγχαρητήρια! Έχετε δημιουργήσει με επιτυχία μια real-time εφαρμογή συνομιλίας χρησιμοποιώντας WebSocket και Node.js. Αυτή η εφαρμογή επιτρέπει στους χρήστες να αλληλεπιδρούν και να στέλνουν/λαμβάνουν μηνύματα σε real-time. Μπορείτε να συνεχίσετε να επεκτείνετε και να προσαρμόσετε αυτήν την εφαρμογή για να δημιουργήσετε διάφορες συναρπαστικές λειτουργίες!