Come restituire pagine HTML con un server Node.js

Tempo di lettura: 4 minuti
Esercizio pratico Node.js con codice, server che restituisce pagine HTML

Restituire codice HTML

In questo articolo ti farò vedere come far si che il tuo server HTTP scritto in Node.js restituisca dei codici HTML!

Riassumiamo ciò che abbiamo fatto nel precedente articolo Come creare un server HTTP con Node.js:

Abbiamo creato la nostra prima vera app con il nostro web server incluso. Per il momento, però,  l’app è un po’ basilare:

  1. Il messaggio inviato come risposta è in un testo semplice, non contiene nemmeno HTML.
  2. L’ applicazione invia sempre lo stesso messaggio, indipendentemente dalla pagina chiamata (http://localhost:8080, http://localhost:8080/pagina1, http://localhost:8080/pagina2).

Perché questo capitolo sia completo, dovremo risolvere questi due problemi.

Cominciamo dal primo e vediamo come restituire un po’ di HTML!

Come ho detto prima, ci sono regole che devono essere rispettate tra client e server. Comunicano sulla base dello standard HTTP inventato da Tim Berners-Lee. Questo standard è il fondamento del web (come il linguaggio HTML, anche questo inventato da lui).

Cosa dice lo standard HTTP?

Il server deve indicare il tipo di dati che sta per inviare al client. Questo perché il server può restituire diversi tipi di dati:

  • Semplice testo: text/plain
  • File HTML: text/html
  • File CCS: text/ccs
  • Immagini JPEG: image/jpeg
  • File MPEG4: video/mp4
  • File ZIP file: application/zip
  • Tanti altri tipi…

Questi sono quelli che chiamiamo i tipi MIME. Sono inviati nell’intestazione della risposta del server.

Ti ricordi come scrivere l’intestazione della risposta con Node.js?

Te lo ricordo io:

res.writeHead(200);

Tutto quello che abbiamo fatto finora è inserire il codice di risposta 200 per indicare “OK, niente errori amico“. È necessario aggiungere un altro parametro che indichi il tipo MIME della risposta.

Per l’ HTML, sarà così:

res.writeHead(200, {"Content-Type": "text/html"});

Il secondo parametro è tra le parentesi, perché possiamo inviare più valori in formato “griglia”.

Ora che questo è fatto, possiamo inviare HTML nella risposta!

res.end('<p>Sono un paragrafo <strong>HTML</strong>!</p>');

Ora il nostro codice sembrerà così:

var http = require('http');

var server = http.createServer(function(req, res) { 
  res.writeHead(200, {"Content-Type": "text/html"}); 
  res.end('<p>Sono un paragrafo <strong>HTML</strong>!</p>');
});

server.listen(8080);

Copia il codice e mettilo in un file chiamato server-html.js.

restituire-contenuti-html-server-nodejs
Esempio (incompleto) di risposta HTML

Fai una prova di ciò che hai imparato lanciando l’applicazione con il comando node nella console e aprendo il tuo browser a http://localhost:8080 o alla porta 8081 (se la prima dovesse essere già occupata).

Il tuo paragrafo di testo viene visualizzato e formattato come previsto!

contenuto-html-non-valido-restituo-da-server-node
La pagina HTML non è valida!

Ma il codice HTML non è valido, come fare?

Non abbiamo scritto infatti il Doctype o i tag <html> o <body>.

Pubblicare una pagina web del genere è proprio una brutta cosa… fortunatamente possiamo risolvere facilmente il problema!

Ci basta semplicemente inviare tutti gli altri tag mancanti.

Restituire un codice HTML valido

Fino ad ora, abbiamo scritto codice HTML in res.end(). Un modo migliore per dividere il codice da ora in poi è usare il comando res.write() che permette di scrivere la risposta in più fasi. Il risultato è lo stesso, ma il nostro codice in questo modo è diviso al meglio.

Nota bene: res.end() deve essere sempre richiamato per ultimo per completare la risposta e assicurarsi che il server invii il risultato al client.

var http = require('http'); 

var server = http.createServer(function(req, res) {
  res.writeHead(200, {"Content-Type": "text/html"});
  res.write('<!DOCTYPE html>'+
  '<html>'+
  ' <head>'+
  ' <meta charset="utf-8" />'+
  ' <title>Pagina Node.js!</title>'+
  ' </head>'+
  ' <body>'+
  '  <p>Sono un paragrafo <strong>HTML</strong>!</p>'+
  ' </body>'+
  '</html>');
  res.end();
});

server.listen(8080);

Quindi risulterà cosi:

web-server-node-restituire-codici-html
Usare res.write per scrivere il contenuto della pagina

Puoi verificare il risultato nel browser, dovresti ottenere una pagina come questa:

esempio-pagina-html-restituire-server-node
Pagina HTML restituita dal server Node.js

Ottimo, il server Node restituisce un contenuto HTML valido!

Questo era solo un esercizio per spiegarti il funzionamento di base di Node.js, in un’applicazione reale non puoi scrivere HTML in questo modo, è terribile!

Usare questo modo per creare pagine web complesse è un suicidio, fortunatamente gli sviluppatori hanno creato degli strumenti per Node che facilitano la gestione dei codici HTML. Ricordati infatti che Node è pur sempre una tecnologia di basso livello, per questo gestire l’HTML è così “fastidioso”, ci sono modi di gran lunga migliori per farlo!

Il metodo più famoso si chiama Template e consiste nel separare il codice Javascript dall’HTML, esistono un sacco di moduli Node.js dedicati ai template e solitamente sono già inclusi nei framework come ExpressJS.

Ad ogni modo, per il momento non devi preoccuparti di questo, concentrati sull’imparare le basi di Node.js! Nella prossima lezione vedremo come gestire più URL e come passare parametri in GET.

 


L’articolo che hai appena letto fa parte di una lunga serie di guide e tutorial tradotte in italiano e distribuite gratuitamente. In particolare questo articolo si basa sui testi inglesi di Mathieu Nebra (Ultra fast applications using Node.js), con licenza CC BY-NC-SA. Questo articolo è sotto la stessa licenza.