Máster INCAR: Aplicación de las TIC en la investigación (2016/12/20)

Máster en Ingeniería de Control, Automatización y RobóticaDpto. de Ingeniería de Sistemas y Automática

Aplicación de las TIC en la investigación

Bloque 1: "Sistemas de información para la investigación"

Sistemas Web (arquitectura REST y APIs web)

Oskar Casquero & Jesus Romo

20 de Diciembre de 2016

TEORÍA• Describir el funcionamiento del protocolo HTTP.

– ¿Qué ocurre cuando un usuario solicita un recurso (por ejemplo, una página web) a través del navegador? – ¿Cómo se realizan las redirecciones? (Códigos de respuesta 3xx)– ¿Qué ocurre cuando una petición no puede ser satisfecha? (Códigos de respuesta 4xx y 5xx) – ¿Cómo se envían datos desde el cliente al servidor? (Formularios)

• Para responder a estas preguntas, se describirá la semántica y la sintaxis del protocolo HTTP mediante ejemplos:– Estructura de la petición y de la respuesta.– Métodos y cabeceras para implementar el funcionamiento del protocolo.

PRÁCTICA• Programar clientes HTTP en Python:

– Conexión a Google.– Envío de datos a un servidor: obtener la letra del DNI.– Descarga de una imagen de un servidor.– Conexión a ThinkSpeak.

Objetivos

• Una RFC (Request For Comments) constituye un memorando que unos expertos hacen llegar al IETF (Internet Engineering Task Force) para que sea valorado por la comunidad con el objetivo discutir y consensuar estándares para Internet.

• HTTP v1.1 (HTTP/1.1) se definió originalmente en la RFC 2616. Actualmente, las especificación de HTTP/1.1 se recoge en las siguientes RFCs:– RFC 7230: HTTP/1.1 Message Syntax and Routing – RFC 7231: HTTP/1.1 Semantics and Content– RFC 7232: HTTP/1.1 Conditional Requests– RFC 7233: HTTP/1.1 Range Requests– RFC 7234: HTTP/1.1 Caching – RFC 7235: HTTP/1.1 Authentication

En este tema estudiaremos diversos aspectos recogidos en estas RFCs y otras relacionadas.

• En mayo de 2015 se publicó la RFC 7540: HTTP/2.– Esta nueva versión surge de la necesidad de agilizar la carga de las páginas web actuales, las cuales

• están compuestas por un número elevado de imágenes, javascript y CSS.• y realizan peticiones asíncronas mediante AJAX.

– HTTP/2 está basado en el protocolo SPDY de Google (en uso desde 2010).– La semántica y la sintaxis de los mensajes es la misma que la de HTTP/1.1. Únicamente cambia la forma en que se expresan y envían los mensajes HTTP

por la red (“on the wire”).

• Página web del grupo de trabajo sobre HTTP del IETF: http://httpwg.github.io/

• Existen otras organizaciones encargadas de estandarizar otra serie de tecnologías relacionadas con Sistemas Web; por ejemplo, el W3C (World Wide Web Consortium) coordina los estándares de HTML, CSS y DOM.

Introducción HTTP

https://www.ietf.org/rfc.html

https://www.ietf.org/



http://tools.ietf.org/html/rfc2616








http://httpwg.github.io/

http://www.w3.org/

http://www.w3.org/

http://www.w3.org/standards/techs/html

http://www.w3.org/standards/techs/css

http://www.w3.org/standards/techs/dom

• HTTP es un protocolo de nivel de aplicación originalmente diseñado para la transferencia de recursos de tipo hipertexto entre un cliente y un servidor.– Protocolo de nivel de aplicación: HTTP da soporte directo a aplicaciones

(e.g., a un navegador, a un servidor web) para el envío y recepción de datos.– Transferencia: HTTP utiliza un modelo de transacciones que sigue un

esquema de petición-respuesta: la aplicación cliente pide y la aplicación servidora responde a dicha petición.

– Recurso: HTTP referencia un recurso mediante un identificador denominado URI (Universal Resource Identifier).

