Hemos visto cómo podemos crear un mini servidor web, y como podemos ir programando las partes de nuestra aplicación en ficheros independientes, que llamaremos módulos.
Esto nos permite que nuestra aplicación crezca todo lo que necesitemos, pero nuestro servidor no es capaz de servir ficheros…y eso es lo que vamos a solucionar en este articulo
Con todo lo que hemos hecho en estos artículos, nuestro servidor recibe una llamada, y siempre contesta un texto que hemos escrito en nuestro módulo «server»
Además, para generar la respuesta no tiene en cuenta nada; no importa lo que escribáis en la dirección URL,
El resultado siempre será el mismo.
Lo primero que tenemos que hacer es analizar lo que nos han escrito, para poder tomar decisiones, para ello, vamos a incorporar a nuestro servidor una línea:
Tras esta modificación, veréis que en la consola aparece lo que escribamos en la URL; en el caso anterior,
Si hacéis alguna prueba más, comprobaréis también que cuando no indicamos nada en la ruta, nos aparece la ‘/’
Nuestro primer paso, podría ser el que nuestro servidor sepa contestar con un fichero llamado «index.html» en dicha situación; para ello podríamos hacer:
En la linea 11 creo e inicializo una variable en donde dejaré el archivo a devolver; en la 12, compruebo la url y si es la raíz, en la 13 dejo el nombre del fichero que quiero devolver, y si no, dejo en esa variable, lo que me ha llegado de la entrada, que de momento, serán solamente nombres de ficheros.
Para nuestro siguiente paso, necesitaremos incorporar dos módulos más del core de Node.js:
El módulo «path» nos permite manipular rutas, extrayendo partes, juntándolas o normalizandolas, mientras que el módulo «fs nos permite manipular ficheros (leer, grabar,…)
Una vez en nuestras variables, modificamos nuestro código:
En la línea 18, extraigo de la variable «archivo» la parte de la extensión, para poder determinar el tipo de contenido
En la línea 19 y 20 preparo los valores por defecto que quiero para las carpetas en donde guardare mis ficheros y el tipo de contenido, en este caso, «html»
En las líneas 21 a 32, según la extensión, añado la subcarpeta, si es necesario, y modifico el tipo de contenido que voy a enviar.
Con todas las variables ajustadas, utilizamos otro de los métodos de «path» (línea 33) que nos permite unir trozos de ruta y las normaliza (corrige detalles sintácticos)
Ahora que ya en la variable «dirección» (línea 34) tenemos una ruta completa, podemos llamar a la función «responder» que definimos a continuación
En la linea 47 utilizamos un método de objeto «fs» para comprobar si el fichero cuya ruta hemos calculado antes, existe, y le pasamos una rutina que llamará por «callback» en cuanto lo sepa.
Si el fichero existe, nos enviará a salida un mensaje de «Fichero encontrado», y si no, nos enviará un error 404.
Para terminar la preparación, podéis crear el conjunto de carpetas según la definición que hemos hecho:
y en el fichero «index.html» podemos poner cualquier cosa como:
Aunque de momento, no lo veréis, pero si paráis el servidor y lo volveis a arrancar, cuando pidáis una pagina,veréis aparecer el mensaje de la linea 50 si existe el fichero que pedís, (‘/’ o index.html’) o un mensaje de error 404 en el resto de casos.
Sirviendo ficheros
Si ya entendéis la como funciona todo el sistema de decisiones, podemos probar ahora de empezar a servir ficheros. El primero de todos, ‘index.html’
Primero,veamos como queda la función responder:
Hacemos que reciba un parámetro más, que hemos calculado anteriormente (linea 45), y en la linea 49, utilizamos un método del objeto «fs» que lee un fichero en disco, y llama a la rutina que indiquemos, cuando ha terminado la lectura. (un nuevo ejemplo de callback).
Al finalizar la lectura, llama a la función que le hemos pasado, con dos parámetros; une (error) es un indicador de si se ha producido un error o no; y en caso de error, enviaremos un error http 500, y el otro parámetro es el contenido del fichero leído.
Cuando no se produce error, enviamos, en la linea 54 un status http 200, y el contentType recibido, y a continuación todo el fichero leído, a la vez que cerramos la respuesta. (línea 55)
Para que esta nueva versión funcione, debéis modificar la llamada a la función responder, para añadirle el nuevo parámetro.
Con algo tan sencillo como esto, hemos conseguido montar un rapidísimo servidor web capaz de servir todo tipo de paginas estáticas, y ademas seleccionando las carpetas de donde va a sacar los ficheros. Esto último, es importante que lo recordéis, ya que en función de la extensión, antepondrá a cualquier ruta que le indiquéis, los caminos que le hemos diseñado, aunque, mientras mantengáis los log, siempre veréis a donde va a ir a buscar cada fichero
Para terminar de ver en acción un ejemplo un poco mas completo, podéis modificar el fichero «index.html», y escribir un fichero estilo.css, y un script.js, cada uno en su carpeta.
Aquí tenéis lo que he puesto en mis ficheros; el index:
Observad que como los directorios de los scripts y de las hojas de estilo las ponemos por programación, Eclipse nos indica un error al no encontrarlas donde él espera.
La hoja de estilos:
Y el script:
Y eso es todo. Tal y como hemos dejado el proyecto, deberíais recibir algo como esto:
Podéis revisar como funciona el servidor, y hacer modificaciones. Recordad que cada vez que modifiquéis los módulos javascript que corren en el servidor, en nuestro ejemplo start.js, y server.js, debéis parar y volver a arrancar vuestra aplicación.
4 comentarios