Um primeiro servidor HTTP com Node.js
Acompanhe uma requisição de uma página até um servidor Node e de volta.
- Explicar requisição, rota, status e corpo da resposta
- Construir um pequeno servidor com node:http
- Manter o tratamento de requisições separado da renderização no navegador
Quando uma página chama fetch("/api/hello"), o navegador envia uma requisição HTTP. Um servidor a recebe, decide qual rota foi pedida e envia um status, cabeçalhos e um corpo. O Node.js fornece createServer em node:http. Depois, o navegador lê a resposta e atualiza o DOM. É assim que um catálogo de produtos, um painel ou um fluxo de cadastro conecta o JavaScript do frontend e o do backend.
Experimente
Até 15 XPSiga uma requisição
Preveja os passos entre um clique no navegador e o texto que ele mostra.
1import { createServer } from "node:http";
2
3const server = createServer((request, response) => {
4 response.setHeader("Content-Type", "application/json; charset=utf-8");
5 if (request.method === "GET" && request.url === "/api/hello") {
6 response.statusCode = 200;
7 response.end(JSON.stringify({ message: "Hello from Node" }));
8 } else {
9 response.statusCode = 404;
10 response.end(JSON.stringify({ error: "Not found" }));
11 }
12});
13server.listen(3000, "127.0.0.1", () => console.log("Listening on http://127.0.0.1:3000"));Salve o arquivo, rode-o com node server.mjs e depois visite http://127.0.0.1:3000/api/hello e /missing. Pare-o com Ctrl+C. O servidor é pequeno de propósito: serviços reais também validam a entrada, definem limites, tratam falhas e protegem recursos privados. Veja a introdução ao Node.js.
1const response = await fetch("/api/hello");
2if (!response.ok) throw new Error("HTTP " + response.status);
3const data = await response.json();
4document.querySelector("#greeting").textContent = data.message;Principais conclusões
Um navegador envia uma requisição; um servidor escolhe uma rota e envia uma resposta.
O status HTTP e o Content-Type dizem ao cliente como interpretar o corpo.
O navegador renderiza os resultados; o Node.js cuida do trabalho de servidor e dos recursos privados.
Quiz da aula
4 perguntas · aprovação com 3 acertos · até 50 XP
Ao passar, você conclui a aula e mantém sua sequência. As perguntas erradas voltarão em sessões de revisão.
Pratique: escreva código em JavaScript
Escreva o programa, execute-o com os casos de teste e use o retorno para desenvolver suas habilidades em JavaScript.
Roteie duas requisições
A entrada é um caminho, como /api/hello. Escreva uma função pura handle(path) que devolva um objeto com status e body. Para /api/hello, devolva 200 e Hello from Node; caso contrário, devolva 404 e Not found. Imprima status body. Isso modela a decisão de rota sem iniciar um servidor no exercício do navegador.
- Rota conhecida
- Rota desconhecida
O JavaScript roda em um frame isolado do navegador, com limite de 1,5 segundo. A entrada fica disponível na variável de string input.
Dúvidas sobre esta lição
Travou em algum ponto? Pergunte. Descobriu algo? Compartilhe. Explicar também é uma ótima forma de aprender.
Carregando publicações…