– Hipertexto: texto que contiene elementos a partir de los cuales se puede acceder a otra información. • Ejemplos: una página web, una enciclopedia en cd-rom.• En el caso de una página web, el lenguaje utilizado para definir el

hipertexto es HTML.

Introducción HTTP

• Aclaraciones con respecto a los términos URI y URL.

– URI (Universal Resource Identifier) es una cadena de caracteres US-ASCII que permite identificar un recurso en Internet. Según la RFC 3986, Sección 3, su sintaxis es la siguiente:

URI = scheme ":" "//" authority [ "/" path ] [ "?" query ] [ "#" fragment ]

– URL (Universal Resource Locator) es un URI que, además de identificar un recurso, permite localizarlo en Internet porque la propia cadena describe la forma de acceder a dicho recurso. Ejemplo:

https://egela.ehu.eus/course/view.php?id=3032 (página de la asignatura en eGela)

Lectura de la URL: En el servidor egela.ehu.eus se encuentra un recurso, accesible mediante protocolo HTTP sobre SSL/TLS, cuyo path completo es /course/view.php. A través de este recurso, se genera la página web de una asignatura. Para ello, es necesario pasar un parámetro, de nombre id, cuyo valor permite indicar la asignatura concreta a partir de cuyo contenido se debe generar la página web.

• Para evitar ambigüedades, se recomienda emplear el término URI. Es decir, un recurso se referencia mediante su URI. Dependiendo del esquema utilizado, el URI también podrá utilizarse como dirección del recurso (por ejemplo, en el caso del esquema http).

Acceso a los Recursos: URI

http://www.richardvannoy.info/labs/lab-10/images/asciifull.gif

http://tools.ietf.org/html/rfc3986#section-3

https://egela.ehu.eus/course/view.php?id=3032

Objetivos TEORÍA• Describir el funcionamiento del protocolo HTTP.




– Conexión a Google.– Envío de datos a un servidor: obtener la letra de un DNI.– Descarga de una imagen de un servidor.– Conexión a ThinkSpeak.

A continuación se va a describir, a través de un ejemplo, el funcionamiento del protocolo HTTP.

Concretamente, se van a responder las siguientes preguntas:• ¿Qué ocurre cuando un usuario solicita un recurso (por

ejemplo, una página web) a través del navegador? • ¿Qué hace el navegador? • ¿Qué formato (sintaxis y semántica) tiene la petición? • ¿Cómo se procesa la petición en el servidor?• ¿Qué formato (sintaxis y semántica) tiene la respuesta?• ¿Cómo se carga una página web en el navegador?

Funcionamiento de HTTP

Funcionamiento de HTTP: agentes que intervienen

NOTAS acerca del cliente:• Firefox es una aplicación cliente (navegador

web) que implementa el protocolo HTTP.• Firefox puede decodificar contenido

comprimido en formato gzip.• El sistema operativo implementa la pila de

protocolos TCP/IP.• El sistema operativo tiene registrada la

dirección de un servidor DNS.

NOTAS acerca del servidor:• El alias del servidor es incar2016.com• Tomcat es una aplicación servidora (servidor web)

que implementa el protocolo HTTP.• Tomcat escucha en el puerto 8080.• Tomcat ofrece un recurso identificado con la URI

http://incar2016.com:8080/recurso.• Dicho recurso es un documento estático disponible

en texto plano y HTML, en eu y es, en versión móvil y de escritorio.• Tomcat no puede comprimir contenido.• El sistema operativo implementa la pila de

protocolos TCP/IP.

CLIENTEHDD1

HDD2

SERVIDOR

http://incar2016.com:8080/resource

https://www.google.es/url?sa=i&rct=j&q=&esrc=s&source=images&cd=&cad=rja&uact=8&ved=0CAcQjRxqFQoTCPqlvYuNmMkCFcZMFAodnQIBxw&url=https://www.flickr.com/photos/mlemos/1487431855&bvm=bv.107467506,d.d24&psig=AFQjCNGIMhv8cjgm9Nr_Y15TbUmv0w_cyw&ust=1447871836863338

