WebSockets sous le capot avec Node.js

// script.js
const wsUri = "ws://localhost:3000";
const outputDiv = document.getElementById("output");
const messageInput = document.getElementById("message");
const sendButton = document.getElementById("send-btn");

let websocket;

function connect() {
    websocket = new WebSocket(wsUri);

    websocket.onopen = function (event) {
        outputDiv.innerHTML += "
Connected to server!
";
    };

    websocket.onmessage = function (event) {
        const receivedMessage = event.data;
        outputDiv.innerHTML += "
Received: " + receivedMessage + "
";
    };

    websocket.onerror = function (event) {
        outputDiv.innerHTML += "
Error: " + event.error + "
";
    };

    websocket.onclose = function (event) {
        outputDiv.innerHTML += "
Connection closed.
";
    };
}

sendButton.addEventListener("click", function () {
    const message = messageInput.value;
    if (websocket && websocket.readyState === WebSocket.OPEN) {
        websocket.send(message);
        messageInput.value = "";
    } else {
        outputDiv.innerHTML += "
Error: Connection not open.
";
    }
});

connect(); // Connect immediately

Ce script configure plusieurs gestionnaires d'événements à l'aide de l'API native du navigateur. Nous démarrons le WebSocket dès que le script est chargé et surveillons open, onclose, onmessageet onerror événements. Chacun ajoute ses mises à jour au DOM. Le plus important est onmessageoù nous acceptons le message du serveur et l'affichons.

Le gestionnaire Click sur le bouton lui-même prend l'entrée saisie par l'utilisateur (messageInput.value) et utilise l'objet WebSocket pour l'envoyer au serveur avec le send() fonction. Ensuite, nous réinitialisons la valeur de l'entrée sur une chaîne vide.

En supposant que le back-end soit toujours en cours d'exécution et disponible à ws://localhost:3000nous pouvons maintenant exécuter le front-end. Nous pouvons utiliser le serveur http comme moyen simple d'exécuter le front-end. C'est un moyen simple d'héberger des fichiers statiques sur un serveur Web, semblable au module http de Python ou au Simple Web Server de Java, mais pour Node. Il peut être installé en tant que package NPM global ou simplement exécuté avec npxdepuis le répertoire client :