Buenos Dias Princesa - BlueJeans

Introduccin a HTTP
Juan Quemada, DIT - UPM
Clientes, servidores y la nube
TCP UDP
IP
Internet
n
n
n
Clientes: dan acceso a los usuarios a la informacin y los servicios

Servidores: alojan la informacin y los servicios
La nube: conjunto de terminales y servidores
w interconectados con las aplicaciones y protocolos de Internet
TCP/IP
n
protocolos para crear aplicaciones sobre redes hetereogeneas

w IP (Internet Protocol): protocolo de interconexin de redes hetereogeneeas
n
Protocolo del cual hereda su nombre Internet
Cada elemento de Internet tiene una direccin IP diferente: 112.9.0.144, ...
w TCP y UDP: protocolos de transporte de informacin

n
Las mayora de las aplicaciones de Internet usan el servicio TCP

n
Conectando clientes y servidores con circuitos virtuales
Voz y video sobre IP usan el servicio UDP
Servidor (host)
Servidores y
puertos
puerto 25
direccin
IP
email:
SMTP
puerto 80
Web:
HTTP
Puerto (TCP)
n
Direccin de aplicacin de 16 bits dentro de la mquina servidora

w Donde se instala el programa servidor
El programa servidor es lo que normalmente denominamos servidor

w Cliente y servidor se comunican a travs de circuitos virtuales TCP (son fiables)
n
Cliente y servidor se comunican con un protocolo de aplicacin: HTTP, SMTP, ..
Los servicios tienen un protocolo y un puerto por defecto

n
n
n
Web:
protocolo HTTP (puerto 80), HTTPS (443)
Email:
protocolo SMTP (puerto 25), POP3 (110), IMAP143)
Shell segura: protocolo SSH (puerto 22)
Si un servidor no est en el puerto por defecto

n
Su direccin debe incluir el puerto, p.e. dit.upm.es:8080, upm.es:8000
Juan Quemada, DIT, UPM
URIs y
URLs
Formato de un URL:
<schema:><//><authority></path><?query><#anchor>
<schema:> = protocolo o esquema de acceso al recurso
<authority> = <UserInfo@><host><:port>
</path>
= identificador del recurso en el servidor
<?query>
= parmetros enviados al recurso
<#anchor> = fragmento o parte del recurso
URI - Uniform Resource Identifier

n
identificador de un recurso (servicio) de Internet

w RFC 3986 (2005): http://tools.ietf.org/html/rfc3986
Existen 2 tipos de URI

n
URL - Uniform Resource Locator

w Direccin fsica de un recurso, incluyendo el servidor donde se almacena
n
http://es.wikipedia.org/wiki/Localizador_de_recursos_uniforme
URN: Uniform Resource Name

w Direccin lgica independiente de lugar fsico (poco utilizado)
Ejemplos de URL de email, pgina Web, ftp, ..

n
n
n
URL Web: http://etsit.upm.es/anuncios/index.html

URL email: mailto:jose@dit.upm.es
URL ftp:
ftp://ftp.funet.fi/pub/standards/RFC/rfc959.txt
Cliente enva SOLICITUD a servidor
HTTP
Servidor envia RESPUESTA a cliente
Protocolo transaccional de acceso a recursos

n Transaccin HTTP se compone de solicitud y respuesta
w Mtodo HTTP: tipo de solicitud HTTP (GET, POST, PUT, DELETE, . )
Solicitud y respuesta son mensajes independientes (como emails)