https://www.google.es/url?sa=i&rct=j&q=&esrc=s&source=images&cd=&cad=rja&uact=8&ved=&url=https://www.iconfinder.com/icons/40687/blackboard_icon&bvm=bv.107467506,d.d24&psig=AFQjCNEWirMl6vsycDwgFr9LxvpVcsyciA&ust=1447873149147475

http://www.google.es/url?sa=i&rct=j&q=&esrc=s&source=images&cd=&cad=rja&uact=8&ved=&url=http://www.quadratic.be/fr/techno.html&psig=AFQjCNEx3T8slJvjNyrrKK8gq16UDUDwXQ&ust=1447871998362040


Funcionamiento de HTTP: establecimiento de cx tcp

NOTAS acerca del cliente:• Firefox es una aplicación cliente (navegador

web) que implementa el protocolo HTTP.• Firefox puede decodificar contenido

comprimido en formato gzip.• El sistema operativo implementa la pila de

protocolos TCP/IP.• El sistema operativo tiene registrada la

dirección de un servidor DNS.

CLIENTE

Cuando el usuario introduce la URI en la barra de direcciones del navegador, éste analiza sus diferentes partes:

http://incar2016.com:8080/recursoScheme: httpAuthority: Host: incar2016.com

Port: 8080Path: /recurso

El navegador solicita al sistema operativo la resolución del nombre de host del servidor. El sistema operativo resuelve esta solicitud a través del servidor DNS y devuelve la dirección IP del servidor al navegador.

Con este dato, el navegador solicita al sistema operativo el establecimiento de una conexión TCP (SYN, SYN-ACK y ACK) desde un puerto local al puerto 8080 del servidor.

http://incar2016.com:8080/recurso



Funcionamiento de HTTP: establecimiento de cx tcp

HDD1

HDD2

CLIENTESERVIDOR

Conexión TCP

808057535





Actividad: establecer conexión tcp en python

• Haciendo uso de la librería httplib, programar un script en Python que establezca una conexión TCP con el puerto 80 del servidor www.google.com.

http://www.google.com/

---> estableciendo conexión TCP---> conexión TCP establecida Local IP address is 158.227.70.162 Local TCP port is 57535

# -*- coding: UTF-8 -*-

# Librería de bajo nivel que implementa el protocolo HTTPimport httplib

print "\r\n---> estableciendo conexión TCP"conn = httplib.HTTPConnection('www.google.com', '80') # Definir conexión TCPconn.connect() # Establecer conexión TCPprint "---> conexión TCP establecida"

conn.sock.getsockname()print " Local IP address is " + str(conn.sock.getsockname()[0])print " Local TCP port is " + str(conn.sock.getsockname()[1])

conn.close()

Actividad: establecer conexión tcp en python

CÓDIGO

STDOUT

Funcionamiento de HTTP: petición del cliente

HDD1

HDD2

CLIENTESERVIDOR

Conexión TCPPetición HTTP

808057535

Método RequestURI HTTP/1.1 CabecerasCRLF*Cuerpo del mensaje (en octetos**)

Sintaxis de una petición HTTP

GET /recurso HTTP/1.1\r\nHost: incar2016.com:8080\r\nAccept: text/html\r\nAccept-Encoding: gzip,identity;q=0.5\r\nAccept-Language: en-US,es-ES;q=0.8\r\nUser-Agent: Mozilla Windows Escritorio\r\n\r\n

GET /recurso HTTP/1.1 Host: incar2016.com:8080Accept: text/htmlAccept-Encoding: gzip,identity;q=0.5Accept-Language: en-US,es-ES;q=0.8User-Agent: Mozilla Windows Escritorio

Petición HTTP del ejemplo

* CRLF = Carriage Return + Line Feed = \r\n** octeto = secuencia de 8 bits con valor entre 0 y 255





Funcionamiento de HTTP: petición del cliente

Método RequestURI HTTP/1.1 CabecerasCRLFCuerpo del mensaje (en octetos)

Sintaxis de una petición HTTP

GET /recurso HTTP/1.1 Host: incar2016.com:8080 Accept: text/htmlAccept-Encoding: gzip,identity;q=0.5Accept-Language: en-US,es-ES;q=0.8User-Agent: Mozilla Windows Escritorio

Petición HTTP del ejemplo

