Enviando Formulários - Node.js

Uma das maneiras de enviar dados para o servidor é por meio de formulários. Por padrão, o Node.js não possui funcionalidade integrada para receber dados de formulários enviados. Por exemplo, suponha que em nosso projeto temos uma página web index.html com um formulário de envio:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Programício</title>
</head>
<body>
<form action="user" method="post">
<p>
    <label>Nome:</label><br>
    <input name="username" />
</p>
<p>
    <label>Idade:</label><br>
    <input name="userage" type="number" />
</p>
<input type="submit" value="Enviar" />
</form>
</body>
</html>

Neste formulário, temos dois campos de entrada: o campo username para inserir o nome e o campo userage para inserir a idade. Ao clicar no botão, os dados inseridos são enviados em uma requisição do tipo POST para o endereço /user. Vamos ver como podemos obter esses dados em uma aplicação Node.js.

Quando o formulário é enviado, o corpo da requisição conterá dados no formato:

username=John&userage=30

Geralmente, para analisar formulários enviados, utilizam-se pacotes especiais ou funcionalidades de frameworks como o Express. No entanto, se necessário, podemos definir essa funcionalidade por conta própria. Assim, definimos no arquivo app.js o seguinte código:

const http = require("http");
const fs = require("fs");

http.createServer(async (request, response) => {
    if(request.url == "/user") {
        let body = ""; // buffer para os dados recebidos
        // recebendo dados da requisição no buffer
        for await (const chunk of request) {
            body += chunk;
        }
        // para o parâmetro name
        let userName = "";
        // para o parâmetro age
        let userAge = 0;
        // dividindo a requisição em parâmetros pelo símbolo &
        const params = body.split("&");
        // percorrendo todos os parâmetros e definindo seus valores
        for(param of params){
            // dividindo cada parâmetro em nome e valor
            const [paramName, paramValue] = param.split("=");
            if(paramName === "username") userName = paramValue;
            if(paramName === "userage") userAge = paramValue;
        }
        response.end(`Seu nome: ${userName}  Sua Idade: ${userAge}`);
    } else {
        fs.readFile("index.html", (_, data) => response.end(data));
    }
}).listen(3000, () => console.log("Servidor iniciado em http://localhost:3000"));

Ao processar a requisição, podemos obter o caminho para o recurso solicitado utilizando a propriedade request.url. Como o formulário na página web envia dados para o endereço /user, processamos a requisição para esse endereço:

if(request.url == "/user") {

Para obter os valores do formulário enviado, lemos o corpo da requisição em uma variável body:

let body = ""; // buffer para os dados recebidos
for await (const chunk of request) {
    body += chunk;
}

Nossa tarefa agora é extrair os nomes e valores dos campos do formulário. Para isso, primeiro dividimos o corpo da requisição em parâmetros individuais:

const params = body.split("&");

Em seguida, percorremos todos os parâmetros e extraímos seus nomes (nomes dos campos do formulário) e seus valores:

for(param of params) {
    const [paramName, paramValue] = param.split("=");
    if(paramName === "username") userName = paramValue;
    if(paramName === "userage") userAge = paramValue;
}

Vale ressaltar que esta não é uma análise universal e é direcionada para uma tarefa específica: obter o nome e a idade do usuário enviados.

Após obter os dados da requisição, enviamos uma mensagem de resposta ao cliente:

response.end(`Seu nome: ${userName} Sua Idade: ${userAge}`);

Finalmente, na linha de comando, navegamos até a pasta do servidor e iniciamos o servidor:

C:\app>node server.js
Servidor iniciado em http://localhost:3000

Após iniciar o servidor, podemos acessar no navegador o endereço http://localhost:3000, e será exibida a página com o formulário. Inserimos alguns dados no formulário e a aplicação Node.js receberá os dados e enviará uma resposta com a seguinte mensagem:

Seu nome: [Nome inserido]  Sua Idade: [Idade inserida]