close

Construire un WebSocket serveur de base avec Node.js

Une real-time application de chat est un excellent exemple de la façon d'utiliser WebSocket avec Node.js pour créer une expérience utilisateur interactive et attrayante. Dans cet article, nous allons explorer comment créer une real-time application de chat en utilisant WebSocket et Node.js.

Étape 1 : Configuration de l'environnement

Tout d'abord, assurez-vous que vous avez Node.js installé sur votre ordinateur. Créez un nouveau dossier pour votre projet et accédez-y à l'aide Terminal de ou Command Prompt.

Étape 2: Installation de la WebSocket bibliothèque

Comme précédemment, utilisez la bibliothèque "ws" pour installer la WebSocket bibliothèque :

npm install ws

Étape 3: Construire le WebSocket serveur

Créez un fichier nommé server.js  et écrivez le code suivant :

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

Étape 4 : Création de l'interface utilisateur(client)

Créez un fichier nommé index.html et écrivez le code suivant :

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

Étape 5: Exécution du serveur et ouverture du navigateur

Dans le Terminal, exécutez la commande suivante pour démarrer le WebSocket serveur :

node server.js

Ouvrez un navigateur Web et accédez à " http://localhost:8080 " pour utiliser l' real-time application de chat.

 

Conclusion

Toutes nos félicitations! Vous avez créé avec succès une real-time application de chat en utilisant WebSocket et Node.js. Cette application permet aux utilisateurs d'interagir et d'envoyer/recevoir des messages au format real-time. Vous pouvez continuer à développer et personnaliser cette application pour créer diverses fonctionnalités passionnantes !