Método: GETEl método describe el tipo de acción CRUD (Create, Read, Update and Delete) que se desea llevar a cabo sobre el recurso. En este caso, GET Lectura.

RequestURI: /recursoLa identificación del recurso puede realizarse con la URI o con el path absoluto del recurso dentro del servidor web.

GET http://incar2016.com:8080/recurso HTTP/1.1

GET /recurso HTTP/1.1 Host: incar2016.com:8080

Cabeceras: caracterizan determinados aspectos del cliente o indican preferencias sobre la respuesta.

Accept: el navegador indica que acepta contenido en HTML.Accept-Encoding: el navegador indica que prefiere

contenido comprimido (en formato gzip), aunque también acepta contenido no comprimido (identity)

Accept-Language: el navegador indica que su preferencia de idioma es el inglés y su segunda opción el castellano.

User-Agent: el navegador se identifica como Mozilla sobre una plataforma Windows de escritorio.

Cuerpo del mensaje: en este caso está vacío.

Actividad: realizar petición http en python

• Haciendo uso de la librería httplib, programar un script en Python que solicite el recurso / mediante una petición HTTP al puerto 80 del servidor www.google.com.


Actividad: realizar petición http en python

# -*- coding: UTF-8 -*-

# Librería de bajo nivel que implementa el protocolo HTTPimport httplib

print "\r\n---> estableciendo conexión TCP"servidor = 'www.google.com'conn = httplib.HTTPConnection(servidor) # Definir conexión TCP con puerto 80conn.connect() # Establecer conexión TCPprint "---> conexión TCP establecida"


print "---> configurando parámetros de la petición HTTP"metodo = 'GET'recurso = '/'cabeceras_peticion = {'Host': servidor, 'User-Agent': 'Cliente Python',}cuerpo_peticion = ''print "---> realizando petición HTTP"conn.request(metodo, recurso, headers=cabeceras_peticion, body=cuerpo_peticion)

conn.close()

Funcionamiento de HTTP: procesamiento de la petición en el servidor

NOTAS acerca del servidor:• El alias del servidor es incar2016.com• Tomcat es una aplicación servidora (servidor web)

que implementa el protocolo HTTP.• Tomcat escucha en el puerto 8080.• Tomcat ofrece un recurso identificado con la URI

http://incar2016.com:8080/recurso.• Dicho recurso es un documento estático disponible

en texto plano y HTML, en eu y es, en versión móvil y de escritorio.• Tomcat no puede comprimir contenido.• El sistema operativo implementa la pila de

protocolos TCP/IP.

HDD1

HDD2

SERVIDORCuando el servidor web recibe la petición, analiza el método y la RequestURI para saber si:

1. El recurso existe.2. Se le puede aplicar la acción solicitada.

Negociación de contenido: si el recurso existe y se le puede aplicar la acción solicitada, el servidor web analizará las cabeceras de la petición para devolver la versión del recurso que mejor se adapte a las necesidades del cliente:• Accept: text/html• Accept-Encoding: gzip,identity;q=0.5• Accept-Language: en-US,es-ES;q=0.8• User-Agent: Mozilla Windows Escritorio

En este caso, el servidor web devuelve una respuesta cuyo contenido tiene las siguientes características:• codificado en HTML• sin compresión• en castellano• en versión clásica

http://sw2016.appspot.com:8080/resource



Funcionamiento de HTTP: respuesta del servidor

HDD1

HDD2

CLIENTESERVIDOR

Conexión TCPRespuesta HTTP

808057535

HTTP/1.1 Status DescripciónCabecerasCRLFCuerpo del mensaje (en octetos)

Sintaxis de una respuesta HTTP

HTTP/1.1 200 OK\r\nDate: Thu, 20 Mar 2014 20:25:52 GMT\r\nLast-Modified: Tue, 17 Sep 2013 13:00:02 GMT\r\nETag: "1a968-3ec-4e693e61bb8b6“\r\nContent-Length: 76\r\nContent-Type: text/html; charset=ISO-8859-1\r\n\r\n<html><head><title>index.html</title></head><body>Hello World!</body></html>

