WebSockets nos bastidores com Node.js

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

let websocket;

perform join() {
    websocket = new WebSocket(wsUri);

    websocket.onopen = perform (occasion) {
        outputDiv.innerHTML += "
Related to server!
  
";
    };

    websocket.onmessage = perform (occasion) {
        const receivedMessage = occasion.information;
        outputDiv.innerHTML += "
Acquired: " + receivedMessage + "
";
    };

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

    websocket.onclose = perform (occasion) {
        outputDiv.innerHTML += "
Connection closed.
";
    };
}

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

join(); // Join instantly

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 on no próprio botão recebe a entrada digitada pelo usuário (messageInput.worth) e usa o objeto WebSocket para enviá-lo ao servidor com o ship() 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 servidor http como uma maneira simples de executar o front-end. É uma maneira simples de hospedar arquivos estáticos em um servidor net, semelhante ao módulo http do Python ou Servidor Net Simples de Javamas para o Node. Ele pode ser instalado como um pacote NPM international ou simplesmente executado com npxno diretório do cliente: