Laboratorio de Desarrollo Software! Node.js

Transcripción

1 Laboratorio de Desarrollo Software Node.js Hoyo ver:

2 Node.js Node.js is a platform built on Chrome's JavaScript runtime for easily building fast, scalable network applications. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, perfect for data-intensive real-time applications that run across distributed devices. 2

3 Consultar la documentación de Nodejs en su sitio Web nodejs.org. Modules Events URL Net HTTP Paquetes de terceros: Connect ( Express ( - Los paquetes se administran con el comando npm (node package manager) 3

4 Módulos Cuando un programa crece demasiado, no puede mantenerse todo su código en un único fichero. Node.js adopta algunas de las especificaciones propuestas por el movimiento CommonJS. Incorpora su especificación de módulos. Cómo se usa? Para crear módulos: - Dividir en varios ficheros el código Javascript. Cada fichero es un módulo dedicado a una labor. - Las variables y funciones definidas en un módulo son privadas del módulo. No se ven en otras partes del programa. Usar exports para exportarlas o hacerlas visibles. Para usar/cargar un módulo se usa la función require. - Devuelve el objeto exports del módulo. 4

5 var banco = require("./banco"); banco.ingresar(200); banco.pagar(100); banco.ingresar(300); banco.ingresar(400); banco.pagar(150); banco.pagar(100); banco.ingresar(200); banco.pagar(100); console.log( banco.extracto() ); main.js 5

6 // El saldo de la cuenta var saldo = 0; // Numero de movimientos realizados var movimientos = 0; // Ingresar dinero function ingresar(euros) { saldo = saldo + euros; movimientos++; } // Pagar factura function pagar(euros) { saldo = saldo - euros; movimientos++; } // Extracto function extracto() { return "Quedan " + saldo + " euros tras " + movimientos + " operaciones"; } exports.ingresar = ingresar; exports.pagar = pagar; exports.extracto = extracto; banco.js 6

7 // El saldo de la cuenta var saldo = 0; // Numero de movimientos realizados var movimientos = 0; // Ingresar dinero exports.ingresar = function(euros) { saldo = saldo + euros; movimientos++; } // Pagar factura exports.pagar = function(euros) { saldo = saldo - euros; movimientos++; } // Extracto exports.extracto = function() { return "Quedan " + saldo + " euros tras " + movimientos + " operaciones"; } 7 Otra versión de banco.js

8 Ejercicio: Añada al fichero banco.js: - Una función llamada intereses que cada vez que se ejecuta, aumenta el saldo de la cuenta corriente en un 2% por los intereses generados. saldo *= 1.02; - La función intereses no tiene parámetros. Añada al fichero main.js: - Una llamada a la función intereses seguida de una llamada a la función extracto. El segundo extracto debe se un 2% mayor que el primero. Ejecute main.js y compruebe si el saldo aumento un 2%. 8

9 Eventos El modelo de programación de Javascript está basado en eventos. Los eventos son el alma de Nodejs. Modelo mono-hilo. Funcionamiento: Algunos objetos emiten eventos cuando ha ocurrido algo. Enganchamos en los eventos que nos interesen unas funciones (llamadas callbacks) que se ejecutan cuando se disparan esos eventos. El módulo events de Nodejs permite que el programador cree sus propios eventos. En los puntos que desee del código puede emitir un evento personalizado para indicar que ha ocurrido algo. Al emitirse el evento se ejecutan las funciones que se hayan registrado para el evento. 9

10 var events = require('events'); // Tunel en el que entran y salen coches. // Genera eventos informando de estos hechos. var tunel = new events.eventemitter(); // Callback para el evento Entrar. function onentrar(coche) { console.log('apuntar la hora y el coche '+coche); } // Callback para el evento Salir. function onsalir(coche) { console.log('poner multa a '+coche); } // Registrar que callbacks se ejecutaran cuando se // produzcan los eventos Entrar y Salir. tunel.on('entrar', onentrar); tunel.on('salir', onsalir); // El programa empieza a funcionar y genera // eventos Entrar y Salir de vez en cuando. tunel.emit('entrar','bmv 1234 QQQ'); tunel.emit('entrar','seat 6665 HHH'); tunel.emit('entrar','opel 1551 CCC'); tunel.emit('salir','seat 6665 HHH'); tunel.emit('salir','opel 1551 CCC'); tunel.emit('salir','bmv 1234 QQQ'); 10

11 var events = require('events'); // Tunel en el que entran y salen coches. // Genera eventos informando de estos hechos. var tunel = new events.eventemitter(); // Registrar que callbacks se ejecutaran cuando se // produzcan los eventos Entrar y Salir. tunel.on('entrar', function(coche) { console.log('apuntar la hora y el coche '+coche); } ); tunel.on('salir', function(coche) { console.log('poner multa a '+coche); }); // El programa empieza a funcionar y genera // eventos Entrar y Salir de vez en cuando. tunel.emit('entrar','bmv 1234 QQQ'); tunel.emit('entrar','seat 6665 HHH'); tunel.emit('entrar','opel 1551 CCC'); tunel.emit('salir','seat 6665 HHH'); tunel.emit('salir','opel 1551 CCC'); tunel.emit('salir','bmv 1234 QQQ'); Igual pero usando funciones anónimas 11

12 Funcionamiento síncrono bloqueante típico (faltan algunos if para los errores): exports.show = function(req, res, next) { var user = models.user.find({where: {id: req.post.authorid}}) req.post.author = user {}; var attachments = req.post.getattachments({order: 'updatedat DESC }); var comments = models.comment.findall({offset: req.pagination.offset, limit: req.pagination.limit, where: {postid: req.post.id}, order: 'updatedat DESC', include: [{model: models.user, as:'author'}] }); var new_comment = models.comment.build({ body: 'Introduzca el texto del comentario'}); res.render('posts/show', {post: req.post, comments: comments, comment: new_comment, attachments: attachments}); }; Esto no es un ejemplo Node.js correcto. Solo ilustra la idea. 12

13 Funcionamiento asíncrono: exports.show = function(req, res, next) { models.user.find({where: {id: req.post.authorid}}).success(function(user) { req.post.author = user {}; req.post.getattachments({order: 'updatedat DESC'}).success(function(attachments) { models.comment.findall({offset: req.pagination.offset, limit: req.pagination.limit, where: {postid: req.post.id}, order: 'updatedat DESC', include: [{model:models.user, as:'author'}] }).success(function(comments) { var new_comment = models.comment.build({ body: 'Introduzca el texto del comentario' }); res.render('posts/show', { post: req.post, comments: comments, comment: new_comment, attachments: attachments }); }).error(function(error) {next(error);}) }).error(function(error) {next(error);}); }).error(function(error) {next(error);}); }; 13

14 Servidores WEB 14

15 net > http > connect > express Podemos desarrollar un servicio web usando módulos de bajo nivel: Net o HTTP. - Es un nivel demasiado bajo que nos obliga a escribir mucho código. - Y ese código es igual/repetido en todos los servicios web. Mejor usar algún framework de más alto nivel: Express. - Express se basa en Connect. Proporciona middlewares. 15

16 Servicios Web usando módulo Net 16

17 Qué hay que hacer? El módulo Net permite crear un servidor que atiende las conexiones TCP realizadas por los clientes. Nosotros tenemos que implementar el protocolo HTTP sobre esto. Implementar escuchadores para los eventos: connection, data, error, end,... Analizar los datos recibidos: - Método de la petición HTTP, - Versión del protocolo, - URL (ruta, query,...) - Cabeceras (tipo de contenidos, codificación, autenticación, cookies, tamaño, caches,...), - Datos Devolver una respuesta HTTP para cada petición HTTP. - Código de respuesta, cabeceras, datos. 17

18 Servidor HolaMundo (v1) var net = require('net'); var body = '<html><head><title>hola Mundo</title></head>'+ '<body>hola Mundo</body></html>'; net.createserver(function(client) { // No espero a nada. // Cuando un cliente se conecta, contesto y cierro. client.write('http/ OK\n'); client.write('content-length: '+ body.length+'\n'); client.write('content-type: text/html\n'); client.write('\n'); client.end(body); }).listen(3000); Termino enviando el body. Función a ejecutar cada vez que se conecta un cliente. Envío cabecera 18

19 Servidor HolaMundo (v2) var net = require('net'); var body = '<html><head><title>hola Mundo</title></head>'+ '<body>hola Mundo</body></html>'; net.createserver(function(client) { // No miro nada. // Al recibir cualquier cosa: log, contesto y cierro. client.on('data',function(data) { Función a ejecutar cuando client genera el evento 'data' console.log(data.tostring()); client.write('http/ OK\n'); client.write('content-length: '+ body.length+'\n'); client.write('content-type: text/html\n'); client.write('\n'); client.end(body); }); }).listen(3000); 19 Función a ejecutar cada vez que se conecta un cliente.

20 Servidor HolaMundo (v3) Hay que analizar los datos que se vayan recibiendo y contestar adecuadamente. Cabeceras, formatos, codificaciones, url, query, datos, versiones, etc... Se deja como ejercicio al alumno. 20

21 Petición y respuesta HTTP intercambiadas en el ejemplo anterior Petición HTTP: GET / HTTP/1.1 Host: localhost:3000 Connection: keep-alive Cache-Control: max-age=0 User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_4) AppleWebKit/ (KHTML, like Gecko) Chrome/ Safari/ Accept: text/html,application/xhtml+xml,application/xml;q=0.9, */*;q=0.8 Accept-Encoding: gzip,deflate,sdch Accept-Language: es-es,es;q=0.8 Accept-Charset: ISO ,utf-8;q=0.7,*;q=0.3 Respuesta HTTP: HTTP/ OK Content-Length: 74 Content-Type: text/html <html><head><title>hola Mundo</title></head> <body>hola Mundo</body></html> 21

22 Probar el Servidor Crearse un fichero con el código del servidor. Llamar al fichero HolaMundo.js Desde un terminal lanzar el servidor: $ node HolaMundo.js Desde un navegador conectarse a: Inspeccionar los mensajes intercambiados con las herramientas de desarrollo web del navegador. Desde un terminal conectarse con: $ telnet localhost 3000 Enviar cualquier texto. 22

23 Servicios Web usando módulo HTTP 23

24 El Módulo HTTP El módulo HTTP nos ayuda con algunas tareas del protocolo HTTP. Recibe el flujo de datos y lo separa en cabeceras y cuerpo Pero no parsea su contenido, sólo lo separa. Crea objetos que representan las peticiones y las respuestas HTTP. Disponemos de métodos para manejar las cabeceras, código de respuesta, los flujos, codificación, etc... Tenemos nuevos eventos: Ejemplo: request se dispara cada vez que llega una nueva petición, y nos proporciona los objetos request y response. 24

25 Qué hay que hacer? Normalmente, cada vez que llegue una petición HTTP hay que: Analizar el método HTTP, el URL y las cabeceras de la petición que nos proporcionan en un objeto IncommingMessage. Leer los datos del cuerpo. Responder utilizando el objeto ServerResponse que nos proporcionan. - Poner un status code. - Ajustar cabeceras. - Enviar datos. 25

26 Ejemplo: Hola Mundo var http = require('http'); var body = '<html><head><title>hola Mundo</title></head>'+ '<body>hola Mundo</body></html>'; http.createserver(function(request, response) { console.log('nueva peticion.'); response.writehead(200, { 'Content-Type': 'text/html', 'Content-Length': body.length }); response.end(body); }).listen(3000); Código de respuesta y cabeceras. Función invocada para cada petición recibida. Me pasan objetos ServerRequest y ServerResponse. Envío datos y termino. 26

27 Cabeceras de la Respuesta HTTP/ OK Content-Type: text/html Content-Length: 74 Connection: keep-alive Esta es la cabecera que envía el ejemplo anterior: Hola Mundo 27

28 Ejemplo: Un Servidor de Ficheros var http = require('http'); var fs = require('fs'); var url = require('url'); http.createserver(function(request, response) { if (request.method = 'GET') { response.writehead(405, {'Allow': 'GET'}); response.end(); return; } var filepath = url.parse(request.url).pathname; if (filepath == '/') filepath = '/index.html'; var rs = fs.createreadstream('public'+filepath); rs.pipe(response); Intercambio asíncrono rs.on('error', function(error) { entre un readstream (rs) response.end('error leyendo '+request.url); }); y un writestream }).listen(3000); (response) 28 Sólo acepto GET Ruta raíz En public/.

29 index.html <DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>grupos</title> </head> <body> <h1> Página Principal</h1> <ul> <li> <a href="beatles.html">the Beatles</a> </li> <li> <a href="stones.html">rolling Stones</a> </li> <li> <a href=" en Google</a> </li> </ul> </body> </html> 29

30 beatles.html <DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>the Beatles</title> </head> <body> <h1>the Beatles</h1> <p> <a href="/">home</a> </p> <p> <img src='images/beatles.jpeg' alt='foto de The Beatles'> </p> </body> </html> 30

31 stones.html <DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>rolling Stones</title> </head> <body> <h1>rolling Stones</h1> <p> <a href="/">home</a> </p> <p> <img src='images/stones.jpeg' alt='foto de Rolling Stones' /> </p> </body> </html> 31

32 Imágenes jpeg images/beatles.jpeg images/stones.jpeg 32

33 Servicios Web usando módulo Connect 33

34 Qué es connect? Es un framework para crear servidores HTTP extensibles para node. Extensible = Permite añadir plugins (llamados middlewares). Los middlewares son funciones con la misma interface: function(request,response,next) Con los middlewares se forma una cadena de llamadas entre ellos. Un middleware pasa el control al siguiente middleware llamando a la función next() que le han pasado como parámetro. Un middleware termina la cadena de llamadas si no llama a next(). Los parámetros request y response son referencias a los objetos que representan la petición y la respuesta HTTP en curso. - Los middlewares suelen añadir a estos objetos nuevos atributos como efecto lateral. donde guardan resultados de su ejecución. Cada función middleware de la cadena se encarga de una tarea. 34

35 Middlewares Existentes logger request logger with custom format support csrf Cross-site request forgery protection compress Gzip compression middleware basicauth basic http authentication bodyparser extensible request body parser json application/json parser urlencoded application/x-www-form-urlencoded parser multipart multipart/form-data parser cookieparser cookie parser session session management support with bundled MemoryStore cookiesession cookie-based session support methodoverride faux HTTP method support responsetime calculates response-time and exposes via X-Response-Time staticcache memory cache layer for the static() middleware static streaming static file server supporting Range and more directory directory listing middleware vhost virtual host sub-domain mapping middleware favicon efficient favicon server (with default icon) limit limit the bytesize of request bodies query automatic querystring parser, populating req.query errorhandler flexible error handler y más módulos de terceros 35

36 Instalación Para instalar connect usamos npm (node package manager): $ npm install connect Se instalará en el directorio./node_modules Documentación:

37 Un Servidor de Ficheros var connect = require('connect'); connect.createserver( connect.logger(), connect.basicauth('1234','5678'), function(req, res, next) { if (req.method = 'GET') { res.writehead(405, {'Allow': 'GET'}); res.end(); return; } next(); }, connect.static( public ), connect.errorhandler() ).listen(3000); Siguiente middleware Devuelve un middleware para manejar los errores 37 Devuelve un middleware que muestra logs por consola Devuelve un middleware para autenticación básica Middleware propio para aceptar sólo peticiones GET Devuelve un middleware que sirve los ficheros situados en public

38 38

39 Manejo de los Errores La ejecución secuencial de los middlewares se interrumpe si: Alguna sentencia lanza una excepción. Nosotros lanzamos una excepción programáticamente: throw new Error('Houston, tenemos un problema'); Llamamos a next pasándole un parámetro: next(new Error('Houston, tenemos otro problema')); En estos casos la ejecución secuencial de middlewares salta al siguiente middleware de manejo de errores. Son los que tienen la signatura: function(error, req, res, next); El middleware de manejo de errores: Seguramente llamará a res.writehead, res.write y res.end para contestar él mismo. Si arregla el problema llamará a next() para seguir con el siguiente middleware. O puede que lance otra excepción o llame a next(error). - Se saltará al siguiente middleware de manejo de errores. Connect proporciona un middleware de manejo de errores: connect.errorhandler() 39

40 Servicios Web usando módulo Express 40

41 Qué es express? Documentación: Es un framework para el desarrollo de aplicaciones Web con Node.js. Características: Extiende connect (uso de middlewares), manejo de rutas, soporte de múltiples motores de plantillas para la generación de vistas, negociación del formato de los contenidos, configurable para entornos de producción/desarrollo/pruebas, proporciona un ejecutable para crear rápidamente una versión inicial de la aplicación, etc. 41

42 Es importante recordar que Express deriva de Connect. y por tanto, todos los middlewares disponibles en Connect están disponibles directamente en Express. - Así, connect.bodyparser() está disponible como express.bodyparser(). Una de las características más importantes de Express es la configuración de rutas. En función del método y de la url de la petición HTTP que acaba de llegar, indicar que middlewares son los encargados de atenderla. app.get('/login',function(req,res){res.send("hola")}); app.post('/posts', function(req, res, next) { if (req.algunattr) { res.send("no me gusta"); } else { next(); } }, function(req, res) {res.send("hola")}); 42

43 Actividad 1.1: Crear Esqueleto de una Aplicación Instalar el módulo express: $ sudo npm install -g express Creamos una aplicación en el directorio demo: $ express demo // crea ficheros iniciales del proyecto $ cd demo // Cambiarse al directorio demo $ npm install // instala dependencias declaradas en package.json Ejecutamos la aplicación: $ node app.js Y nos conectamos con un navegador a 43

44 Ficheros Creados package.json Información de la aplicación que hemos creado. La parte más importante es dependencies. - Contiene detalles sobre los paquetes de los que dependemos. - Usaremos npm install para instalar las dependencias. public/ Directorio donde guardaremos ficheros estáticos. - hojas de estilo, scripts en javascript, imágenes,... 44

45 views/ Directorio que contiene los ficheros con las vistas y el layout. Por defecto se usa el motor de plantillas jade. views/layout.jade Es la página de layout donde se insertarán las vistas generadas. - Sustituyendo la variable body. views/index.jade La vista de la ruta raíz (/) creada por express. routes/index.js Es el módulo que proporciona el método asociado a la ruta raíz. routes/user.js Es un módulo de ejemplo que proporciona un método para listar usuarios. Esta asociado a la ruta /users. 45

46 app.js Es el programa principal. Descripción del código: - Cargar módulos. - Crea el servidor http. - Configura la aplicación: usar jade como motor de las vistas. middleware para parsear el body de las peticiones HTTP. middleware para sopotar cambiar el método HTTP al especificado por _method. middleware para permitir crear rutas. middleware para atender páginas estáticas. middleware de atención errores. - usa configuraciones diferentes para producción y desarrollo. - Define las rutas. - Empieza a atender peticiones en el puerto o donde indique la variable de entorno PORT. 46

47 Actividad 1.2: Servir Páginas Estáticas Continuamos con el ejemplo desarrollado en la actividad 1.1: Copiar los ficheros index.html, beatles.html y stones.html en el directorio public, y copiar los ficheros beatles.jpeg y stones.jpeg en public/images. Cambiar la ruta raíz que creó express para hacer una redirección a /index.html - Cambiamos el contenido de routes/index.js por: exports.index = function(req, res){ // res.render('index', { title: 'Express' }); res.redirect('/index.html'); }; Añada en el directorio public, una página html que muestre el porcentaje de población en cada una de las provincias españolas. - Actualice index.html añadiendo un enlace para acceder a esta página. Añada en el directorio public los ficheros necesarios para jugar al Pong. - Actualice index.html añadiendo un enlace para acceder a esta página. 47

48 Notas En el fichero app.js generado automáticamente al crear el esqueleto de la aplicación, hay dos rutas configuradas: La primera ruta configurada es: app.get('/', routes.index); Esta sentencia configura una ruta para que si la URL de la petición HTTP es /, entonces ejecute el método index del módulo routes. - Este método está definido en routes/index.js. exports.index = function(req, res){ // res.render('index', { title: 'Express' }); res.redirect('/index.html'); }; - Estamos diciéndole al navegador que haga una redirección al URL /index.html. Si el servidor recibe una petición HTTP al URL /index.html, y dado que en app.js no se ha configurado ninguna ruta para esta URL, se termina ejecutando el middleware que sirve páginas estáticas (express.static). - Este middleware está configurado para servir los ficheros del subdirectorio public, por lo que se contestará enviando al navegador el fichero public/index.html. La segunda ruta configurada es: app.get('/users', user.list); 48