HTTP/1.1 200 OKDate: Thu, 20 Nov 2015 20:25:52 GMTLast-Modified: Tue, 17 Sep 2015 13:00:02 GMTETag: "1a968-3ec-4e693e61bb8b6"Content-Length: 76Content-Type: text/html; charset=ISO-8859-1

<html><head><title>index.html</title></head><body>Hello World!</body></html>

Respuesta HTTP del ejemplo





Funcionamiento de HTTP: respuesta del servidor

Status: 200Código que describe el resultado del intento por entender y satisfacer la petición.

Concretamente, el código 200 indica que la petición está bien formada y que ha sido procesada correctamente.

Para programas.

Descripción: OKDescripción textual asociada al Status. Para usuarios.

Cabeceras: caracterizan determinados aspectos de la respuesta.Content-Length: el servidor indica la longitud (número de

octetos) del contenido de la respuesta.Content-Type: el servidor indica que el contenido es de tipo

HTML y que sus octetos están codificados en latin-1.

Cuerpo del mensaje: página HTML.

HTTP/1.1 Status DescripciónCabecerasCRLFCuerpo del mensaje (en octetos)

Sintaxis de una respuesta HTTP

HTTP/1.1 200 OKDate: Thu, 20 Mar 2014 20:25:52 GMTLast-Modified: Tue, 17 Sep 2013 13:00:02 GMTETag: "1a968-3ec-4e693e61bb8b6"Content-Length: 76Content-Type: text/html; charset=ISO-8859-1

<html><head><title>index.html</title></head><body>Hello World!</body></html>

Respuesta HTTP del ejemplo

http://tools.ietf.org/html/rfc2616#section-10.2.1

Actividad: recibir respuesta http en python

• Haciendo uso de la librería httplib, programar un script en Python que solicite el recurso / mediante una petición HTTP al puerto 80 del servidor www.google.com y visualice el código status de la respuesta recibida desde el servidor.


Actividad: recibir respuesta http en python

# -*- coding: UTF-8 -*-

import httplib

print "\r\n---> estableciendo conexión TCP"servidor = 'www.google.com'conn = httplib.HTTPConnection(servidor) # Definir conexión TCP con puerto 80conn.connect() # Establecer conexión TCPprint "---> conexión TCP establecida"


print "---> configurando parámetros de la petición HTTP"metodo = 'GET'recurso = '/'cabeceras_peticion = {'Host': servidor, 'User-Agent': 'Cliente Python',}cuerpo_peticion = ''print "---> realizando petición HTTP"conn.request(metodo, recurso, headers=cabeceras_peticion, body=cuerpo_peticion)

print "---> recibiendo respuesta HTTP"respuesta = conn.getresponse()print " Status: " + str(respuesta.status)

conn.close()

Funcionamiento de HTTP: carga de una pagina web

• Una página web es un documento HTML que puede embeber:– imágenes– estilos definidos mediante CSS.– código JavaScript para modificar la interfaz de usuario de forma dinámica.

• Pero también es muy habitual almacenar las imágenes, los CSS y el JavaScript en sendos ficheros que se referencian desde la página web. En este caso, después de recibir el documento HTML, el navegador analiza los enlaces (URIs) que forman la página HTML y realiza sendas peticiones HTTP para descargarlos.


www.ehu.es158.227.0.65

servidorcliente

GET / HTTP/1.1Host: www.ehu.esAccept: text/htmlAccept-Encoding: gzip,identity;q=0.5Accept-Language: en-US,es-ES;q=0.8User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:26.0)Connection: keep-alive*

* La cabecera “Connection” indica qué hacer con la conexión TCP una vez transferida la respuesta.Connection: close

cerrar la conexión TCP Connection: keep-alive

mantener la conexión TCP

http://www.ehu.es/


www.ehu.es158.227.0.65

HTTP/1.1 200 OKDate: Thu, 20 Nov 2015 20:25:52 GMTLast-Modified: Tue, 17 Sep 2015 13:00:02 GMTETag: "1a968-3ec-4e693e61bb8b6"Content-Length: 1004Content-Type: text/html; charset=ISO-8859-1Keep-Alive: timeout=2, max=500*