HTTP no necesita conectividad TCP extremo a extremo
n Permite el uso de proxies, caches, firewalls,
HTTP es un protocolo extensible que ha evolucionado mucho
n HTTP 0.9, 1.0, 1.1 (1999, 2014,), extensiones WebDav, ..
w Resumen: http://es.wikipedia.org/wiki/Hypertext_Transfer_Protocol
w Norma - RFCs 7230-37: https://datatracker.ietf.org/doc/rfc7230/
w http://www8.org/w8-papers/5c-protocols/key/key.html, http://www.jmarshall.com/easy/http/
Solicitud HTTP GET
Transaccin HTTP
GET /me.htm HTTP/1.1
1a linea
Host: upm.es
parmetros Accept: text/*, image/*

de cabecera Accept-language: en, sp
Solicitud
HTTP
Cliente
Web
(HTTP)
TCP
........
Servidor
Web
(HTTP)
Respuesta
HTTP
UDP
Circuito
virtual TCP
Circuito
virtual TCP
User-Agent: Mozilla/5.0
Cuerpo
Respuesta HTTP GET

TCP
UDP
1a linea
HTTP/1.1 200 OK
Server: Apache/1.3.6
Router
IP
IP
Red 1
IP
....
Router
IP
IP
....
....
Red n
IP
parmetros
Content-type: text/html
de cabecera
..........
Content-length: 608
Cuerpo:
<html> .. </html>
Navegador enva solicitud y servidor devuelve respuesta, p.e.

n
n
Solicitud: solicitud GET de un fichero o recurso

Respuesta: respuesta del servidor enviando el fichero o recurso solicitado
Mensajes (solicitud o respuesta): constan de Cabecera y Cuerpo.

Cabecera: string formado por 1a linea y parmetros. Acaba con una lnea en blanco (\n\n).
-Primera lnea de la solicitud: incluye el mtodo, la ruta o path que identifica el recurso
en el servidor y la versin de HTTP utilizada por el cliente.
-Primera lnea de la respuesta: incluye versin HTTP del servidor, cdigo y un mensaje
de texto explicativo de la respuesta.
-Parmetros de la cabecera: Cada parmetro es un string con el formato: Nombre: valor,
que ocupa una lnea (acaba con \n).
Cuerpo: incluye el recurso enviado que puede ser de cualquier tipo, p.e. string, imagen, .
Solicitud
1a linea
Parmetros
de cabecera
Formato
Respuesta
Cuerpo
1a linea
Parmetros
de cabecera
Cuerpo
GET /dir/me.htm HTTP/1.1\n
Mtodo GET, recurso, versin-HTTP 1.1
Host: upm.es\n
Accept: text/*, image/*\n
Accept-language: en, sp\n
Host: identifica el servidor, se incluye porque el

circuito TCP no es extremo a extremo
Accept: tipos MIME de recursos aceptados
Accept-language: lenguajes del cliente
Acaba con linea en blanco: \n\n
........
User-Agent: Mozilla/5.0\n
\n
GET: NO incluye cuerpo en la solicitud
HTTP/1.1 200 OK\n
Versin HTTP 1.1, 200 (todo ok), mensaje
Server: Apache/1.3.6\n
Content-type: text/html\n
Content-type: tipo MIME de recurso, text/

html es el tipo de una pgina Web
Content-length: nmero (decimal) de octetos
Acaba con linea en blanco: \n\n
..........
Content-length: 608\n
\n
<html> .. </html>
pgina HTML (recurso)

7
Solicitud HTTP GET

1a linea
Tipos MIME
Host: upm.es
parmetros Accept: text/*, image/*

de cabecera Accept-language: en, sp
Tipos MIME: definen el tipo de un recurso

n
GET /me.htm HTTP/1.1
........
Aparecieron en email para tipar ficheros adjuntos
Cuerpo
w Su uso se ha extendido a otros protocolos y en particular a HTTP

w Tipos: http://www.iana.org/assignments/media-types/media-types.xhtml
Un tipo MIME tiene 2 partes tipo / subtipo,

n
Tipos: application, audio, example, image, message, model, multipart, text, video
Respuesta HTTP GET
Ejemplos:
n
n
n
n
image/gif, image/jpeg, image/png, image/svg, ..

text/plain, text/html, text/css, ......
application/javascript, application/msword, ..
..
1a linea
HTTP/1.1 200 OK
parmetros
de cabecera
..........
Content-length: 608
Cuerpo:
Pg. HTML
<html> .. </html>
HTTP utiliza el tipo mime para tipar el contenido del cuerpo (body)
n
n
Cabecera Request: Accept: text/html, image/png, ...

Cabecera Response: Content-type: text/html
8
Cdigos de estado (HTTP status codes)

Respuestas informativas (1xx)
n
100 Continue
// Continuar solicitud parcial
Solicitud finalizada (2xx)

n
200 OK
// Operacin GET realizada satisfactoriamente
201 Created
// Recurso creado con POST, PUT
206 Partial Content
// para uso con GET parcial
Redireccin (3xx)
n
301 Moved Permanently // Recurso se ha movido, actualizar URL
303 See Other
// Enva la URI de un documento de respuesta
304 Not Modified
// Cuando el cliente ya tiene los datos
Error de cliente (4xx)

n
400 Bad request
// Comando enviado incorrecto
404 Not Found
// Recurso no encontrado
n
n
n
405 Method Not Allowed // Mtodo no permitido

409 Conflict
// Recurso ya no esta
410 Gone
Respuesta HTTP GET

1a linea
HTTP/1.1 200 OK
parmetros
de cabecera
..........
Content-length: 608
Cuerpo:
Pg. HTML
<html> .. </html>
Error de Servidor (5xx)

n
500 Internal Server Error // El servidor tiene errores, p.e. error lectura disco, .
9
Mtodos (verbos, comandos) de HTTP

Interfaz Uniforme o CRUD (bases de datos):
POST:
GET:
PUT:
DELETE:
Crear un recurso en el servidor

Pedir un recurso al servidor
Modificar un recurso del servidor
Borrar un recurso del servidor
(Create)
(Read)
(Update)
(Delete)
ms mtodos
HEAD:
similar a GET, pero solo pide cabecera al servidor
OPTIONS: Determinar qu mtodos acepta un servidor
TRACE:
Trazar proxies, caches, hasta el servidor
CONNECT: Conectar a un servidor a travs de un proxy
...........
10
Servidor Web
11
Servidor Web
Programa residente en la mquina servidora
n
Sirve recursos Web (pginas) con transacciones HTTP GET

w Un recurso se identifica con un URL, por ej. http://etsit.upm.es/anuncios/index.html
n
El URL Web lleva asociado solo el mtodo GET del protocolo HTTP
Los servidores tambin pueden crear servicios mas complejos

n
Tiendas electrnicas, redes sociales, blogs,

w Se ver en temas posteriores
Solicitud HTTP GET:
definida por URL
1) Navegador solicita pgina

Web, identificada con un URL
2) La pgina se visualiza en el
navegador una vez cargada
con HTTP - GET
Respuesta HTTP: pgina

Web con script
Servidor sirve
recursos Web que
pueden estar en
ficheros o BBDD
12
Repositorio de recursos Web

Un servidor Web reserva un directorio para recursos Web
n
n
Los ficheros del directorio y sus subdirectorios son accesibles con HTTP GET
El directorio de recursos (pginas, ..) Web suele denominarse public, www, ..
1) Navegador solicita
http://xx.es/dir/hola1.html
2) Navegador
visualiza pgina
GET /dir/hola1.html HTTP1.1
Respuesta HTTP: pgina

Web con script
Servidor xx.es
sirve pginas
Web del
pueden estar
en directorio
reservado
13
URL Web
URL Web: direccin de recurso accesible con HTTP GET
n
EL URL Web solo permite navegar por pginas Web, pero no modificar recursos
Componentes bsicos del URL:

n
n
n
http://upm.es/dir/hola1.html
http: Protocolo o esquema de acceso al recurso (significa HTTP GET)

upm.es: Direccin del servidor donde reside el recurso
/dir/hola1.html: Ruta (path o camino) al fichero dentro del servidor
Ruta (path)
n
ruta hasta el recurso

w desde la raz del directorio de recursos
Los servidores Web suelen configurarse

n
Con el nombre index.html o index.htm opcional

w Es decir, /dir/index.htm es equivalente a /dir/
14
URLs relativos
Son relativos al URL (recurso) actual
n
Solo incluyen la ruta (path), el navegador aade host, protocol, .

w Ambos recursos debern estar en el repositorio del mismo servidor
Los URLs relativos pueden ser de 2 tipos:

n
Ruta o path absolutos:
/lib/coches/vw.html
w Ruta desde el directorio raz del repositorio de recursos del servidor

n
Ruta o path relativos:
coches/vw.html,
vw.html
w Ruta desde el directorio del recurso actual en el servidor
15
Interaccin HTTP con el servidor

Cuando el servidor Web recibe una peticin HTTP GET
n
Enva el recurso en la respuesta con el cdigo 200 OK, si lo tiene

w El parmetro Content-Type: text/html contiene el tipo MIME del recurso enviado
Sino, responde con el mensaje de error correspondiente
Si el recurso es un fichero, su extensin determina su tipo MIME

n
n
n
n
xx.htm y xx.html -> text/html

xx.gif
-> image/gif
xx.css
-> text/css
..
w ver: http://webdesign.about.com/od/multimedia/a/mime-types-by-file-extension.htm
El navegador interpreta el recurso de acuerdo al tipo MIME recibido

n
el navegador muestra el cdigo HTML si una pgina HTML lleva el tipo text/plain
w En vez de el tipo mime text/html, que es el tipo que debera llevar
16
Cdigos de estado de un servidor Web

Respuestas informativas (1xx)
n
100 Continue
// Continuar solicitud parcial
Solicitud finalizada (2xx)

n
200 OK
// Operacin GET realizada satisfactoriamente, recurso servido
201 Created
// Recurso creado satisfactoriamente con POST, PUT
206 Partial Content
// para uso con GET parcial
Redireccin (3xx)
n
301 Moved Permanently // Recurso se ha movido, cliente debe actualizar el URL
303 See Other
// Enva la URI de un documento de respuesta
304 Not Modified
// Cuando el cliente ya tiene los datos
Error de cliente (4xx)

n
400 Bad request
// Comando enviado incorrecto
404 Not Found
// Recurso no encontrado, no hay ningn fichero con ese path
405 Method Not Allowed // Mtodo no permitido, p.e. se solicita mtodo POST, PUT, .
409 Conflict
// Existe conflicto con el estado del recurso en el servidor
410 Gone
Error de Servidor (5xx)

n
500 Internal Server Error // El servidor tiene errores, p.e. error lectura disco, .
17
Introduccin a express.js y al
middleware static
18
node.js y express
Express: paquete para crear servicios Web
n Accesibles por HTTP desde clientes
w Mas informacin: http://expressjs.com
express se basa en node.js y se instala con npm
n desde el servidor central en https://www.npmjs.org
..$ mkdir apps // crear un directorio para las apps express
..$ cd apps
// entramos en el directorio de trabajo
../apps$ npm install express@4.9.0 // Instala express v4.9.0

// en el directorio apps/node_modules/express
// Editamos una aplicacin express, por ejemplo mi_app.js y
../apps$ node mi_app.js
// la ejecutamos con node
19
Middleware (MW) static de express.js

Las aplicaciones express se construyen con middlewares (MWs)
n
Un middleware es una funcin que se instala en la aplicacin express
Un MW se instala en app con el mtodo app.use(MW)

n
Una vez instalado, un MW se ejecuta con cada solicitud HTTP que llega a app
w Doc: http://expressjs.com/4x/api.html#app.use
Middleware static: funcionalidad de un servidor Web esttico

n
Sirve pginas Web estticas, estilos CSS, libreras JavaScript, imgenes, ..

w Documentacin: http://expressjs.com/guide/using-middleware.html#middleware.built-in
Express se basa en el modulo connect.js

n
El concepto de middleware lo hereda de connect y puede utilizar sus MWs

w http://expressjs.com/guide/using-middleware.html#middleware.third-party
20
Aplicacin
express.js
Una aplicacin express es un programa en JavaScript que responde a solicitudes HTTP.

El programa carga en primer lugar el mdulo express en una variable.
var express = require(express);
A continuacin crea el objeto servidor invocando el modulo cargado como una funcin
que devuelve el objeto (este patrn se denomina una factora de objetos)
var app = express();
Por ltimo, se arranca el servidor en el puerto 8000. As responder a las solicitudes
HTTP que llegan a dicho puerto.
app.listen(8000);
21
Middleware
static
Un middleware se instala invocando el mtodo use() en app. Una
vez instalado, se ejecuta cada vez que llega una solicitud HTTP.
app.use(express.static(path.join(__dirname, 'public'))) instala el
middleware con el servidor de pginas Web estticas, incluido en
express. Las pginas deben alojarse en el directorio public.
Mas info en: http://expressjs.com/4x/api.html#middleware.builtin
path es un mdulo de node.js de gestin de rutas. Y path.join(..)
concatena dos rutas. Mas info: http://nodejs.org/api/path.html
__dirname: ruta (path) al directorio de ejecucin de la aplicacin.
Mas info en: http://nodejs.org/api/globals.html
22
Como
funciona el
MW static
El middleware static, igual que el resto de middlewares de la
aplicacin express, se ejecuta al llegar una solicitud HTTP al
servidor en el puerto 8000. El middleware static analiza el mtodo, la
ruta (path) y los parmetros de la solicitud HTTP y responde de la
siguiente forma:
1) Solo acepta solicitudes de tipo GET y rechaza el resto (POST,
PUT, DELETE, .) con 405 METHOD NOT SUPPORTED.
2) Si la ruta (path) referencia un fichero existente en el repositorio
de recursos Web, lo devuelve con 200 OK y parmetros asociados.
3) La respuesta al resto de solicitudes GET incluye el cdigo de
error correspondiente: 404 NOT FOUND (recurso no existe), 500
INTERNAL SERVER ERROR (error de servidor), .
23
Pgina dir/hola1.html
La captura del navegador Firefox con la consola abierta y
con red (Net) seleccionado, muestra la transaccin GET
realizado para traer al navegador la pgina identificada por:
http://localhost:8000/dir/hola1.html
24
Cabecera express.js
La consola Firefox permite ver los parmetros
de la solicitud y la respuesta al clicar encima.
- Status 200 OK: respuesta incluye recurso
- Content-Type: text/html; charset=UTF-8
-> indica pgina HTML en UTF-8
- Content-Length: 95
-> indica que el cuerpo lleva 95 octetos
Los dems parmetros se ven ms adelante.
http://localhost:8000/dir/hola1.html
25
Pgina hola.html
El servidor static sirve pginas
alojadas en el directorio public.
Sirve tanto pginas HTML como
otros recursos enlazados, como la
hoja de estilo hola.css de la
pgina hola.html.
Cada recurso se sirve con una
operacin HTTP GET diferente.
26
CURL
Conexin HTTP
CURL: cliente de acceso a

servicios de cliente-servidor
programable y muy completo.
La opcin -v (verboso) muestra
todos los detalles del proceso.
Ver opciones con:
$ curl --help
........
$ man curl
27
Introduccin a REST
28
Que es REST
REST: REpresentational State Transfer
n El estado se representa en el recurso transferido al cliente
w http://en.wikipedia.org/wiki/Representational_state_transfer
REST: Principios arquitecturales para aplicaciones Web escalables

n Propuestos por Roy Fielding en su Tesis Doctoral (2000)
w Roy Fielding fue co-diseador de HTTP y ha sido uno de los desarrolladores
principales del proyecto Apache
Conocida como: Arquitectura Orientada a Recursos (ROA)
Interfaces REST o Servicios Web RESTful

n Cliente y servidor interaccionan con Interfaz Uniforme de HTTP
w Mtodos GET, POST, PUT y DELETE
n
REST est muy extendido: Google, Twitter, Amazon, Facebook,
29
Interfaces REST
Interfaz REST
n
Cliente y servidor interaccionan con HTTP

w Cada operacin identifica el recurso con una ruta (path) diferente
n
Por ejemplo, /nota/5, /user/10, /notas/user/5, /grupo?n=23, ....
Solo utilizan mtodos o comandos del interfaz uniforme

n
n
n
n
n
GET:
trae al cliente (lee) un recurso identificado por un URL
POST: crea un recurso identificado por un URL
PUT:
actualiza un recurso identificado por un URL
DELETE: borra un recurso identificado por un URL
..... (HTTP tiene mas mtodos, pero no pertenecen al interfaz uniforme)
upm.es
HTTP GET upm.es/nota
HTTP POST google.com/crear?user=5

HTTP GET upm.es/grupo?n=23
HTTP GET upm.es/lista
google.com
apple.es
30
Principios REST
Direccionabilidad (Addressability) de los recursos
Uso del interfaz uniforme de HTTP: GET, POST, PUT y
DELETE
Comunicacin sin estado en el servidor (Statelessness)
Servicio hipermedia (Connectedness) conectado con URLs
Recursos en formatos abiertos: HTML, XML, JSON, RSS,
texto plano,
31
Direccionabilidad e interfaz uniforme

En una arquitectura orientada a recursos
n Todo recurso del servidor tiene una ruta (direccin) diferente
w Las rutas (paths) son las direcciones (pueden incluir query o ancla para informacin adicional)
n
Los recursos se procesan solo con los mtodos del interfaz uniforme
w GET, POST, PUT y DELETE
Ejemplo de una coleccin de usuarios (suele asociarse a una tabla de la DB)

n La ruta suele tomar el nombre de la coleccin en plural (usuarios)
w Las operaciones individuales identifican al usuario con un identificador en la ruta
w POST /usuarios?nombre=Pedro+Ramirez&edad=8 // Crear nuevo usuario
w GET
/usuarios
// Traer lista de todos los usuarios
w GET
/usuarios/2007
// Traer datos del usuario 2007
w DELETE /usuarios/2007
// Borrar usuario 2007 de la coleccin
w PUT
/usuarios/2007?edad=9
// Actualizar edad del usuario 2007
w ademas suele haber primitivas GET para cargar formularios asociados a POST y PUT
32
Solicitud
Seguridad e idempotencia
Respuesta
Seguridad e idempotencia son 2 propiedades importantes

n
n
Mtodo seguro (safe): no modifica datos en el servidor y puede ser cacheado

Mtodo idempotente: el resultado es independiente del nmero de invocaciones
Operacin idempotente
n
El resultado de invocar el mtodo n veces es igual a invocarlo 1 vez

w Por ejemplo:
x=2 es idempotente,
pero x=x+1 no es idempotente
Las operaciones asociadas a un interfaz REST deben ser idempotentes

w Por ejemplo:
PUT /usuario/2007?edad=9
Internet no es fiable
n
La invocacin de una solicitud HTTP puede ejecutarse n veces en el servidor

w Si la solicitud se pierde y hay reenvo, el mtodo se ejecuta solo 1 vez
w Si la respuesta se pierde y hay reenvo, el mtodo se ejecuta 2 veces en el servidor
33
Propiedades del interfaz uniforme

Interfaz uniforme o CRUD
n
Permite crear servicios desacoplados y escalables (http://restcookbook.com)
Propiedades de los mtodos del interfaz uniforme

n
n
n
n
POST:
GET:
PUT:
DELETE:
El ms peligroso (puede duplicar recursos)

Seguro (cacheable) e idempotente
idempotente
idempotente
Recomendaciones de diseo importantes

n
n
Tratar de minimizar el impacto de no idempotencia de POST

No utilizar nunca GET para modificar recursos del servidor
w Utilizar POST, PUT o DELETE segn el tipo de modificacin, porque GET puede ser
cacheado y no modificar los recursos

34
Servicio hipermedia sin estado en el servidor

El servicio se usa navegando por los recursos recibidos del servidor
n El recurso contiene el estado del cliente (suele ser una pgina Web)
w Las transiciones son los enlaces (URLs) y se navega al hacer clic en ellos
Los servidores escalan porque no guardan el estado de los clientes

n Solo gestionan recursos a travs del interfaz uniforme
w Con transacciones HTTP que son independientes entre s
Los clientes guardan siempre el estado de uso del servicio

n en la pgina Web o recurso cargadas, en cookies, en localStorage, .
35
Representacin de los recursos

Los recursos transferidos por el servidor al cliente
n
Representan el estado y las transiciones necesarios para navegar por el servicio

w Un mismo recurso se puede representar (o serializar) en distintos formatos
Formatos ms habituales de representacin de recursos:

n
n
n
n
n
HTML: para presentar informacin legible en un browser

w XHTML: versin sintacticamente ms estricta de HTML
JSON: Formato de serializacin de objetos Javascript
XML: Formato de datos tipo SGML del W3C
RSS: formato para representar colecciones (de feeds de blogs)
ATOM: formato para representar colecciones (de feeds de blogs)
HTTP usa el tipo MIME para tipar los recursos que transfiere
36
Aplicaciones REST con express.js

37
Solicitud HTTP (path, ..)
Mtodos de Ruta
Respuesta HTTP (body, ..)
Express posee mtodos que instalan middlewares asociados a

n verbos HTTP con rutas especficas
w get(path, MW), post(path, MW), put(path, MW), delete(path, MW), all(path, MW)
w MW solo se ejecuta si verbo y path coinciden con la solicitud HTTP
Los 2 primeros parmetros de un middleware MV(req, res, ..) son

n req: objeto JavaScript con parmetros de la Solicitud HTTP
w Doc: http://expressjs.com/4x/api.html#request
n
res: objeto JavaScript para configurar la Respuesta HTTP

w Doc: http://expressjs.com/4x/api.html#response
Documentacin
n Doc: http://expressjs.com/4x/api.html#app.VERB
38
El mtodo get(path, MW) instala el middleware MW en app para

que se ejecute solo cuando llegan Solicitudes HTTP: GET path.
Si llega otro mtodo (PUT, POST, DELETE) o es GET con otro
path, se pasa al siguiente middleware, sin ejecutar este.
Ruta GET
La invocacin de res.send(string) configura la Respuesta HTTP

en el objeto res del middleware con la configuracin estndar:
200 OK
- Cdigo:
- Content-Type: text/html
- Content-length: longitud del string en octetos
string
- Body:
y enva la Respuesta HTTP al cliente.
39
Un middleware se instala con el mtodo use(MW) o con una ruta, p.e.

get(path, MW). Los MWs se invocan en el orden de instalacin.
El middleware static se ejecuta primero. Si la solicitud es GET y si
existe el recurso identificado por el path, el recurso se sirve.
MW static
y ruta
Si el recurso no existe, pasa control al siguiente MW, es decir a la ruta

get(/mi_ruta, ) que responde a /mi_ruta con la respuesta
programada en el MW asociado (res.send(<html> </html>)
40
Si en el repositorio de recursos del middleware static existiese un

recurso esttico /mi_ruta/index.html este recurso se servir por el
middleware static con cualquiera de estos paths:
Prioridad
- /mi_ruta
- /mi_ruta/
- /mi_ruta/index.html
El MW de la ruta get(.)
nunca se ejecutar,
porque el MW static
atiende antes la peticin
y responde.
41
Los filtros get(path, MW) instalan middlewares que se invocan en el mismo

orden que han sido instalados.
Ms
rutas
Los 3 middlewares de este ejemplo finalizan la atencin a la Solicitud HTTP

al invocar res.send(), que enva la respuesta y finaliza la ejecucin. Por
lo que si uno de ellos atiende la solicitud, los siguientes no se ejecutarn.
Express interpreta la ruta * como cualquier path, por lo que el tercer MW
atender cualquier path que no haya sido atendido por los 2 primeros.
42
Parmetros
req y res
function(req, res) {..}
La documentacin de la API de
express en
http://expressjs.com/4x/api.html
contiene toda la informacin
sobre las aplicaciones express,
los middlewares y sobre los
objetos que se manejan, como
req y res.
43
El parmetro req de un MW express es un objeto con todo lo

relativo a la solicitud HTTP y permite conocer sus parmetros.
El ejemplo lista por consola del servidor el mtodo y el path
obtenidos de las propiedades method y path del objeto req y
el parmetro host : obtenido con el mtodo get() de la
librera express.
SOLICITUD:
RESPUESTA:
Objeto res:
parms de la
respuesta
GET /mi_ruta
HTTP1.1 200 OK
44
El parmetro res de permite configurar la Respuesta HTTP.

El ejemplo configura el tipo MIME de la pgina HTML enviada
como texto plano con res.type(text/plain). La respuesta HTTP
llevara por lo tanto el parmetro
Content-Type: text/plain
y el navegador interpretar la pgina HTML como texto plano
mostrando el cdigo HTML en vez de la pgina formateada.
Objeto res:
parms de
la respuesta
El programa configura adems explcitamente el el cdigo 200

OK con el mtodo status() de la API.
45
CURL
Conexin HTTP
CURL: cliente de acceso a

servicios de cliente-servidor
programable y muy completo.
La opcin -v (verbosa) muestra
todos los detalles del proceso.
Ver opciones con:
$ curl --help
........
$ man curl
46
Parmetros de ruta (path)

47
Acceso parmetros en la ruta (path)

Un cliente puede enviar parmetros
n
como parte de la ruta (path)

w Estos URLs se denominan URLs pesados o fat URLs
express.js permite identificar parmetros

n
en la definicin de rutas que acepta utilizando el caracter :

w Ejemplos
'/hola/:n'
n '/service/:op/user/:id'
n
// donde :n es un parmetro
// donde :op e :id son parmetros
Los parmetros pueden tomar cualquier valor

n
La ruta fija solo la parte que no son parmetros

48
Parmetros de ruta
Los parmetros req, res

dan acceso desde el
manejador function
(req, res) {..} a las
cabeceras HTTP de
solicitud y respuesta.
req guarda en params
los parmetros del URL
con el mismo nombre:
- req.params.n
- req.params.id
- req.params.op
49
Condiciones
en parmetros
Este ejemplo acepta URLs con paths

/user, /user/Pepe, /user/1, .. o
/user1/27, /user1/1, ..
pero no responder a URLs con paths
/usuario, /user2, /user1/Pepe, ..
50
Composicin y
ejecucin de middlewares
51
Middleware express
Middleware express
n
Funcin JavaScript que se ejecuta al llegar una transaccin HTTP

w Recibe la solicitud HTTP en el parmetro req y prepara la respuesta en el parmetro res
w Pasa control con next() al siguiente MW o con next(err) al siguiente MW de error
Se instalan con use(..) o con rutas como get(..), put(..), ..

n
El orden de ejecucin (invocacin) es el mismo en que han sido instalados
Los MWs permiten una programacin secuencial, modular y legible

n
Conservan la eficacia de la programacin por eventos

w http://expressjs.com/guide/using-middleware.html
w http://expressjs.com/resources/middleware.html
express.js se basa en el concepto de middleware de connect.js

n
n
Hereda muchos MWs: http://expressjs.com/resources/middleware.html

Proyecto connect: http://www.senchalabs.org/connect/
52
Composicin y terminacin de middlewares

express estructura la respuesta a una solicitud HTTP
n
Como una secuencia de middlewares donde

w cada middleware procesa algn elemento u opcin de la transaccin HTTP
La funcin next() permite pasar control al siguiente middleware
Un middleware puede terminar de 3 formas

n
Finalizando el proceso (si MW finaliza sin invocar next())

w En este caso se suele enviar la respuesta HTTP al cliente invocando send()
w La atencin a la solicitud HTTP acaba y los siguientes MWs ya no se ejecutarn
Pasando control al siguiente middleware

w Un middleware cede el control al siguiente MW invocando la funcin next()
Pasando control al siguiente middleware de error

w Un MW cede el control al primer MW de error invocando la funcin next(err)
53
Parmetros de un middleware
Un middleware tiene estos 3 primeros parmetros
n
middleware(req, res, next)

w el MW se puede invocar como MW(),
MW(req, res),
MW(req, res, next, id),
Un middleware de error incluye un error como primer parmetro

n
middleware_de_error(err, req, res, next)
Parmetros de un middleware
n
n
n
n
err: parmetro con error (solo en middleware de error)

req: parmetro con objeto con la informacin de la solicitud HTTP
res: parmetro con objeto donde se construye la respuesta HTTP
next: funcin de paso de control al siguiente middleware
54
Contador
de visitas
Los middleware de express se ejecutan en el orden en que se ha

instalado con app.use(<mideleware>). El middleware es una
funcin con hasta 3 parmetros: function(res, req, next)
req y res dan acceso a la solicitud y a la respuesta HTTP. La
funcin next() pasa el control al siguiente middleware.
Como next() no se invoca, la ejecucin finaliza en este
middleware, que enva la respuesta al cliente con send().
express.js utiliza app.locals
y res.locals para definir
variables locales en MWs.
app.locals es visible en todo
app y res.locals solo es
visible en res en el mismo
middleware (no se hubiese
podido utilizar aqu)
55
Los mtodos get(), post(), put() y delete() instalan

tambin middlewares.
middleware
get()
En este MW la condicin de if/else decide si

- se enva la respuesta al cliente con la funcin
send() y finaliza la atencin a la solicitud HTTP.
- se invoca la funcin next() y se pasa control al
siguiente middleware.
56
La function(err, res, req, next) define un middleware de error, donde el primer

parmetro err representa una condicin de error encontrada en otro middleware.
Si el user del primer get() no es Ana, Pepe o Eva, se invoca next( new Error(...))
pasando directamente al middleware de error (ver ejemplo).
middleware
de error
57
Middlewares existentes (connect y otros)

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 ms mdulos de terceros (http://expressjs.com/resources/middleware.html)
58
Formulario GET
59
GET /hola?user=Paco&id=7 HTTP/1

Host: upm.es
Accept: text/*, image/*
Parmetros con GET
Accept-language: en, sp
........
Un formulario permite enviar parmetros al servidor

n
solo mediante Solicitudes HTTP de tipo GET y POST

w Los parametros se teclean en cajetines del formulario
n
Los cajetines se definen con la marca <input .> y otras
GET enva parmetros en pregunta (query) del path

n
Solicitud HTTP:
GET /hola?user=Paco&id=7
w Valores de parmetros: van en el query del path

n
Son strings de tamao limitado
Un envo de parmetros al servidor

n
Suele incluir dos transacciones

w Transaccin 1: Carga del formulario
Solicitud formulario
Envo formulario
Envio parmetros
w Transaccin 2: Envo y proceso de datos

Resultado envo
60
Un formulario se crea con la marca <form..>
Formulario: ejemplo
<form method=.. action=.. >

-> method indica si es GET o POST
-> action define la ruta (path) de la transac.
Las marcas <input ..> definen los cajetines
y botones del formulario:
<input type='text' ..> crea un cajetn donde
teclear un parmetro.
-> name='user'
nombre del parmetro
-> value='teclee ..' texto del cajetn.
<input type='submit' ..> crea el boton de
realizar transaccin.
-> value='Enviar' define texto del botn
61
Envo de parmetros en query

El envo de datos de un cliente a un servidor necesita un formulario, por lo que una aplicacin de
envo de datos necesita soportar 2 transacciones.
- Transaccin 1: cargar de la pgina Web con el formulario que permite enviar los datos.
- Transaccin 2: envo de datos en query con GET desde el formulario, seguida de respuesta.
Envo formulario
GET /hola?user=Paco HTTP/1.1
Envio parmetros
Host: upm.es
........
Resultado envo
62
Formulario con GET
Transaccin 1: carga el
formulario e,n el cliente
Transaccin 2: enva datos al
servidor y recibe respuesta.
Los datos de query se
guardan en express en
propiedades de req.query
del mismo nombre que cada
<input name=user> del
formulario: req.query.user
63
URL Encode
64
URL or percent encoding

Un URL se codifica en UTF-8 para su envo por Internet
n
Utilizando percent o URL encoding

w Corresponde con tipo MIME: application/x-www-form-urlencoded
n
URL encoding respeta la sintaxis de un URL
Reglas de codificacin
n
n
Los siguientes caracteres no se codifican:

Resto de caracteres UTF-8
a-zA-Z0-9- _ . ~!()
w Cada byte se codifica en hexadecimal con tres caracteres ASCII: %xy
Salvo * ; : @ & = + $ , / ? % # [ ] cuando son delimitadores en un URL

w El caracter en blanco puede codificarse como %20 o +
n
Ejemplo: http://wb.es/foto?n=Paco+Garc%C3%ADa
65
Envo de parmetros
URL encoded en query
Las Solicitudes HTTP GET

llevan los valores asignados a
los parmetros del query
siempre codificados en URLencoded.
En el formulario anterior con
GET, tanto el navegador, como
express procesan bien los
parmetros.
Solicitud
formulario
Envo
formulario
GET /hola?user=Paco+%2B+%26+%25+%24 HTTP/1.1
Envio
parmetros
Host: upm.es
........
Resultado
envo
66
Modulo querystring de node.js

Codifica y decodifica en formato URL encoded
n
Los mtodos stringify y parse

w transforman un objeto en un query (string URL encoded) y viceversa
Doc: http://nodejs.org/api/querystring.html
67
Formulario POST
68
POST /hola HTTP/1.1

Host: upm.es
........
Parmetros en POST
Content-type: application/x-www-form-urlencoded
Content-length: 17
user=Paco+Perez
Un formulario permite enviar parmetros al servidor

n
solo mediante Solicitudes HTTP de tipo GET y POST

w Los parametros se teclean en cajetines del formulario
n
Los cajetines se definen con la marca <input .> y otras
POST enva parmetros en el cuerpo (body) de la solicitud

n
Los parmetros strings en formato URL-encoded similar a la query

w Ejemplo de contenido del body:
id=47&user=Paco+Perez
n Los parmetros pueden tener cualquier tamao
Un envo de parmetros al servidor

n
Suele incluir dos transacciones

w Transaccin 1: Carga del formulario
w Transaccin 2: Envo y proceso de datos
Envo formulario
Envio parmetros
Resultado envo
69
Envo de parmetros en body

El envo de datos de un cliente a un servidor necesita un formulario, por lo que una aplicacin de
envo de datos suele cargar el formulario antes de realizar el envo.
- Transaccin 1: carga de la pgina Web con el formulario que permite enviar los datos.
- Transaccin 2: envo de datos en body con POST desde el formulario, seguida de respuesta.
Envo formulario
POST /hola HTTP/1.1
Envio parmetros
Host: upm.es
........
Content-type: application/x-www-form-urlencoded
Content-length: 17
Envo resultado
user=Paco+Perez
70
Formulario
con POST
Los parmetros del formulario

se envan en formato URL
encoded en el cuerpo (body)
de la respuesta.
Para descodificarlos se debe
instalar el paquete bodyparser de connect y usar su
MW urlencoded(), que los
guarda descodificados en
propiedades de req.body con
el mismo nombre de los
parametros del formulario
<input .. name=user>:
req.body.user.
Adems se ha instalado el MW
static visto anteriormente .
71
Cabeceras de transaccin POST
Esta captura ilustra los

parmetros de las
cabeceras de la solicitud y
la respuesta HTTP POST
de la aplicacin express
anterior.
72
Parmetro oculto y method override

73
Parmetro oculto
Parmetro oculto
n
Parmetro enviado al servidor, que no est visible en la pgina HTML

w Se pueden enviar en el query (GET y POST) o en el body (POST)
Envo en el query de un hiperenlace

n
<a href=/dir/hola.htm?id=47> Envo de parmetro oculto</a>
Envo en el query de la accin de un POST

n
<form method="POST" action="/dir/hola?id=47"> </form>
Envo en el body de un formulario con marca marca input, de tipo hidden"

n
<input type="hidden" name="id" value=47">
GET /hola?id=47&user=Paco HTT....
74
Method Override
Un formulario solo puede enviar GET y POST al servidor
n
Aplicaciones REST deben enviar tambin PUT y DELETE

w Las tcnicas de method override (anulacin) envan PUT o DELETE
n
Encapsulados en un parmetro oculto dentro de una transaccin POST
PUT y DELETE se encapsulan en el parmetro: _method

n
_method=PUT o _method=DELETE
w Es una convencin que indica que PUT o DELETE van encapsulados POST
n
ver method-override de express: https://github.com/expressjs/method-override
PUT y DELETE podran encapsularse en GET

n
Siempre que no necesiten llevar informacin en el body

w Pero es bastante antinatural y pueden no funcionar con caches mal diseadas
75
methodOverride()
methodOverride() se instala
con use() como otros
middlewares y desencapsula
PUT y DELETE encapsuladas
dentro de POST.
En el ejemplo se envan en body
los parmetros (urlencoded):
_method=put&user=Paco
As las acciones PUT o DELETE
se definen con put() y delete(),
igual que get() o post().
76
Final del tema
77

Buenos Dias Princesa - BlueJeans

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Buenos Dias Princesa - BlueJeans

Diunggah oleh

Hak Cipta:

Format Tersedia

Introduccin a HTTP

Juan Quemada, DIT - UPM

Clientes, servidores y la nube

Clientes: dan acceso a los usuarios a la informacin y los servicios

protocolos para crear aplicaciones sobre redes hetereogeneas

Protocolo del cual hereda su nombre Internet

Cada elemento de Internet tiene una direccin IP diferente: 112.9.0.144, ...

w TCP y UDP: protocolos de transporte de informacin

Las mayora de las aplicaciones de Internet usan el servicio TCP

Conectando clientes y servidores con circuitos virtuales

Voz y video sobre IP usan el servicio UDP

Direccin de aplicacin de 16 bits dentro de la mquina servidora

El programa servidor es lo que normalmente denominamos servidor

Cliente y servidor se comunican con un protocolo de aplicacin: HTTP, SMTP, ..

Los servicios tienen un protocolo y un puerto por defecto

Si un servidor no est en el puerto por defecto

Su direccin debe incluir el puerto, p.e. dit.upm.es:8080, upm.es:8000

Juan Quemada, DIT, UPM

URI - Uniform Resource Identifier

identificador de un recurso (servicio) de Internet

Existen 2 tipos de URI

URL - Uniform Resource Locator

URN: Uniform Resource Name

Ejemplos de URL de email, pgina Web, ftp, ..

URL Web: http://etsit.upm.es/anuncios/index.html

Cliente enva SOLICITUD a servidor

Servidor envia RESPUESTA a cliente

Protocolo transaccional de acceso a recursos

Solicitud y respuesta son mensajes independientes (como emails)

Solicitud HTTP GET

GET /me.htm HTTP/1.1

parmetros Accept: text/*, image/*

Respuesta HTTP GET

Navegador enva solicitud y servidor devuelve respuesta, p.e.

Solicitud: solicitud GET de un fichero o recurso

Mensajes (solicitud o respuesta): constan de Cabecera y Cuerpo.

GET /dir/me.htm HTTP/1.1\n

Mtodo GET, recurso, versin-HTTP 1.1

Host: identifica el servidor, se incluye porque el

GET: NO incluye cuerpo en la solicitud

HTTP/1.1 200 OK\n

Versin HTTP 1.1, 200 (todo ok), mensaje

Content-type: tipo MIME de recurso, text/

pgina HTML (recurso)

Solicitud HTTP GET

parmetros Accept: text/*, image/*

Tipos MIME: definen el tipo de un recurso

GET /me.htm HTTP/1.1

Aparecieron en email para tipar ficheros adjuntos

w Su uso se ha extendido a otros protocolos y en particular a HTTP

Un tipo MIME tiene 2 partes tipo / subtipo,

image/gif, image/jpeg, image/png, image/svg, ..

Cabecera Request: Accept: text/html, image/png, ...

Cdigos de estado (HTTP status codes)

// Continuar solicitud parcial

Solicitud finalizada (2xx)

// Operacin GET realizada satisfactoriamente

// Recurso creado con POST, PUT

206 Partial Content

// para uso con GET parcial

301 Moved Permanently // Recurso se ha movido, actualizar URL

303 See Other

// Enva la URI de un documento de respuesta

304 Not Modified

parmetros Accept: text/, image/

parmetros Accept: text/, image/