![](https://i.imgur.com/ld6aL74.png =200x) # Internet & Servidores HTTP ## Introducción En los inicios, el código HTML, CSS y JavaScript ha estado en archivos estáticos en nuestra computadora. Esto funciona bien para el desarrollo local, pero ¿y si queremos que el mundo vea nuestro código? Necesitamos poner nuestros archivos estáticos en un **servidor** para que sean accesibles a todo Internet. En esta lección, hablaremos sobre el rol de **servidores** en aplicaciones web, cómo **HTTP** está involucrado e incluso escribiremos nuestro primer código de servidor usando algunos de estos conceptos. :::info Hasta podríamos imaginar que si fuera más fácil para las personas en Internet, ellas podrían conectarse a su computadora y acceder a los archivos de tu sitio web, pero tu computadora debería estar **encendida**, **despierta** y tener **Internet literalmente todo el tiempo**. No es muy práctico. Los **servidores**, sin embargo, son exactamente eso: computadoras que siempre están encendidas, despiertas y conectadas a Internet para que los usuarios puedan conectarse a ellas. ::: ## Internet Para hablar de **servidores**, realmente tenemos que hablar de **Internet**. ¿Qué es, de todos modos? En realidad, son **millones de dispositivos** conectados entre sí en una **red masiva**. Algunos dispositivos están conectados de forma inalámbrica y otros están conectados con cables reales. :::success Estos dispositivos están en todo el mundo. Para conectar masas de tierra, hay **cables de conexión en el fondo del océano**. Visite el [Sitio web del mapa de cables submarinos](https://www.submarinecablemap.com/) para ver los cables bajo el océano que conectan el mundo. ::: ![](https://i.imgur.com/RKeemCn.png) ### Arquitectura Cliente-Servidor Todos los dispositivos conectados a Internet son **servidores** o **clientes**. - Un **servidor** es un dispositivo que tiene **contenido y funcionalidad disponibles para su uso**. Piense en el servidor donde cargamos nuestro código de sitio web. - Un **cliente** es un dispositivo que quiere **acceder al contenido y la funcionalidad** desde un _servidor_. Piense en nuestros propios celulares que usamos para visitar diferentes sitios web. Imagínese que Internet es un restaurante enorme que tiene muchas cocinas diferentes con todo tipo de cocina. En ese restaurante, las personas que quieren comer son **clientes** (quieren acceder a la comida). Los camareros son los **servidores** (ponen la comida a disposición de los clientes). ![](https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_52990f8d31567a1abd048415fdeedc90.png) **Los clientes** tienen que pedir a los servidores lo que quieren. Cualquier comida o bebida que deba ser **solicitada** al servidor. **Los servidores** tienen que esperar y escuchar a los clientes, averiguar qué quieren e ir a la cocina a buscarlo. Si todo sale de acuerdo al plan, los servidores obtendrán todo y **responderán** a los clientes con lo que se les pidió. Si las cosas salen mal, la **respuesta** del servidor debe comunicárselo al cliente (como si se hubiera acabado la milanesa). :::warning Puede resultar confuso al principio, pero los términos **cliente** y **servidor** pueden referirse a dos cosas diferentes: - las **computadoras (o dispositivos) físicos** que están conectados a Internet - el **software** que se ejecuta en esas computadoras. Por ejemplo, nuestras **computadoras personales** pueden considerarse **clientes**, pero una **aplicación de navegador web** como Google Chrome también puede denominarse **cliente**. Tiene un código que le permite descargar contenido de servidores como sitios web, imágenes, videos, etc. ::: ### El ciclo de Solicitud-Respuesta Los términos **solicitud (request)** y **respuesta(response)** son importantes cuando se trata del desarrollo de aplicaciones. Básicamente, todas las aplicaciones que usamos son **aplicaciones cliente** que tienen código para hacer que su computadora **se comunique con los servidores**. Hay muy pocas excepciones (como su aplicación de calculadora, probablemente). La forma en que ocurre la comunicación es que su aplicación (el cliente) realiza una **solicitud** de algo y luego un servidor en Internet entrega una **respuesta**. Esta **solicitud** y **respuesta** ocurre muchas veces mientras usamos aplicaciones, por lo que lo llamamos el [request-response cycle](https://en.wikipedia.org/wiki/Request%E2%80%93response). Es una de las formas más fundamentales en que las computadoras se comunican entre sí: la primera computadora (cliente) envía una solicitud de algunos datos y la segunda computadora (servidor) responde a la solicitud. ![](https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_1bb24dbaf887dc70fc219c20988d7c39.png) Para un sitio web, por ejemplo, su navegador debe realizar todas estas solicitudes (y otras): 1. Solicite el código HTML inicial 2. Solicite el archivo CSS 3. Solicite cualquier imagen (cada archivo es una solicitud separada) 4. Solicite cualquier archivo JavaScript (el archivo es una solicitud separada) 5. Solicite los archivos de fuentes (nuevamente, cada uno su propia solicitud) A continuación, se muestra un ejemplo de los cientos de solicitudes que realiza su navegador para visitar la página de inicio de Amazon: ![](https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_138cbb242c7e1d520d6679e80daee59c.png) :::info Puede ver todas las solicitudes que realiza un sitio web mediante la [pestaña Red de Chrome DevTools](https://developers.google.com/web/tools/chrome-devtools/network-performance/reference). Primero abra Chrome DevTools, seleccione la pestaña _Network_ y luego visite cualquier sitio web. ::: ### DNS Cada computadora conectada a Internet tiene una **dirección IP**. Piense en las direcciones IP como las direcciones de las calles de edificios reales. Podemos conectarnos a cualquier "ubicación" en Internet debido a estas direcciones. Una dirección IP consta de cuatro números entre 0 y 255 separados por puntos. Por ejemplo, esta es una de las direcciones IP de Google: `66.102.1.102`. Si conociera la dirección IP de sus sitios web favoritos, podría pegarla en la barra de ubicación de su navegador y funcionaría. El problema es que el usuario promedio de Internet visita docenas de sitios web diferentes todos los días. Al igual que con las direcciones reales, **es difícil recordar las direcciones IP**. ¡Ahí es donde entra el DNS! ![](https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_e2c661762bcb597c040ff5bc5fb845cf.png) El **Sistema de nombres de dominio**, o **DNS** para abreviar, es lo que nos permite usar nombres de dominio como _google.com_ en lugar de direcciones IP. Es básicamente un sistema de directorios en línea que puede traducir esos nombres de dominio a las direcciones IP a las que pertenecen. Nuestro software utiliza DNS entre bastidores cada vez que navegamos por la Web. ### HTTP (en pocas palabras) Cuando visitas un sitio web y pasa por todo este proceso de solicitudes y respuestas, el primer paso siempre es escribir la URL de ese sitio web. Ahí es cuando el DNS se activa y lo enruta a una dirección IP de un servidor en Internet. Probablemente haya notado que las URL adecuadas de todos los sitios web comienzan con _http_ (incluso si no lo escribe inicialmente). **HTTP** significa *Protocolo de transferencia de hipertexto por sus siglas en Inglés*. Es el protocolo de red que se utiliza para entregar prácticamente todos los archivos y otros datos (denominados colectivamente recursos) en la World Wide Web, ya sean archivos HTML, archivos de imagen, resultados de consultas o cualquier otra cosa. Un **protocolo** es simplemente un conjunto de reglas para la comunicación, en este caso para la comunicación entre equipos cliente y servidor. Los humanos también tenemos protocolos con reglas para comunicarnos entre nosotros. Si no seguimos el protocolo, la comunicación no se realizará sin problemas. Si le saludo con un "Hola", su suposición natural es responder en español. Respondes con "Hola, ¿cómo estás?". Si te saludo con un "Hola" y tú respondes con un "Hi, ¿How are you?" el protocolo está roto. No nos comunicamos con las mismas reglas y es posible que no podamos entendernos. **HTTP** es la forma en que se comunican las computadoras en Internet. Los detalles técnicos no son importantes en este momento, pero esencialmente los clientes (incluido su navegador) usan las reglas de HTTP para **enviar sus solicitudes** a los servidores y los servidores **también responden usando esas reglas**. El servidor y el cliente tienen una pequeña conversación para averiguar qué debe suceder. Una "conversación" HTTP es (conceptualmente) así: > ** Cliente ** _ llama a ucom.edu.py_ > ** Cliente ** - Hola > ** Servidor ** - Hola > ** Cliente ** - ¿Puedes traerme `index.html`? (_ esta es la solicitud_) > ** Servidor ** _piensa_ > ** Servidor ** - ¡Está bien! Aquí lo tienes. > ** Servidor ** _ envía el archivo `index.html` (_ esta es la respuesta_) > ** Servidor ** _cuelga_ Todo eso solo por el HTML. Para obtener una imagen o el archivo CSS tiene que haber una conversación completamente nueva. En estas conversaciones, si su navegador no dice "Hola", nada de esto funciona. Eso es parte del protocolo HTTP. > ** Cliente ** _ llama a ucom.edu.py_ > ** Cliente ** - Hola > ** Servidor ** - Hola > ** Cliente ** - ¿Puedes conseguirme `style.css`? (_ esta es la solicitud_) > ** Servidor ** _piensa_ > ** Servidor ** - ¡Está bien! Aquí lo tienes. > ** Servidor ** _ envía el archivo `style.css` (_ esta es la respuesta_) > ** Servidor ** _cuelga_ :::success Si está interesado en más detalles técnicos de HTTP, puede [obtener más información sobre ellos en MDN](https://developer.mozilla.org/en-US/docs/Web/HTTP/Overview) y ver mucho de ellos en la **pestaña Red de Chrome DevTools**. ::: ## Backend Las computadoras no solo comprenden naturalmente el protocolo HTTP, cómo hacer solicitudes o enviar respuestas. Es el software que colocamos en estas computadoras lo que les da habilidades adicionales. ![](https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_715822743c4d9a7e0c5556a2211df370.jpg) **Las computadoras** cliente obtienen **software cliente** que les permite iniciar conversaciones HTTP y enviar solicitudes. Las computadoras **servidor** obtienen **software de servidor** que les permite esperar a que los clientes inicien conversaciones y respondan a las solicitudes. El software de cliente y servidor también se conoce con diferentes nombres: software **frontend** y **backend**. En este módulo, nos centraremos en los nuevos conceptos que necesitamos para la programación **backend**. El software de backend permite a los servidores responder a las solicitudes, pero también hay algunas otras cosas que solo el backend puede hacer. ### ¿Por qué debería usar un *backend*? - **Bases de datos**: Gmail tiene una enorme base de datos de todos sus correos electrónicos. - **Realizar un seguimiento de los usuarios** Facebook necesita saber quién eres antes de poder hacer una publicación. - **Lógica empresarial en mi aplicación** Amazon necesita realizar un seguimiento de su carrito de compras. Podemos agregar artículos, eliminar artículos, elegir métodos de pago y mucho más. Todas estas tareas son posibles escribiendo software *backend* para nuestras aplicaciones web. ## Recursos Extra - [Submarine Cable Map Website](https://www.submarinecablemap.com/) - [What is DNS?](https://www.cloudflare.com/learning/dns/what-is-dns/) - [An overview of HTTP](https://developer.mozilla.org/en-US/docs/Web/HTTP/Overview) - [Anatomy of an HTTP Transaction (Node.js)](https://nodejs.org/en/docs/guides/anatomy-of-an-http-transaction/)