PAGINA WEB (DOCUMENTO HTML) servidorcliente

* La cabecera “Keep-Alive” concreta las condiciones bajo las cuales se mantiene la conexión TCP.

timeout=2 Tiempo, en segundos, que se permite mantener una conexión TCP sin tráfico HTTP.

max=500 número máximo de peticiones que se pueden realizar dentro de la conexión TCP.

http://www.ehu.es/


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-Transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="eu"> <head> <title>Euskal Herriko Unibertsitateko Web Ataria/Portal web de la Universidad del País Vasco</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1“/> <link href="/AVCustom/styles/prehome.css" rel="stylesheet" type="text/css“/> <script type="text/javascript" src="/AVCustom/r01gLangSelectorVA/scripts/PortalLanguagePreHome.js“/> </head> <body> <script type="text/javascript"> testPreHome("p200","home","home","shenhm"); </script> <div id=container> <div id=contenido> <ul> <li><a href="/p200-home/eu/">Euskara </a><img src="/AVCustom/images/bullet.jpg"></li> <li><a href="/p200-home/es/">Español </a><img src="/AVCustom/images/bullet.jpg"></li> <li><a href="/p200-shenhm/en">English </a><img src="/AVCustom/images/bullet.jpg"></li> </ul> </div> </div> </body> </html>

PÁGINA WEB(DOCUMENTO HTML)

view-source:http://www.ehu.es/AVCustom/styles/prehome.css





view-source:http://www.ehu.es/AVCustom/r01gLangSelectorVA/scripts/PortalLanguagePreHome.js



view-source:http://www.ehu.es/AVCustom/images/bullet.jpg
















www.ehu.es158.227.0.65

GET /AVCustom/styles/prehome.css

GET …PortalLanguagePreHome.js

GET /AVCustom/images/bullet.jpg

HTTP/1.1 200 OK

HTTP/1.1 200 OK

HTTP/1.1 200 OKservidorcliente

http://www.ehu.es/












TEORÍA• Describir el funcionamiento del protocolo HTTP.




– Conexión a Google.– Envío de datos a un servidor: obtener la letra del DNI.– Descarga de una imagen de un servidor.– Conexión a ThinkSpeak.

Objetivos

• En ocasiones, un recurso puede cambiar de dirección o un servidor web puede redirigir al cliente a otra URI donde la petición va a poder ser atendida de forma más eficiente.

• El protocolo HTTP proporciona un mecanismo que permite al servidor web indicar al cliente la nueva URI en la que se ha ubicado el recurso. Para ello, se utilizan:– los códigos de respuesta 301, 302 ó 303– y la cabecera “Location”

Funcionamiento de HTTP: redirección

• Supongamos que un cliente ubicado en Madrid solicita un recurso cuya URI es: http://www.google.com/• El servidor web que atiende la petición HTTP detecta que dirección IP de

origen del paquete es de España, por lo que devuelve una respuesta al cliente indicándole que realice una redirección a http://www.google.es/• El cliente, al detectar un código de respuesta 302, extrae el contenido de

la cabecera “Location” y realiza una nueva petición a esta URI. En un navegador, este proceso ocurre de forma transparente para el usuario.

Funcionamiento de HTTP: redirección

GET / HTTP/1.1 Host: www.google.comAccept: text/htmlAccept-Encoding: identityAccept-Language: en-US,es-ES;q=0.8User-Agent: Mozilla Windows Escritorio

Petición de ejemploHTTP/1.1 302 FoundContent-Length: 137Content-Type: text/html; charset=UTF-8Location: http://www.google.es/

<html><head><title>Redirection 302</title></head><body><a href=“http://www.google.es/>Redirect to http://www.google.es/</a></body></html>

Respuesta de ejemplo


http://www.google.es/

Actividad: redirección• Haciendo uso de la librería httplib, programar un

script en Python que simule los pasos que realiza el navegador cuando se solicita el recurso http://www.google.com/ y almacenar la página web (documento HTML) resultante en un fichero.


Máster INCAR: Aplicación de las TIC en la investigación (2016/12/20)

Education

Transcript of Máster INCAR: Aplicación de las TIC en la investigación (2016/12/20)