Comment utiliser WebSocket pour implémenter la fonction de chat en temps réel dans les applications Web

Aperçu

Dans les applications Web modernes, la fonction de chat en temps réel est devenue une exigence commune. Afin de répondre aux exigences en temps réel, le protocole HTTP traditionnel semble être sans scrupule, et WebSocket, en tant que protocole de communication complet, peut fournir une solution de communication en temps réel à faible latence et à haute efficacité.

WebSocket est une nouvelle technologie ajoutée à HTML5, qui permet des connexions persistantes entre les clients et les serveurs. Par rapport au protocole HTTP traditionnel, il offre non seulement des performances en temps réel plus élevées, mais réduit également la consommation de bande passante, il est donc largement utilisé dans le chat en temps réel et d'autres scénarios.

Implémentation du code frontal

Tout d'abord, nous devons créer un objet WebSocket à l'avant et établir une connexion avec le serveur via lui. Voici un simple exemple de code frontal:

 const socket = new WebSocket('ws://localhost:8000/chat');

// Fonction de rappel après établissement de connexion réussie
socket.onopen = function() {
    console.log('WebSocketLa connexion a été établie');
};

// Fonction de rappel lors de la réception d'un message
socket.onmessage = function(event) {
    const message = JSON.parse(event.data);
    console.log('A reçu un message：', message);
};

// Fonction de rappel lors de la fermeture de la connexion
socket.onclose = function() {
    console.log('WebSocketLa connexion est fermée');
};

// Fonctions pour envoyer des messages
function sendMessage(message) {
    socket.send(JSON.stringify(message));
}

Ce code implémente la communication avec le serveur via WebSocket. Lorsque la connexion réussit, l'événement `` onopen »est déclenché; Lorsque le message du serveur est reçu, l'événement «OnMessage» est déclenché; Lorsque la connexion est fermée, l'événement «OnClose» est déclenché.

Implémentation du code backend

Ensuite, nous implémenterons la logique de traitement WebSocket côté serveur. Utilisez la bibliothèque `WS` dans Node.js pour créer un serveur WebSocket. Voici un exemple de code backend:

 const WebSocket = require('ws');

// créerWebSocketserveur
const wss = new WebSocket.Server({ port: 8000 });

// 保存所有连接到serveur的客户端
const clients = new Set();

// Gérer les événements de connexion client
wss.on('connection', function(ws) {
    console.log('Le client est connecté');
    // Ajouter le client à la collection
    clients.add(ws);

    // 处理A reçu un message的事件
    ws.on('message', function(message) {
        console.log('A reçu un message：', message);
        // Envoyer des messages à tous les clients connectés
        clients.forEach(function(client) {
            client.send(message);
        });
    });

    // Gérer l'événement de fermeture de connexion
    ws.on('close', function() {
        console.log('Le client a été fermé');
        // Supprimer le client de la collection
        clients.delete(ws);
    });
});

Le code côté serveur crée un serveur WebSocket via la bibliothèque `WS`, écoutant le port 8000. Chaque fois qu'il existe une connexion client, le client est ajouté à une collection et transféré à tous les clients connectés lorsque le message est reçu.

Démarrer et tester

Enregistrez le code frontal en tant que fichier index.html et enregistrez le code back-end en tant que fichier server.js. Exécutez la commande suivante pour démarrer le serveur WebSocket:

 node server.js

Ensuite, ouvrez le fichier `index.html` dans votre navigateur et vous pourrez voir l'implémentation de la fonction de chat en direct. Grâce aux outils de développeur du navigateur, vous pouvez observer l'envoi et la réception de connexions et de messages.

Résumer

Avec l'exemple ci-dessus, nous montrons comment implémenter les fonctionnalités de chat en temps réel dans les applications Web à l'aide du protocole WebSocket. Bien qu'il s'agisse d'un exemple de base, il démontre les avantages de WebSocket dans les applications en temps réel. Selon les besoins réels, les développeurs peuvent développer davantage les fonctions, telles que le stockage de messages, la sécurité, l'authentification des utilisateurs, etc.

WebSocket rend la création d'applications en temps réel plus efficace et plus pratique, et convient à une variété de scénarios, y compris des outils de chat et de collaboration. En optimisant et en ajoutant continuellement de nouvelles fonctionnalités, vous pouvez créer des applications de chat en direct plus complexes et entièrement fonctionnelles.