Prática 1_3 - myTeachingURJC/2018-19-LTAW GitHub Wiki

Sesión Laboratorio 3: Práctica 1-3

  • Tiempo: 2h
  • Objetivos de la sesión:
    • Continuar trabajando en la práctica 1. El servidor debería terminarse esta semana

Contenido

Analizando la URL: Módulo URL

Partimos del ejemplo que vimos en la sesión pasada. Cuando nuestro servidor recibe una petición, se nos pasa la URL solicitada

var http = require('http');

console.log("Arrancando servidor...")

//-- Configurar y lanzar el servidor. Por cada peticion recibida
//-- se imprime un mensaje en la consola
http.createServer((req, res) => {
  console.log("---> Peticion recibida")
  console.log("Recurso solicitado (URL): " + req.url)
}).listen(8080);

Lo ejecutamos. Si en el navegador ponemos la URL: http://localhost:8080/test1.html, lo que recibimos es lo siguiente

$ node url-01.js 
Arrancando servidor...
---> Peticion recibida
Recurso solicitado (URL): /test1.html

El módulo URL de node nos permite hacer un análisis de todo lo recibido en la URL. En el caso más genérico, una URL sería así:

Consta de tres partes:

  • El host
  • La ruta y nombre del recurso
  • La búsqueda. Es un conjunto de pares "etiqueta=valor" separados por el carácter &

El módulo URL nos permite analizar cualquier URL y obtener los campos por separado

var http = require('http');
var url = require('url');

console.log("Arrancando servidor...")

//-- Configurar y lanzar el servidor. Por cada peticion recibida
//-- se imprime un mensaje en la consola
http.createServer((req, res) => {
  console.log("---> Peticion recibida")
  console.log("Recurso solicitado (URL): " + req.url)

  //-- Analisis de la URL recibida:
  var q = url.parse(req.url, true);

  console.log("Pathname: " +  q.pathname)
  console.log("search: " + q.search)
  console.log("Búsqueda:")
  var qdata = q.query
  console.log(qdata)

  //-- Acceso al objeto
  console.log("Artículo: " + qdata.articulo)
  console.log("Color: " + qdata.color)

}).listen(8080);

Si desde el navegador le pasamos la URL anterior:

http://localhost:8080/mi_tienda/listados.html?articulo=pendrive&color=blanco

, en la consola del servidor obtendremos lo siguiente:

node url-02.js 
Arrancando servidor...
---> Peticion recibida
Recurso solicitado (URL): /mi_tienda/listados.html?articulo=pendrive&color=blanco
Pathname: /mi_tienda/listados.html
search: ?articulo=pendrive&color=blanco
Búsqueda:
[Object: null prototype] { articulo: 'pendrive', color: 'blanco' }
Artículo: pendrive
Color: blanco

Generando el mensaje de respuesta

Cuando se recibe una petición a nuestro servidor web, nuestra función de retrollamada recibe dos objetos: uno contiene información sobre la solicitud. El otro es mensaje de respuesta, que tendremos que rellenar, siguiendo el protocolo HTTP

Las respuestas HTTP tiene dos partes: cabecera y cuerpo. Dentro de la cabecera hay que indicar el tipo de contenido que se devuelve. Esta descripción está estandarizada: Tipos mime

Este es un ejemplo que devuelve contenido HTML generado al vuelo:

var http = require('http');
var url = require('url');
var fs = require('fs');

console.log("Arrancando servidor...")

//-- Configurar y lanzar el servidor. Por cada peticion recibida
//-- se imprime un mensaje en la consola
http.createServer((req, res) => {
  console.log("---> Peticion recibida")
  console.log("Recurso solicitado (URL): " + req.url)
  var q = url.parse(req.url, true);
  console.log("URL parseada: ")
  console.log("Host: " + q.host)
  console.log("pathname:" + q.pathname)

  //_- Crear el mensaje de respuesta. Primero la cabecera
  //-- El código 200 se usa para indicar que todo está ok
  //-- En el campo Content-Type tenemos que introducir el tipo MIME
  //-- de lo que devolvemos
  var mime = "text/html"
  res.writeHead(200, {'Content-Type': mime});

  //-- Ahora escribimos el cuerpo: los datos a enviar, en html
  //-- En este ejemplo se envia directamente el HTML
  var msg = `
   <!DOCTYPE html>
  <html lang="es" dir="ltr">
    <head>
      <meta charset="utf-8">
      <title>Mi tienda</title>
    </head>
    <body>
      <p> ¡BIENVENIDO A MI TIENDA! </p>
    </body>
  </html>
  `
  //-- Meter el mensaje en la respuesta
  res.write(msg);

  //-- Ahora terminamos la respuesta, invocando el métido end
  res.end();

}).listen(8080);
  • Probar a cambiar el tipo mime: por ejemplo poniendo una incorrecto y probarlo

Tipos mimes

En general, tu servidor deberá devolver 3 tipos de ficheros, que se corresponden con los siguientes tipos mime:

  • Páginas HTML: "text/html"
  • Páginas de estilo: CSS: "text/css"
  • Imágenes: "image/png", "image/jpg"

Deberás deducir el tipo de fichero que te piden (puedes por ejemplo acceder a la extensión del fichero pedido) y generar la cabecera correspondiente con el tipo mime adecuado

Probando tu servidor

Tu servidor debe ser capaz de servir HTML, CSS e imágenes. Lo puedes probar como se indica a continuación:

  • Descárgate el fichero test.zip
  • Descomprímelo
  • Mete tu servidor dentro
  • Arráncalo y comprueba que funciona

  • Conéctate desde un navegador en otro ordenador del laboratorio. Debería funcionar igual

El HTML de prueba es este:

<!DOCTYPE html>
<html lang="es" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Mi tienda</title>
    <link rel="stylesheet" href="/css/micss.css">
  </head>
  <body>
    <img src="logo_node.png" alt="logo de node.js">
    <p>Esto es una prueba....</p>
    <a href="test1.html">Artículo 1</a>
  </body>
</html>

El navegador, al procesarlo, realizará una petición al servidor de la hoja de estilo. La que se usa es esta:

body {
  background-color: lightblue;
}

p {
  color: green;
}

Autores

Licencia

Enlaces

⚠️ **GitHub.com Fallback** ⚠️