WebSockets nos bastidores com 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

Este script configura vários manipuladores de eventos usando a API nativa do navegador. Iniciamos o WebSocket assim que o script é carregado e observamos open, onclose, onmessagee onerror eventos. Cada um anexa suas atualizações ao DOM. O mais importante é onmessageonde aceitamos a mensagem do servidor e a exibimos.

O manipulador Click no próprio botão recebe a entrada digitada pelo usuário (messageInput.value) e usa o objeto WebSocket para enviá-lo ao servidor com o send() função. Em seguida, redefinimos o valor da entrada para uma string em branco.

Supondo que o back-end ainda esteja em execução e disponível em ws://localhost:3000agora podemos executar o front-end. Podemos usar o servidor http como uma maneira simples de executar o front-end. É uma maneira simples de hospedar arquivos estáticos em um servidor web, semelhante ao módulo http do Python ou ao Simple Web Server do Java, mas para Node. Ele pode ser instalado como um pacote NPM global ou simplesmente executado com npxno diretório do cliente: